From ad3c756de82a77b456ca8a9098e44bce5cb23627 Mon Sep 17 00:00:00 2001 From: franco sanchez Date: Fri, 23 Aug 2024 10:28:48 -0300 Subject: [PATCH] fix: problem with the token and other enhancements --- src/components/Categories.tsx | 7 ++++- src/components/nav/DesktopNav.tsx | 12 +++++-- src/components/nav/MobileNav.tsx | 12 +++++-- src/hooks/queries.ts | 12 ++++--- src/pages/profile/Profile.tsx | 52 ++++++++++++++----------------- src/store/useCategoryStore.ts | 7 ++++- 6 files changed, 61 insertions(+), 41 deletions(-) diff --git a/src/components/Categories.tsx b/src/components/Categories.tsx index f1bc830..e3e7bbd 100644 --- a/src/components/Categories.tsx +++ b/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), ); diff --git a/src/components/nav/DesktopNav.tsx b/src/components/nav/DesktopNav.tsx index 3db1806..4765c7b 100644 --- a/src/components/nav/DesktopNav.tsx +++ b/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 = ( (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: () => { diff --git a/src/hooks/queries.ts b/src/hooks/queries.ts index 3a0fc41..a6a1fa2 100644 --- a/src/hooks/queries.ts +++ b/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,7 +231,7 @@ 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) => { @@ -239,6 +239,10 @@ function useProfile( return lastPage.info.nextPage; }, + enabled: !!token, + gcTime: 0, + staleTime: 0, + retry: false, }); } diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx index 59f5154..1fb6129 100644 --- a/src/pages/profile/Profile.tsx +++ b/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(''); 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 ; + return ; } if (error) { @@ -84,16 +78,16 @@ export function Profile() { ); } - if (data?.pages[0].info.totalBooks > 0) { + if (profileData?.pages[0].info.totalBooks > 0) { asideAndCardsUI = ( <> - {data?.pages.map((page, index) => ( + {profileData?.pages.map((page, index) => ( {page.results.map( ({ @@ -185,8 +179,8 @@ export function Profile() { return ( <> {`Imagen - {data?.pages[0].user.name} + {userData?.name} boolean; } -const disabledRoutes = ['/explore', '/most-viewed']; +const disabledRoutes = [ + '/explore', + '/most-viewed', + '/books/filter/year/', + '/books/filter/language/', +]; export const useCategoryStore = create( persist(