moved data up tree, but need to check for data leak in future

components/Dashboard/TeamVoiceLine.tsx

@@ -43,62 +43,20 @@ export default function TeamVoiceLine() {
   } = useKeyboardContext();
   const router = useRouter();
   const { teamid } = router.query;
-  const { team, user, userTeamMember, teamMembers } = useTeamDashboardContext();
-  const [loading, setLoading] = useState<Boolean>(true);
+  const { team, user, userTeamMember, teamMembers, teamUsers } =
+    useTeamDashboardContext();
 
-  const [teamUsers, setTeamUsers] = useState<User[]>([]);
-
-  // setup listeners for each teammate or their status changes
-  useEffect(() => {
-    const unsubs: Unsubscribe[] = [];
-
-    (async function () {
-      try {
-        // listeners for all teammates' status
-        if (teamMembers) {
-          teamMembers.map((tmember) => {
-            if (tmember.status == TeamMemberStatus.activated) {
-              const docRef = doc(db, Collections.users, tmember.userId);
-
-              const unsub = onSnapshot(docRef, (doc) => {
-                const updatedteamMateUser = doc.data() as User;
-
-                setTeamUsers((prevTeamUsers) => {
-                  const newTeamUsers = prevTeamUsers.filter(
-                    (tm) => tm.id != updatedteamMateUser.id
-                  );
-                  newTeamUsers.push(updatedteamMateUser);
-
-                  // order users by status
-                  setTeamUsers(newTeamUsers.sort(compareStatus));
-
-                  return newTeamUsers;
-                });
-              });
-
-              unsubs.push(unsub);
-            }
-
-            return;
-          });
-        }
-      } catch (error) {
-        console.log(error);
-        toast.error("Something went wrong");
-        router.push("/teams/landing");
-      }
-
-      setLoading(false);
-    })();
-
-    return () => {
-      unsubs.map((listener) => listener());
-    };
-  }, []);
+  // todo use a global is loading
+  const [loading, setLoading] = useState<Boolean>(false);
 
   // set up shortcuts for each teammate
   useEffect(() => {
     // create shortcuts
+    if (!teamUsers) {
+      console.log("no team members to map to shortcuts");
+      return;
+    }
+
     teamUsers.forEach((tmUser, i) => {
       // make sure we don't map a user if they are past the max allowed
       if (i < maxNumberOfKeyboardMappings) {
@@ -136,7 +94,7 @@ export default function TeamVoiceLine() {
     }
 
     // if not teammates, stale state message to tell admin to add people
-    if (!teamUsers.length) {
+    if (!teamUsers) {
       return <span className="text-gray-300">Please add team members.</span>;
     }
 

contexts/teamDashboardContext.tsx

@@ -10,7 +10,9 @@ import {
 } from "firebase/firestore";
 import { useRouter } from "next/router";
 import React, { useContext, useEffect, useState } from "react";
+import toast from "react-hot-toast";
 import Loading from "../components/Loading";
+import { compareStatus } from "../helpers/userHelper";
 import { Message } from "../models/message";
 import { Team } from "../models/team";
 import { TeamMember, TeamMemberStatus } from "../models/teamMember";
@@ -24,9 +26,14 @@ interface TeamDashboardContextInterface {
   team: Team;
   teamMembers: TeamMember[];
   userTeamMember: TeamMember;
-  user: User;
-  messagesByTeamMate: {}; // string of teammate userid and array of messages
-  allMessages: Message[];
+
+  user: User; // REALTIME - 1
+
+  messagesByTeamMate: {}; // REALTIME: string of teammate userid and array of messages - 1
+  allMessages: Message[]; // REALTIME: 1
+
+  teamUsers: User[]; // REALTIME teammates - n team members => n listeners
+  teamUsersMap: {}; // map for easier getting teammate data
 }
 
 const TeamDashboardContext =
@@ -56,9 +63,10 @@ export function TeamDashboardContextProvider({ children }) {
     {} as TeamDashboardContextInterface
   );
 
-  // all data
+  // all main data
   useEffect(() => {
     var userListener: Unsubscribe;
+    var unsubs: Unsubscribe[] = [] as Unsubscribe[];
 
     (async function () {
       try {
@@ -157,6 +165,42 @@ export function TeamDashboardContextProvider({ children }) {
           (element) => element.userId != currUser.uid
         );
 
+        // listeners for all teammates' status
+        if (teamMembers) {
+          teamMembers.map((tmember) => {
+            if (tmember.status == TeamMemberStatus.activated) {
+              const docRef = doc(db, Collections.users, tmember.userId);
+
+              const unsub = onSnapshot(docRef, (doc) => {
+                const updatedteamMateUser = doc.data() as User;
+
+                // update map of team member users
+                setTeamUsersMap((prevMap) => ({
+                  ...prevMap,
+                  [updatedteamMateUser.id]: updatedteamMateUser,
+                }));
+
+                // update array of team member users
+                setTeamUsers((prevTeamUsers) => {
+                  const newTeamUsers = prevTeamUsers.filter(
+                    (tm) => tm.id != updatedteamMateUser.id
+                  );
+                  newTeamUsers.push(updatedteamMateUser);
+
+                  // order users by status
+                  setTeamUsers(newTeamUsers.sort(compareStatus));
+
+                  return newTeamUsers;
+                });
+              });
+
+              unsubs.push(unsub);
+            }
+
+            return;
+          });
+        }
+
         setValue((prevValue) => ({ ...prevValue, teamMembers }));
       } catch (error) {
         console.log(error);
@@ -168,9 +212,16 @@ export function TeamDashboardContextProvider({ children }) {
 
     return () => {
       userListener();
+
+      unsubs.forEach((unsub) => {
+        unsub();
+      });
     };
   }, []);
 
+  const [teamUsers, setTeamUsers] = useState<User[]>([]);
+  const [teamUsersMap, setTeamUsersMap] = useState<{}>({});
+
   const [allMessages, setAllMessages] = useState<Message[]>([]);
   const [messagesByTeamMate, setMessagesByTeamMate] = useState<{}>({});
 
@@ -252,6 +303,8 @@ export function TeamDashboardContextProvider({ children }) {
     ...value,
     allMessages,
     messagesByTeamMate,
+    ...teamUsers,
+    ...teamUsersMap,
   };
 
   return (