From 7ed94b5dc0ec60bb5ea083ff819698da190073c8 Mon Sep 17 00:00:00 2001 From: Nuwan Date: Tue, 8 Oct 2024 01:01:46 +0530 Subject: [PATCH] useUserProfile hook - ability to turn on/off cache --- .../JKFriendRequestNotification.js | 2 +- .../notification/JKGenericNotification.js | 2 +- .../notification/JKTextMessageNotification.js | 2 +- .../src/components/profile/JKMessageModal.js | 4 +-- jam-ui/src/components/sessions/JKLobbyChat.js | 2 +- jam-ui/src/context/AppDataContext.js | 2 +- jam-ui/src/hooks/useUserProfile.js | 32 +++++++++++++------ 7 files changed, 30 insertions(+), 16 deletions(-) diff --git a/jam-ui/src/components/notification/JKFriendRequestNotification.js b/jam-ui/src/components/notification/JKFriendRequestNotification.js index 85949b567..02c11be39 100644 --- a/jam-ui/src/components/notification/JKFriendRequestNotification.js +++ b/jam-ui/src/components/notification/JKFriendRequestNotification.js @@ -13,7 +13,7 @@ function JKFriendRequestNotification(props) { const { currentUser } = useAuth(); const dispatch = useDispatch(); const user = useSelector(state => state.people.people.find(person => person.id === source_user_id)); - const { photoUrl } = useUserProfile(user); // user is the person who sent the message + const { photoUrl } = useUserProfile({ user: user }); // user is the person who sent the message const handleClick = async event => { event.stopPropagation(); diff --git a/jam-ui/src/components/notification/JKGenericNotification.js b/jam-ui/src/components/notification/JKGenericNotification.js index 91fbc9a93..44e67a368 100644 --- a/jam-ui/src/components/notification/JKGenericNotification.js +++ b/jam-ui/src/components/notification/JKGenericNotification.js @@ -9,7 +9,7 @@ const JKGenericNotification = (notification) => { const {formatted_msg, created_at, source_user_id} = notification; const user = useSelector(state => state.people.people.find(person => person.id === source_user_id)); - const { photoUrl } = useUserProfile(user); // user is the person who sent the message + const { photoUrl } = useUserProfile({ user }); // user is the person who sent the message return ( <> diff --git a/jam-ui/src/components/notification/JKTextMessageNotification.js b/jam-ui/src/components/notification/JKTextMessageNotification.js index 1ffb384f0..fd4eb3736 100644 --- a/jam-ui/src/components/notification/JKTextMessageNotification.js +++ b/jam-ui/src/components/notification/JKTextMessageNotification.js @@ -11,7 +11,7 @@ function JKTextMessageNotification(props) { const { source_user, source_user_id, message, created_at } = props.notification; const { currentUser } = useAuth(); const user = useSelector(state => state.people.people.find(person => person.id === source_user_id)); - const { photoUrl } = useUserProfile(user); // user is the person who sent the message + const { photoUrl } = useUserProfile({ user }); // user is the person who sent the message return ( <> diff --git a/jam-ui/src/components/profile/JKMessageModal.js b/jam-ui/src/components/profile/JKMessageModal.js index 15c73ddc6..e304257b5 100644 --- a/jam-ui/src/components/profile/JKMessageModal.js +++ b/jam-ui/src/components/profile/JKMessageModal.js @@ -27,8 +27,8 @@ const JKMessageModal = props => { const messageTextBox = useRef(); const scrolledToBottom = useRef(false); - const { photoUrl: userPhotoUrl } = useUserProfile(user); - const { photoUrl: currentUserPhotoUrl } = useUserProfile(currentUser); + const { photoUrl: userPhotoUrl } = useUserProfile({ user: user}); + const { photoUrl: currentUserPhotoUrl } = useUserProfile({ user: currentUser }); const messages = useSelector(state => state.textMessage.messages diff --git a/jam-ui/src/components/sessions/JKLobbyChat.js b/jam-ui/src/components/sessions/JKLobbyChat.js index a97002948..568ad7ba0 100644 --- a/jam-ui/src/components/sessions/JKLobbyChat.js +++ b/jam-ui/src/components/sessions/JKLobbyChat.js @@ -29,7 +29,7 @@ function JKLobbyChat() { const [messagesArrived, setMessagesArrived] = useState(false); //const [offset, setOffset] = useState(0); - const userProfile = useUserProfile(currentUser); + const userProfile = useUserProfile({ user: currentUser }); const { t } = useTranslation('sessions'); diff --git a/jam-ui/src/context/AppDataContext.js b/jam-ui/src/context/AppDataContext.js index 9053ee156..b2983a52e 100644 --- a/jam-ui/src/context/AppDataContext.js +++ b/jam-ui/src/context/AppDataContext.js @@ -9,7 +9,7 @@ const AppDataContext = React.createContext(null); export const AppDataProvider = ({ children }) => { const [appData, setAppData] = React.useState({}); const { currentUser } = useAuth(); - const { userProfile, photoUrl } = useUserProfile(currentUser); + const { userProfile, photoUrl } = useUserProfile({ user: currentUser, useCache: false }); React.useEffect(() => { setAppData({ userProfile, currentUserPhotoUrl: photoUrl }); diff --git a/jam-ui/src/hooks/useUserProfile.js b/jam-ui/src/hooks/useUserProfile.js index 71bfc4e04..111964c5c 100644 --- a/jam-ui/src/hooks/useUserProfile.js +++ b/jam-ui/src/hooks/useUserProfile.js @@ -2,25 +2,39 @@ import { useEffect, useState, useMemo } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { fetchPerson } from '../store/features/peopleSlice'; -const useUserProfile = user => { +const useUserProfile = ({ user, useCache = true }) => { const [userProfile, setUserProfile] = useState(null); const people = useSelector(state => state.people.people); const dispatch = useDispatch(); + const dispatchFetchPerson = userId => { + dispatch(fetchPerson({ userId })) + .unwrap() + .then(resp => { + setUserProfile(resp); + }); + }; + useEffect(() => { if (!user) { setUserProfile(null); return; } - const person = people.find(person => person.id === user.id); - if (person) { - setUserProfile(person); + + if (useCache) { + const person = people.find(person => person.id === user.id); + if (person) { + setUserProfile(person); + } else { + // dispatch(fetchPerson({ userId: user.id })) + // .unwrap() + // .then(resp => { + // setUserProfile(resp); + // }); + dispatchFetchPerson(user.id); + } } else { - dispatch(fetchPerson({ userId: user.id })) - .unwrap() - .then(resp => { - setUserProfile(resp); - }); + dispatchFetchPerson(user.id); } return () => {