useUserProfile hook - ability to turn on/off cache

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();

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 (
     <>

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 (
     <>

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

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');
 

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 });

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 () => {