fetching team data

components/Dashboard/Header.tsx

@@ -9,6 +9,7 @@ import {
   FaBuilding,
   FaCalendarDay,
   FaClock,
+  FaPeopleCarry,
 } from "react-icons/fa";
 import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
 import router from "next/router";
@@ -19,13 +20,39 @@ import { Dropdown, Menu } from "antd";
 import { useRouter } from "next/router";
 import { TeamMemberRole, TeamMemberStatus } from "../../models/teamMember";
 import { toast } from "react-hot-toast";
+import SubMenu from "antd/lib/menu/SubMenu";
+import { useEffect, useState } from "react";
+import TeamService from "../../services/teamService";
+import { Team } from "../../models/team";
+import Loading from "../Loading";
+
+const teamService = new TeamService();
 
 export default function Header() {
-  const { logOut } = useAuth();
+  const { currUser, logOut } = useAuth();
   const { team, user, userTeamMember } = useTeamDashboardContext();
   const router = useRouter();
   const { teamid } = router.query;
 
+  const [usersTeams, setUserTeams] = useState<Team[]>(null);
+  console.log("rendering");
+  console.log(usersTeams);
+
+  useEffect(() => {
+    (async function () {
+      try {
+        // get all the teams that this user is part of
+        const newTeams: Team[] =
+          await teamService.getActiveOrInvitedTeamsbyUser(currUser.uid);
+        console.log(newTeams);
+        setUserTeams(newTeams);
+      } catch (error) {
+        console.log("problem getting teams of this user");
+        toast.error("problem on load");
+      }
+    })();
+  }, []);
+
   async function handleSignOut() {
     console.log("clicked log out button");
 
@@ -51,10 +78,41 @@ export default function Header() {
   const UserMenu = (
     <Menu>
       <Menu.Item key={1}>
-        <button onClick={handleAdminRoute}>manage team</button>
+        <button onClick={handleAdminRoute}>admin</button>
       </Menu.Item>
 
-      <Menu.Item danger key={2}>
+      <SubMenu key={2} title="teams">
+        {/* all current teams that this person is a part of */}
+        {usersTeams &&
+          usersTeams.map((team, i) => {
+            return (
+              <Menu.Item key={i + 5}>
+                <button
+                  onClick={(e) => {
+                    e.preventDefault();
+                    console.log("going to " + team.name);
+                    router.push("/teams/" + team.id);
+                  }}
+                >
+                  {team.name}
+                </button>
+              </Menu.Item>
+            );
+          })}
+
+        <Menu.Item key={"createteam"} icon={<FaPeopleCarry />}>
+          <button
+            onClick={(e) => {
+              e.preventDefault();
+              router.push("/teams/create");
+            }}
+          >
+            create team
+          </button>
+        </Menu.Item>
+      </SubMenu>
+
+      <Menu.Item danger key={3}>
         <button onClick={handleSignOut}>sign out</button>
       </Menu.Item>
     </Menu>
@@ -87,6 +145,7 @@ export default function Header() {
   return (
     <section className="flex-1 flex flex-row items-center justify-between py-5">
       {/* welcome message */}
+      {usersTeams && usersTeams.length}
       <span className="flex flex-col items-baseline">
         <span className="font-bold text-xl text-white capitalize ">
           👋Hey {user.firstName}, {periodOfDay}!
@@ -121,7 +180,7 @@ export default function Header() {
         <FaTh className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
 
         {/* avatar */}
-        <Dropdown overlay={UserMenu}>
+        <Dropdown overlay={UserMenu} trigger={["click"]}>
           <span className="relative flex hover:cursor-pointer">
             <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
             <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>

components/Dashboard/TeamVoiceLine.tsx

@@ -80,9 +80,7 @@ export default function TeamVoiceLine() {
       try {
         // listeners for all teammates' status
         if (teamMembers) {
-          console.log(teamMembers);
           teamMembers.map((tmember) => {
-            console.log(tmember);
             if (tmember.status == TeamMemberStatus.activated) {
               const docRef = doc(db, Collections.users, tmember.userId);
 

pages/teams/[teamid].tsx

@@ -14,11 +14,43 @@ import { Team } from "../../models/team";
 import { TeamMemberStatus } from "../../models/teamMember";
 import TeamService from "../../services/teamService";
 
+// User has switched back to the tab
+const onFocus = () => {
+  console.log("Tab is in focus");
+};
+
+// User has switched away from the tab (AKA tab is hidden)
+const onBlur = () => {
+  console.log("Tab is blurred");
+};
+
+const onClose = (ev) => {
+  // change user status to offline
+
+  ev.preventDefault();
+  return (ev.returnValue = "are you sure?");
+};
+
 function TeamDashboard() {
   const { currUser } = useAuth();
   const router = useRouter();
   const teamDashboardContext = useTeamDashboardContext();
 
+  useEffect(() => {
+    window.addEventListener("focus", onFocus);
+    window.addEventListener("blur", onBlur);
+    // Calls onFocus when the window first loads
+    onFocus();
+    // Specify how to clean up after this effect:
+
+    window.addEventListener("beforeunload", onClose);
+    return () => {
+      window.removeEventListener("focus", onFocus);
+      window.removeEventListener("blur", onBlur);
+      window.removeEventListener("beforeunload", onClose);
+    };
+  }, []);
+
   console.log(teamDashboardContext);
 
   return (

pages/teams/create.tsx

@@ -112,7 +112,10 @@ export default function CreateTeam() {
 
       <span className="flex flex-row justify-end space-x-2">
         <button
-          onClick={() => router.push("/teams")}
+          onClick={(e) => {
+            e.preventDefault();
+            router.push("/teams");
+          }}
           className="bg-gray-100 py-2 px-5 rounded text-gray-400"
         >
           Cancel

services/teamService.tsx

@@ -248,4 +248,20 @@ export default class TeamService implements IService {
       { merge: true }
     );
   }
+
+  async getActiveOrInvitedTeamsbyUser(userId: string): Promise<Team[]> {
+    // get all of the teammember entries for the user
+    const userTeamMembers = await this.getTeamMembersByUserId(userId);
+
+    // traverse through and get the teams for each
+    var teams: Team[] = [];
+    userTeamMembers.map(async (tm) => {
+      if (tm.status != TeamMemberStatus.deleted) {
+        let team = await this.getTeam(tm.teamId);
+        teams.push(team);
+      }
+    });
+
+    return teams;
+  }
 }