chore: now in the profile the results are paginated

Franqsanz · Mar 1, 2024 · d676ba1 · d676ba1
1 parent 039b18c
commit d676ba1
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 42 deletions.
diff --git a/src/hooks/querys.ts b/src/hooks/querys.ts
@@ -198,10 +198,16 @@ function useProfile(
   userId: string | undefined,
   token: string | null,
 ) {
-  return useSuspenseQuery({
+  return useInfiniteQuery({
     queryKey: [keys.profile, username, userId],
-    queryFn: () => getUserAndBooks(username, userId, token),
-    gcTime: 3000,
+    queryFn: ({ pageParam }) =>
+      getUserAndBooks(username, userId, token, pageParam),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => {
+      if (lastPage.info.nextPage === null) return;
+
+      return lastPage.info.nextPage;
+    },
   });
 }
 
@@ -232,7 +238,7 @@ function useDeleteAccount() {
   // const { logOut } = useAccountActions();
 
   return useMutation({
-    mutationKey: ['deleteAccount'],
+    mutationKey: [keys.deleteAccount],
     mutationFn: (id: string | undefined) => deleteAccount(id),
     onError: async (error) => {
       console.error('Error en el servidor:', error);

diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
@@ -1,14 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import { NavLink, useParams } from 'react-router-dom';
 import {
+  Alert,
+  AlertIcon,
+  AlertTitle,
   Box,
   Flex,
   Image,
   Link,
   Icon,
   useColorModeValue,
+  Spinner,
 } from '@chakra-ui/react';
 import { AiOutlineCloudUpload } from 'react-icons/ai';
+import { useInView } from 'react-intersection-observer';
 
 import { MySimpleGrid } from '@components/MySimpleGrid';
 import { Card } from '@components/cards/Card';
@@ -20,53 +25,89 @@ import { CardType } from '@components/types';
 import ResultLength from '@components/ResultLength';
 import { useAuth } from '@contexts/AuthContext';
 import { NoData } from '@assets/assets';
+import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
 // import { logOut } from '../../services/firebase/auth';
 
 export function Profile() {
+  const bgCover = useColorModeValue('gray.100', 'gray.700');
+  const { ref, inView } = useInView();
   const getToken = window.localStorage.getItem('app_tk');
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
   const { username } = useParams();
-  const { data } = useProfile(username, uid, getToken);
-  const bgCover = useColorModeValue('gray.100', 'gray.700');
+  const { data, isPending, error, fetchNextPage, isFetchingNextPage } =
+    useProfile(username, uid, getToken);
+  const createdAt = data?.pages[0].user.createdAt;
   let asideAndCardsUI;
+  let fetchingNextPageUI;
 
-  if (data.books.length > 0) {
+  useEffect(() => {
+    if (inView) fetchNextPage();
+  }, [inView]);
+
+  if (isPending) {
+    return <SkeletonAllBooks showTags={false} />;
+  }
+
+  if (error) {
+    return (
+      <Alert
+        status='error'
+        variant='subtle'
+        flexDirection='column'
+        alignItems='center'
+        justifyContent='center'
+        textAlign='center'
+        minH='70vh'
+      >
+        <AlertIcon boxSize='50px' />
+        <AlertTitle mt='5' fontSize='xl'>
+          No se pudieron obtener los datos
+        </AlertTitle>
+      </Alert>
+    );
+  }
+
+  if (data?.pages[0].info.totalBooks > 0) {
     asideAndCardsUI = (
       <>
         <Aside>
-          <ResultLength data={data.books.length} />
+          <ResultLength data={data?.pages[0].info.totalBooks} />
           {/* {aboutCategoriesUI}
           {asideFilter}  */}
         </Aside>
         <MySimpleGrid>
-          {data.books.map(
-            ({
-              id,
-              category,
-              language,
-              title,
-              authors,
-              synopsis,
-              sourceLink,
-              pathUrl,
-              image,
-            }: CardType) => (
-              <React.Fragment key={id}>
-                <Card
-                  id={id}
-                  category={category}
-                  language={language}
-                  title={title}
-                  authors={authors}
-                  synopsis={synopsis}
-                  sourceLink={sourceLink}
-                  pathUrl={pathUrl}
-                  image={image}
-                />
-              </React.Fragment>
-            ),
-          )}
+          {data?.pages.map((page, index) => (
+            <React.Fragment key={index}>
+              {page.results.map(
+                ({
+                  id,
+                  category,
+                  language,
+                  title,
+                  authors,
+                  synopsis,
+                  sourceLink,
+                  pathUrl,
+                  image,
+                }: CardType) => (
+                  <React.Fragment key={id}>
+                    <Card
+                      id={id}
+                      category={category}
+                      language={language}
+                      title={title}
+                      authors={authors}
+                      synopsis={synopsis}
+                      sourceLink={sourceLink}
+                      pathUrl={pathUrl}
+                      image={image}
+                    />
+                  </React.Fragment>
+                ),
+              )}
+            </React.Fragment>
+          ))}
         </MySimpleGrid>
       </>
     );
@@ -122,11 +163,23 @@ export function Profile() {
     );
   }
 
+  if (isFetchingNextPage) {
+    fetchingNextPageUI = (
+      <Box p='10' textAlign='center'>
+        <Spinner
+          size={{ base: 'lg', md: 'xl' }}
+          thickness='4px'
+          speed='0.40s'
+        />
+      </Box>
+    );
+  }
+
   return (
     <>
       <MainHead
-        title={`${data.user.name} | XBuniverse`}
-        urlImage={data.user.picture}
+        title={`${data?.pages[0].user.name} | XBuniverse`}
+        urlImage={data?.pages[0].user.picture}
       />
       <Flex
         justify='center'
@@ -136,8 +189,8 @@ export function Profile() {
         bg={bgCover}
       >
         <Image
-          src={data.user.picture}
-          alt={`Imagen de perfil de ${data.user.name}`}
+          src={data?.pages[0].user.picture}
+          alt={`Imagen de perfil de ${data?.pages[0].user.name}`}
           referrerPolicy='no-referrer'
           borderRadius='full'
         />
@@ -147,7 +200,7 @@ export function Profile() {
           mt='3'
           textAlign='center'
         >
-          {data.user.name}
+          {data?.pages[0].user.name}
         </Box>
         <Flex
           direction='column'
@@ -158,7 +211,7 @@ export function Profile() {
           <Box as='span' fontSize={{ base: 'sm', md: 'md' }} fontWeight='bold'>
             Se unió el
           </Box>{' '}
-          {parseDate(data.user.createdAt)}
+          {parseDate(createdAt)}
         </Flex>
       </Flex>
       <Flex justify='center' borderBottom='1px solid #A0AEC0'>
@@ -174,6 +227,7 @@ export function Profile() {
       >
         {asideAndCardsUI}
       </Flex>
+      <Box ref={ref}>{fetchingNextPageUI}</Box>
     </>
   );
 }
diff --git a/src/services/api.ts b/src/services/api.ts
@@ -112,9 +112,10 @@ async function getUserAndBooks(
   username: string | undefined,
   userId: string | undefined,
   token: string | null,
+  page: number | undefined,
 ) {
   const data = await fetchData(
-    `${API_URL}/users/${username}/my-books/${userId}`,
+    `${API_URL}/users/${username}/my-books/${userId}?limit=5&page=${page}`,
     {
       method: 'GET',
       headers: {

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -19,6 +19,7 @@ const keys = {
   profile: 'Profile',
   checkUser: 'CheckUser',
   userData: 'UserData',
+  deleteAccount: 'DeleteAccount',
 };
 
 function handleImageLoad(e: React.SyntheticEvent) {
@@ -70,6 +71,9 @@ function isSpanish(language) {
 function parseDate(fechaISO: string) {
   const fecha = new Date(fechaISO);
 
+  // Verificar si la fecha es válida
+  if (isNaN(fecha.getTime())) return null;
+
   const opciones: Intl.DateTimeFormatOptions = {
     year: 'numeric',
     month: 'long',