From eade541fbd85cc49230ef5eee4b74e8f5d5b705c Mon Sep 17 00:00:00 2001 From: UmairMukhtar Date: Sun, 19 Mar 2023 17:34:06 +0500 Subject: [PATCH 1/6] avoid refresh due to cash issue fixed --- .../components/Layout/Header/useHeader.jsx | 4 ++++ .../src/pages/Creations/Home/index.jsx | 21 ++++++++++++------- .../src/pages/Recognitions/Home/index.jsx | 12 +++++++---- 3 files changed, 26 insertions(+), 11 deletions(-) diff --git a/app/web-frontend/src/components/Layout/Header/useHeader.jsx b/app/web-frontend/src/components/Layout/Header/useHeader.jsx index cdda19bb3..a4692e7d3 100644 --- a/app/web-frontend/src/components/Layout/Header/useHeader.jsx +++ b/app/web-frontend/src/components/Layout/Header/useHeader.jsx @@ -3,10 +3,12 @@ import { useLocation } from 'react-router-dom'; import authUser from 'utils/helpers/authUser'; import '../responsive-menu-transition.css'; import './Header.css'; +import { useQueryClient } from '@tanstack/react-query'; import useAppKeys from 'hooks/useAppKeys'; const useHeader = () => { const { updateAppKey } = useAppKeys(); + const queryClient = useQueryClient(); const [showLoginForm, setShowLoginForm] = useState(false); const [loggedInUser, setLoggedInUser] = useState(null); @@ -24,6 +26,8 @@ const useHeader = () => { setLoggedInUser(null); authUser.removeJWTToken(); authUser.removeUser(); + queryClient.cancelQueries(); + queryClient.invalidateQueries(); updateAppKey(); }; diff --git a/app/web-frontend/src/pages/Creations/Home/index.jsx b/app/web-frontend/src/pages/Creations/Home/index.jsx index 799ffe59c..cfed40f70 100644 --- a/app/web-frontend/src/pages/Creations/Home/index.jsx +++ b/app/web-frontend/src/pages/Creations/Home/index.jsx @@ -4,7 +4,7 @@ import { import CreationCard from 'components/cards/CreationCard'; import Input from 'components/uicore/Input'; import Loader from 'components/uicore/Loader'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import authUser from 'utils/helpers/authUser'; import useCreationDelete from '../common/hooks/useCreationDelete'; @@ -24,7 +24,15 @@ const getSuggestions = (suggestions) => { function Creations() { const navigate = useNavigate(); const [search, setSearch] = useState(''); + const [isLoggedIn, setIsLoggedIn] = useState(false); const login = authUser.getUser() && authUser.getJWTToken(); + useEffect(() => { + if (login) { + setIsLoggedIn(true); + } else { + setIsLoggedIn(false); + } + }, []); const { userId } = useParams(); const { creations, @@ -60,7 +68,6 @@ function Creations() { const handleSearch = (event) => { setSearch(event.target.value.trim()); }; - return ( {(isDeletingCreation || isPublishingCreation) && } @@ -96,10 +103,10 @@ function Creations() { padding={{ xs: '12px', md: '0' }} > - {login ? `The original creations ${userId === login?.user_id || !creations ? 'I' : creations.results[0]?.author?.user_name} made` : 'Search Public Creations'} + {isLoggedIn ? `The original creations ${userId === login?.user_id || !creations ? 'I' : creations.results[0]?.author?.user_name} made` : 'Search Public Creations'} - {login && ( + {isLoggedIn && ( )} - {login && ( + {isLoggedIn && ( @@ -123,7 +130,7 @@ function Creations() { {isLoadingCreations ? (
- ) : (creations?.results?.length > 0 ? ( + ) : (creations?.results?.length > 0 && isLoggedIn ? ( { - !login ? ( + !isLoggedIn ? ( { fetchRecognitions(); + if (user) { + setIsLoggedIn(true); + } else { + setIsLoggedIn(false); + } }, []); if (isFetchingRecognitions) return
; @@ -66,7 +70,7 @@ function Recognition() { className="hidden-scrollbar" padding={{ xs: '12px', md: '0' }} > - {recognitions?.results?.map( + {isLoggedIn && recognitions?.results?.map( (x) => x?.material && x?.recognition_for?.user_id === user?.user_id && ( Date: Mon, 20 Mar 2023 22:31:00 +0500 Subject: [PATCH 2/6] creations loading without refresh --- .../src/components/Layout/Header/useHeader.jsx | 2 ++ .../src/pages/Creations/Home/useCreations.jsx | 10 +++++----- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/app/web-frontend/src/components/Layout/Header/useHeader.jsx b/app/web-frontend/src/components/Layout/Header/useHeader.jsx index a4692e7d3..ec186592c 100644 --- a/app/web-frontend/src/components/Layout/Header/useHeader.jsx +++ b/app/web-frontend/src/components/Layout/Header/useHeader.jsx @@ -33,6 +33,8 @@ const useHeader = () => { const handleLogin = () => { setLoggedInUser(authUser.getUser()); + queryClient.cancelQueries(); + queryClient.invalidateQueries(); updateAppKey(); }; diff --git a/app/web-frontend/src/pages/Creations/Home/useCreations.jsx b/app/web-frontend/src/pages/Creations/Home/useCreations.jsx index 6ea968272..e242a6a72 100644 --- a/app/web-frontend/src/pages/Creations/Home/useCreations.jsx +++ b/app/web-frontend/src/pages/Creations/Home/useCreations.jsx @@ -1,14 +1,13 @@ import { useQuery } from '@tanstack/react-query'; +import Cookies from 'js-cookie'; import { Creation } from 'api/requests'; import useSuggestions from 'hooks/useSuggestions'; import moment from 'moment'; import transactionPurposes from 'utils/constants/transactionPurposes'; -import authUser from 'utils/helpers/authUser'; - -// get auth user -const user = authUser.getUser(); const useCreations = (userId) => { + const cookieUser = Cookies.get('authUser'); + const user = cookieUser ? JSON.parse(cookieUser)?.user_id : userId; const { suggestions: creationSuggestions, suggestionsStatus: fetchCreationsSuggestionStatus, @@ -28,7 +27,7 @@ const useCreations = (userId) => { queryFn: async () => { const toPopulate = ['author_id', 'materials', 'materials.author_id', 'transactions']; const unsortedCreations = await Creation.getAll( - `page=${1}&limit=100&descend_fields[]=creation_date&query=${userId || user.user_id}&search_fields[]=author_id&${toPopulate.map((x) => `populate=${x}`).join('&')}`, + `page=${1}&limit=100&descend_fields[]=creation_date&query=${user}&search_fields[]=author_id&${toPopulate.map((x) => `populate=${x}`).join('&')}`, ); // sort by latest first @@ -52,6 +51,7 @@ const useCreations = (userId) => { })), }; }, + enabled: !!user, staleTime: 60_000, // cache for 60 seconds }); From 60b3e59aa45122fc02a1eedb30b733e44777877b Mon Sep 17 00:00:00 2001 From: UmairMukhtar Date: Sat, 25 Mar 2023 12:40:47 +0500 Subject: [PATCH 3/6] fixed the cacche issue for creations: --- .../src/pages/Creations/Home/useCreations.jsx | 8 ++++++-- .../src/pages/Wallet/common/components/profile.jsx | 6 ++++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/app/web-frontend/src/pages/Creations/Home/useCreations.jsx b/app/web-frontend/src/pages/Creations/Home/useCreations.jsx index e242a6a72..4eb7e27e2 100644 --- a/app/web-frontend/src/pages/Creations/Home/useCreations.jsx +++ b/app/web-frontend/src/pages/Creations/Home/useCreations.jsx @@ -7,7 +7,11 @@ import transactionPurposes from 'utils/constants/transactionPurposes'; const useCreations = (userId) => { const cookieUser = Cookies.get('authUser'); - const user = cookieUser ? JSON.parse(cookieUser)?.user_id : userId; + let user = cookieUser ? JSON.parse(cookieUser)?.user_id : null; + if (userId) { + user = userId; + } + const queryKey = `creations-${user}`; const { suggestions: creationSuggestions, suggestionsStatus: fetchCreationsSuggestionStatus, @@ -23,7 +27,7 @@ const useCreations = (userId) => { isSuccess: isFetchSuccess, isLoading: isLoadingCreations, } = useQuery({ - queryKey: ['creations'], + queryKey: [queryKey], queryFn: async () => { const toPopulate = ['author_id', 'materials', 'materials.author_id', 'transactions']; const unsortedCreations = await Creation.getAll( diff --git a/app/web-frontend/src/pages/Wallet/common/components/profile.jsx b/app/web-frontend/src/pages/Wallet/common/components/profile.jsx index f48b8c22f..af11498b4 100644 --- a/app/web-frontend/src/pages/Wallet/common/components/profile.jsx +++ b/app/web-frontend/src/pages/Wallet/common/components/profile.jsx @@ -12,6 +12,7 @@ import Loader from 'components/uicore/Loader'; import useAppKeys from 'hooks/useAppKeys'; import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; +import { useQueryClient } from '@tanstack/react-query'; import useProfile from './useProfile'; import UserAvatar from './userAvatar'; import { updateProfileValidation } from './validation'; @@ -31,11 +32,16 @@ function WalletProfile({ emailVerified = false, }) { const { updateAppKey } = useAppKeys(); + const queryClient = useQueryClient(); const navigate = useNavigate(); const [isEditMode, setEditMode] = useState(false); const [avatarImageFile, setAvatarImageFile] = useState(); const handleViewCreation = () => { if (id) { + setTimeout(() => { + queryClient.cancelQueries(); + queryClient.invalidateQueries(); + }, 800); navigate(`/creations/user/${id}`); } else { navigate('/creations'); From cff268d3d3d3567b7940d648b65eff4dc4d62cc7 Mon Sep 17 00:00:00 2001 From: UmairMukhtar Date: Sat, 25 Mar 2023 15:05:41 +0500 Subject: [PATCH 4/6] query key for enabling query , public creations for not logged in user --- app/web-frontend/src/pages/Creations/Home/index.jsx | 2 +- app/web-frontend/src/pages/Creations/Home/useCreations.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/web-frontend/src/pages/Creations/Home/index.jsx b/app/web-frontend/src/pages/Creations/Home/index.jsx index cfed40f70..c7b3674ed 100644 --- a/app/web-frontend/src/pages/Creations/Home/index.jsx +++ b/app/web-frontend/src/pages/Creations/Home/index.jsx @@ -128,7 +128,7 @@ function Creations() { - {isLoadingCreations ? ( + {isLoadingCreations && isLoggedIn ? (
) : (creations?.results?.length > 0 && isLoggedIn ? ( { })), }; }, - enabled: !!user, + enabled: !!queryKey, staleTime: 60_000, // cache for 60 seconds }); From 82096c0c290dddf398645d45e29483eabf2d8bf8 Mon Sep 17 00:00:00 2001 From: UmairMukhtar Date: Sat, 25 Mar 2023 16:34:02 +0500 Subject: [PATCH 5/6] use auth hook --- app/web-frontend/src/pages/Creations/Home/useCreations.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/web-frontend/src/pages/Creations/Home/useCreations.jsx b/app/web-frontend/src/pages/Creations/Home/useCreations.jsx index 8d99df9bd..16052d7e9 100644 --- a/app/web-frontend/src/pages/Creations/Home/useCreations.jsx +++ b/app/web-frontend/src/pages/Creations/Home/useCreations.jsx @@ -1,13 +1,13 @@ import { useQuery } from '@tanstack/react-query'; -import Cookies from 'js-cookie'; import { Creation } from 'api/requests'; import useSuggestions from 'hooks/useSuggestions'; import moment from 'moment'; import transactionPurposes from 'utils/constants/transactionPurposes'; +import authUser from 'utils/helpers/authUser'; const useCreations = (userId) => { - const cookieUser = Cookies.get('authUser'); - let user = cookieUser ? JSON.parse(cookieUser)?.user_id : null; + const auth = authUser.getUser(); + let user = auth?.user_id; if (userId) { user = userId; } From a0fdfb0bafafdc1e5366ad10306abe15fe014fe6 Mon Sep 17 00:00:00 2001 From: UmairMukhtar Date: Sat, 25 Mar 2023 16:43:19 +0500 Subject: [PATCH 6/6] removed the delay --- .../src/pages/Wallet/common/components/profile.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/app/web-frontend/src/pages/Wallet/common/components/profile.jsx b/app/web-frontend/src/pages/Wallet/common/components/profile.jsx index af11498b4..81e85115c 100644 --- a/app/web-frontend/src/pages/Wallet/common/components/profile.jsx +++ b/app/web-frontend/src/pages/Wallet/common/components/profile.jsx @@ -38,10 +38,8 @@ function WalletProfile({ const [avatarImageFile, setAvatarImageFile] = useState(); const handleViewCreation = () => { if (id) { - setTimeout(() => { - queryClient.cancelQueries(); - queryClient.invalidateQueries(); - }, 800); + queryClient.cancelQueries(); + queryClient.invalidateQueries(); navigate(`/creations/user/${id}`); } else { navigate('/creations');