Merge pull request #24 from DaleMcGrew/Dale_WCC_Feb8-2025

Some thoughts for our conversation this morning.
wevote · Feb 8, 2025 · 18e5e4d · 18e5e4d
2 parents 1a016cb + 6014757
commit 18e5e4d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 5 deletions.
diff --git a/src/js/components/Team/TeamMemberList.jsx b/src/js/components/Team/TeamMemberList.jsx
@@ -25,6 +25,8 @@ const TeamMemberList = ({ teamId, team }) => { // teamMemberList
     if (dataTLR !== undefined && isSuccessTLR) {
       const oneTeam = dataTLR.teamList.find((tm) => tm.teamId === parseInt(teamId));
       if (oneTeam) {  // We might have just deleted the team
+        // NOTE: we had discussed refactoring team-list-retrieve to not include person data,
+        // so that team.teamMemberList would only include the personIds of team members
         setTeamMemberListReactQuery(oneTeam.teamMemberList);
       }
     }
@@ -38,23 +40,31 @@ const TeamMemberList = ({ teamId, team }) => { // teamMemberList
   }, [allPeopleCache, allTeamsCache, teamId]);
 
   // const oneTeam = teamList.find((tm) => tm.teamId === parseInt(teamId));
-  console.log('Cached by ReactQuery teamMemberList: ', teamMemberListReactQuery);
-  console.log('Cached by apiDataCache teamMemberList: ', teamMemberListApiDataCache);
 
   // DO NOT REMOVE: diffs the ReactQuery cache results with the ApiDataCache
-  if (teamMemberListReactQuery && teamMemberListApiDataCache) {
+  let isPerfectMatch = true;
+  if (teamMemberListReactQuery && teamMemberListApiDataCache && teamMemberListReactQuery.length > 0 && teamMemberListApiDataCache.length > 0) {
     for (let i = 0; i < teamMemberListReactQuery.length; i++) {
       Object.keys(teamMemberListReactQuery[i]).forEach((key) => {
         if (key !== 'id' && !key.startsWith('date')) {
           const valReactQueryCache = teamMemberListReactQuery && teamMemberListReactQuery[i] && teamMemberListReactQuery[i][key];
           const valApiCacheQuery = teamMemberListApiDataCache && teamMemberListApiDataCache[i] && teamMemberListApiDataCache[i][key];
           if (valApiCacheQuery !== valReactQueryCache) {
             console.log(`ERROR: teamMemberList authoritative ReactQuery cache for key: ${key} value: '${valReactQueryCache}' does not match processed cache value: '${valApiCacheQuery}'`);
+            isPerfectMatch = false;
           }
         }
       });
     }
+    if (isPerfectMatch) {
+      console.log('=== PERFECT MATCH');
+    }
+  } else {
+    console.log(`=== CANNOT COMPARE: teamMemberListReactQuery.length: ${teamMemberListReactQuery.length}, teamMemberListApiDataCache.length: ${teamMemberListApiDataCache.length}`);
   }
+  console.log('====== Cached by ReactQuery teamMemberList: ', teamMemberListReactQuery);
+  console.log('====== Cached by apiDataCache teamMemberList: ', teamMemberListApiDataCache);
+
 
   return (
     <TeamMembersWrapper>

diff --git a/src/js/pages/Teams.jsx b/src/js/pages/Teams.jsx
@@ -20,14 +20,23 @@ import { METHOD, useFetchData } from '../react-query/WeConnectQuery';
 const Teams = ({ classes, match }) => {
   renderLog('Teams');
   const { apiDataCache } = useConnectAppContext();
+  const { allPeopleCache, allTeamsCache } = apiDataCache;
   const dispatch = useConnectDispatch();
 
   const { setAppContextValue, getAppContextValue } = useConnectAppContext();
 
   const [showAllTeamMembers, setShowAllTeamMembers] = useState(false);
   const [teamList, setTeamList] = useState([]);
 
-  const { data: dataTLR, isSuccess: isSuccessTLR, isFetching: isFetchingTLR } = useFetchData(['team-list-retrieve'], {}, METHOD.GET);
+  // const { data: dataTLR, isSuccess: isSuccessTLR, isFetching: isFetchingTLR } = useFetchData(['team-list-retrieve'], {}, METHOD.GET);
+  const teamListRetrieveResults = useFetchData(['team-list-retrieve'], {}, METHOD.GET);
+  const { data: dataTLR, isSuccess: isSuccessTLR, isFetching: isFetchingTLR } = teamListRetrieveResults;
+  // ///////////////////////////////////////////////////////
+  // Steve's approach to use data directly from react-query
+  // Requires using data directly from the specific API
+  // Has the problem that we had discussed refactoring team-list-retrieve to not include person data,
+  // so that team.teamMemberList would only include the personIds of team members, and not have the
+  // teamMemberList data when we render <TeamMemberList below
   useEffect(() => {
     // console.log('useFetchData team-list-retrieve in Teams useEffect:', dataTLR, isSuccessTLR, isFetchingTLR);
     // console.log('effect of useFetchData in Teams useEffect:', dataTLR, isSuccessTLR, isFetchingTLR);
@@ -45,6 +54,23 @@ const Teams = ({ classes, match }) => {
     }
   }, [dataTLR, isSuccessTLR]);
 
+  // ////////////////////////////////////////////
+  // Dale's approach to use organize incoming data and then use that data from apiDataCache
+  // Allows us to organize incoming data independent of the specific API, potentially from multiple API or sources
+  // useEffect(() => {
+  //   if (teamListRetrieveResults) {
+  //     // TODO Consider making this useTeamListRetrieveDataCapture so we don't have to pass in the apiDataCache or dispatch
+  //     TeamListRetrieveDataCapture(teamListRetrieveResults, apiDataCache, dispatch);
+  //   }
+  // }, [teamListRetrieveResults]);
+  //
+  // useEffect(() => {
+  //   if (allTeamsCache) {
+  //     const teamListSimple = Object.values(allTeamsCache);
+  //     setTeamList(teamListSimple);
+  //   }
+  // }, [allPeopleCache, allTeamsCache]);
+
   const addTeamClick = () => {
     setAppContextValue('addTeamDrawerOpen', true);
     setAppContextValue('AddTeamDrawerLabel', 'Add Team');
@@ -80,9 +106,15 @@ const Teams = ({ classes, match }) => {
             <SpanWithLinkStyle onClick={() => setShowAllTeamMembers(true)}>show people</SpanWithLinkStyle>
           )}
         </div>
+        {/* NOTE: we had discussed refactoring team-list-retrieve to not include person data, */}
+        {/* so that team.teamMemberList would only include the personIds of team members */}
         {teamList.map((team, index) => (
           <OneTeamWrapper key={`team-${team.id}`}>
-            <TeamHeader team={team} showHeaderLabels={(index === 0) && showAllTeamMembers && (team.teamMemberList && team.teamMemberList.length > 0)} showIcons />
+            <TeamHeader
+              team={team}
+              showHeaderLabels={(index === 0) && showAllTeamMembers && (team.teamMemberList && team.teamMemberList.length > 0)}
+              showIcons
+            />
             {showAllTeamMembers && (
               <>
                 {/* DO NOT REMOVE PASSED IN team */}