Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

avoid refresh due to cash issue fixed #341

Merged
merged 6 commits into from
Mar 25, 2023
Merged

avoid refresh due to cash issue fixed #341

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eade541
avoid refresh due to cash issue fixed
UmairMukhtar Mar 19, 2023
6e74f30
creations loading without refresh
UmairMukhtar Mar 20, 2023
60b3e59
fixed the cacche issue for creations:
UmairMukhtar Mar 25, 2023
cff268d
query key for enabling query , public creations for not logged in user
UmairMukhtar Mar 25, 2023
82096c0
use auth hook
UmairMukhtar Mar 25, 2023
a0fdfb0
removed the delay
UmairMukhtar Mar 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions app/web-frontend/src/components/Layout/Header/useHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -24,11 +26,15 @@ const useHeader = () => {
setLoggedInUser(null);
authUser.removeJWTToken();
authUser.removeUser();
queryClient.cancelQueries();
queryClient.invalidateQueries();
updateAppKey();
};

const handleLogin = () => {
setLoggedInUser(authUser.getUser());
queryClient.cancelQueries();
queryClient.invalidateQueries();
updateAppKey();
};

Expand Down
21 changes: 14 additions & 7 deletions app/web-frontend/src/pages/Creations/Home/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -60,7 +68,6 @@ function Creations() {
const handleSearch = (event) => {
setSearch(event.target.value.trim());
};

return (
<Grid container spacing={2}>
{(isDeletingCreation || isPublishingCreation) && <Loader withBackdrop size="large" />}
Expand Down Expand Up @@ -96,10 +103,10 @@ function Creations() {
padding={{ xs: '12px', md: '0' }}
>
<Typography className="heading h4" variant="h4">
{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'}
</Typography>
<Grid gap={{ sm: '8px' }} display="flex" height="fit-content" flexDirection="row">
{login && (
{isLoggedIn && (
<TextField
variant="standard"
InputProps={{
Expand All @@ -113,7 +120,7 @@ function Creations() {
onChange={handleSearch}
/>
)}
{login && (
{isLoggedIn && (
<Button onClick={add} className="btn btn-primary">
+ Add New Creation
</Button>
Expand All @@ -123,7 +130,7 @@ function Creations() {

{isLoadingCreations ? (
<div style={{ margin: 'auto' }} className="loader" />
) : (creations?.results?.length > 0 ? (
) : (creations?.results?.length > 0 && isLoggedIn ? (
<Grid
xs={12}
item
Expand Down Expand Up @@ -198,7 +205,7 @@ function Creations() {
) : (
<Grid xs={12} md={9} lg={10} marginTop={{ xs: '8px' }}>
{
!login ? (
!isLoggedIn ? (
<Input
variant="dark"
placeholder="Search Creations!"
Expand Down
16 changes: 10 additions & 6 deletions app/web-frontend/src/pages/Creations/Home/useCreations.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
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');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use the 'authUser' helper here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

authHelper was not working

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think its probably because its called outside the component body. So instead of

import authUser from 'utils/helpers/authUser';

// get auth user
const user = authUser.getUser();

const useCreations = (userId) => {
// ... other code

we can do this

import authUser from 'utils/helpers/authUser';

const useCreations = (userId) => {

    // get auth user
    const user = authUser.getUser();
    // ...other code

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done thanks

let user = cookieUser ? JSON.parse(cookieUser)?.user_id : null;
if (userId) {
user = userId;
}
const queryKey = `creations-${user}`;
const {
suggestions: creationSuggestions,
suggestionsStatus: fetchCreationsSuggestionStatus,
Expand All @@ -24,11 +27,11 @@ 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(
`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
Expand All @@ -52,6 +55,7 @@ const useCreations = (userId) => {
})),
};
},
enabled: !!user,
huzaifa-99 marked this conversation as resolved.
Show resolved Hide resolved
staleTime: 60_000, // cache for 60 seconds
});

Expand Down
12 changes: 8 additions & 4 deletions app/web-frontend/src/pages/Recognitions/Home/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@ import authUser from 'utils/helpers/authUser';
import useRecognition from '../common/hooks/useRecognitions';
import './index.css';

const user = authUser.getUser();

function Recognition() {
const [activeTab, setActiveTab] = useState('co-author-recognition');

const [isLoggedIn, setIsLoggedIn] = useState(false);
const user = authUser.getUser();
const {
isFetchingRecognitions,
fetchRecognitions,
Expand All @@ -18,6 +17,11 @@ function Recognition() {

useEffect(() => {
fetchRecognitions();
if (user) {
setIsLoggedIn(true);
} else {
setIsLoggedIn(false);
}
}, []);

if (isFetchingRecognitions) return <div style={{ margin: 'auto' }} className="loader" />;
Expand Down Expand Up @@ -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 && (
<RecognitionCard
id={x.recognition_id}
Expand Down
6 changes: 6 additions & 0 deletions app/web-frontend/src/pages/Wallet/common/components/profile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we adding this to refresh cache?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes , because the new queries are called instantly so i added delay in the refresh cache

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice thinking here, but maybe the delay is fine and expected since the user is visiting a creation page of another user (a different route) and we most probably wont have these types of data in cache. I think lets not use it here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

queryClient.cancelQueries();
queryClient.invalidateQueries();
}, 800);
navigate(`/creations/user/${id}`);
} else {
navigate('/creations');
Expand Down