fix: problem with the token and other enhancements

src/components/Categories.tsx

@@ -18,7 +18,12 @@ export default function Categories() {
   const isActive = isCategoryActive(location as any);
 
   function handleCategoryClick(category: string) {
-    const disabledRoutes = ['/explore', '/most-viewed'];
+    const disabledRoutes = [
+      '/explore',
+      '/most-viewed',
+      '/books/filter/year/',
+      '/books/filter/language/',
+    ];
     const isDisabled = disabledRoutes.some((route) =>
       location.pathname.startsWith(route),
     );

src/components/nav/DesktopNav.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { NavLink } from 'react-router-dom';
 import { BsSun } from 'react-icons/bs';
 import { RiMoonLine } from 'react-icons/ri';
@@ -19,17 +19,23 @@ import { MenuProfile } from '@components/nav/menu/MenuProfile';
 import { InputSearch } from '@components/forms/filters/InputSearch';
 import { ModalFilter } from '@components/modals/ModalFilter';
 import { useAuth } from '@contexts/AuthContext';
-import { useUserData } from '@hooks/queries';
+import { useCheckUser } from '@hooks/queries';
 
 export function DesktopNav() {
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
-  const { data } = useUserData(uid);
+  const { data, refetch } = useCheckUser(uid);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { colorMode, toggleColorMode } = useColorMode();
   const bgNavColor = useColorModeValue('#ffffff8b', '#12121244');
   let profileMenu;
 
+  useEffect(() => {
+    if (uid) {
+      refetch();
+    }
+  }, [uid, refetch]);
+
   if (data) {
     profileMenu = (
       <MenuProfile

src/components/nav/MobileNav.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { NavLink } from 'react-router-dom';
 import { FiMenu, FiSearch } from 'react-icons/fi';
 import { IoClose } from 'react-icons/io5';
@@ -29,12 +29,12 @@ import { InputSearch } from '@components/forms/filters/InputSearch';
 import { ModalFilter } from '@components/modals/ModalFilter';
 import { MenuProfile } from '@components/nav/menu/MenuProfile';
 import { useAuth } from '@contexts/AuthContext';
-import { useUserData } from '@hooks/queries';
+import { useCheckUser } from '@hooks/queries';
 
 export function MobileNav() {
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
-  const { data } = useUserData(uid);
+  const { data, refetch } = useCheckUser(uid);
   const containerRef = useRef<HTMLDivElement>(null);
   const { colorMode, toggleColorMode } = useColorMode();
   const {
@@ -58,6 +58,12 @@ export function MobileNav() {
   let profileMenu;
   let linkRegister;
 
+  useEffect(() => {
+    if (uid) {
+      refetch();
+    }
+  }, [uid, refetch]);
+
   useOutsideClick({
     ref: containerRef,
     handler: () => {

src/hooks/queries.ts

@@ -219,9 +219,9 @@ function useUserData(id: string | undefined) {
   return useQuery({
     queryKey: [keys.userData, id],
     queryFn: () => getCheckUser(id),
-    gcTime: 24 * 3600 * 1000,
-    staleTime: 24 * 3600 * 1000,
-    retry: 2,
+    gcTime: 0,
+    staleTime: 0,
+    retry: false,
   });
 }
 
@@ -231,14 +231,18 @@ function useProfile(
   token: string | null,
 ) {
   return useInfiniteQuery({
-    queryKey: [keys.profile, username, userId],
+    queryKey: [keys.profile, username, userId, token],
     queryFn: ({ pageParam }) => getUserAndBooks(username, userId, token, pageParam),
     initialPageParam: 0,
     getNextPageParam: (lastPage) => {
       if (lastPage.info.nextPage === null) return;
 
       return lastPage.info.nextPage;
     },
+    enabled: !!token,
+    gcTime: 0,
+    staleTime: 0,
+    retry: false,
   });
 }
 

src/pages/profile/Profile.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { NavLink, useParams } from 'react-router-dom';
 import {
   Alert,
@@ -14,13 +14,12 @@ import {
 } from '@chakra-ui/react';
 import { AiOutlineCloudUpload } from 'react-icons/ai';
 import { useInView } from 'react-intersection-observer';
-// import Cookies from 'js-cookie';
 
 import { MySimpleGrid } from '@components/ui/MySimpleGrid';
 import { Card } from '@components/cards/Card';
 import { Aside } from '@components/aside/Aside';
 import { MainHead } from '@components/layout/Head';
-import { useProfile } from '@hooks/queries';
+import { useProfile, useCheckUser } from '@hooks/queries';
 import { parseDate } from '@utils/utils';
 import { CardType } from '@components/types';
 import { ResultLength } from '@components/aside/ResultLength';
@@ -30,39 +29,34 @@ import { SkeletonAllBooks } from '@components/skeletons/SkeletonABooks';
 // import { logOut } from '../../services/firebase/auth';
 
 export function Profile() {
-  // const [getToken, setGetToken] = useState<string | null>('');
   const bgCover = useColorModeValue('gray.100', 'gray.700');
   const { ref, inView } = useInView();
-  // const getToken = Cookies.get('app_tk');
   const getToken = window.localStorage.getItem('app_tk');
   const { currentUser } = useAuth();
   const uid = currentUser?.uid;
   const { username } = useParams();
-  const { data, isPending, error, fetchNextPage, isFetchingNextPage } = useProfile(
-    username,
-    uid,
-    getToken,
-  );
-  const createdAt = data?.pages[0].user.createdAt;
+  const {
+    data: profileData,
+    isPending,
+    error,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = useProfile(username, uid, getToken);
+  const { data: userData, refetch } = useCheckUser(uid);
+  const createdAt = userData?.createdAt;
   let asideAndCardsUI;
   let fetchingNextPageUI;
 
-  // console.log(getToken);
-
-  // useEffect(() => {
-  //   const getToken = window.localStorage.getItem('app_tk');
-
-  //   if (getToken) {
-  //     setGetToken(getToken);
-  //   }
-  // }, []);
+  useEffect(() => {
+    refetch();
+  }, []);
 
   useEffect(() => {
     if (inView) fetchNextPage();
   }, [inView]);
 
   if (isPending) {
-    return <SkeletonAllBooks showTags={false} />;
+    return <SkeletonAllBooks showTags={true} />;
   }
 
   if (error) {
@@ -84,16 +78,16 @@ export function Profile() {
     );
   }
 
-  if (data?.pages[0].info.totalBooks > 0) {
+  if (profileData?.pages[0].info.totalBooks > 0) {
     asideAndCardsUI = (
       <>
         <Aside>
-          <ResultLength data={data?.pages[0].info.totalBooks} />
+          <ResultLength data={profileData?.pages[0].info.totalBooks} />
           {/* {aboutCategoriesUI}
           {asideFilter}  */}
         </Aside>
         <MySimpleGrid>
-          {data?.pages.map((page, index) => (
+          {profileData?.pages.map((page, index) => (
             <React.Fragment key={index}>
               {page.results.map(
                 ({
@@ -185,8 +179,8 @@ export function Profile() {
   return (
     <>
       <MainHead
-        title={`${data?.pages[0].user.name} | XBuniverse`}
-        urlImage={data?.pages[0].user.picture}
+        title={`${userData?.name} | XBuniverse`}
+        urlImage={userData?.picture}
       />
       <Flex
         as='section'
@@ -197,13 +191,13 @@ export function Profile() {
         bg={bgCover}
       >
         <Image
-          src={data?.pages[0].user.picture}
-          alt={`Imagen de perfil de ${data?.pages[0].user.name}`}
+          src={userData?.picture}
+          alt={`Imagen de perfil de ${userData?.name}`}
           referrerPolicy='no-referrer'
           borderRadius='full'
         />
         <Box as='h1' fontSize={{ base: 'xl', md: '3xl' }} mt='3' textAlign='center'>
-          {data?.pages[0].user.name}
+          {userData?.name}
         </Box>
         <Flex
           direction='column'

src/store/useCategoryStore.ts

@@ -7,7 +7,12 @@ interface CategoryType {
   isCategoryActive: (location: Location) => boolean;
 }
 
-const disabledRoutes = ['/explore', '/most-viewed'];
+const disabledRoutes = [
+  '/explore',
+  '/most-viewed',
+  '/books/filter/year/',
+  '/books/filter/language/',
+];
 
 export const useCategoryStore = create(
   persist<CategoryType>(