organizing with a nice context provider and now have access to the data clean

components/Loading/index.tsx

@@ -0,0 +1,21 @@
+import { Divider } from "antd";
+
+export default function Loading() {
+  return (
+    <div 
+      className="container mx-auto flex flex-col max-w-md m-10 bg-white p-10 rounded-lg shadow-md space-y-5 items-center animate-pulse"
+    >
+      {/* header */}
+      <div className="flex flex-row space-x-2">
+
+        <div className="animate-pulse w-8 h-8 border-4 rounded-full border-teal-300" role="status">
+        </div>
+        
+        <div className="text-lg text-center">Loading</div>
+
+        
+      </div>
+      
+    </div>
+  )
+}

contexts/teamDashboardContext.tsx

@@ -0,0 +1,148 @@
+import { useRouter } from "next/router";
+import React, { useContext, useEffect, useState } from "react";
+import Loading from "../components/Loading";
+import { Team } from "../models/team";
+import { TeamMember, TeamMemberStatus } from "../models/teamMember";
+import { User } from "../models/user";
+import TeamService from "../services/teamService";
+import UserService from "../services/userService";
+import { useAuth } from "./authContext";
+
+interface TeamDashboardContextInterface {
+  team: Team;
+  teamMembers: TeamMember[];
+  userTeamMember: TeamMember;
+  user: User;
+}
+
+const TeamDashboardContext =
+  React.createContext<TeamDashboardContextInterface | null>(null);
+
+const teamService = new TeamService();
+const userService = new UserService();
+
+export function TeamDashboardContextProvider({ children }) {
+  const { currUser } = useAuth();
+  const [loading, setLoading] = useState<Boolean>(true);
+  const router = useRouter();
+  const { teamid } = router.query;
+
+  // this context can only be used if it's a specific route: '/teams'
+  if (!teamid) {
+    router.push("/teams");
+  }
+
+  // update this "global" object to send to children
+  const [value, setValue] = useState<TeamDashboardContextInterface>(
+    {} as TeamDashboardContextInterface
+  );
+
+  useEffect(() => {
+    (async function () {
+      try {
+        // SECTION: authentication
+        if (!currUser) {
+          console.log(
+            "not authenticated...routing from dashboard to teams home"
+          );
+          router.push("/teams/login");
+          return;
+        }
+
+        // SECTION: get user details
+        const returnedUser = await userService.getUser(currUser.uid);
+        setValue((prevValue) => ({ ...prevValue, user: returnedUser }));
+
+        // SECTION: getting team data and team member information
+        if (typeof teamid !== "string") {
+          console.log("not a proper query with teamid");
+          router.push("/teams");
+          return;
+        }
+
+        // check if the team is a valid team and that user is in it
+        const returnedTeam = await teamService.getTeam(teamid);
+        if (!returnedTeam) {
+          console.log("team doesnt exist");
+          router.push("/teams");
+          return;
+        }
+        setValue((prevValue) => ({ ...prevValue, team: returnedTeam }));
+
+        const returnedTeamMember = await teamService.getTeamMemberByUserId(
+          teamid,
+          currUser.uid
+        );
+
+        //  if you are not a member of this team, then get out of here
+        //   but have to check through email invite and userid
+        if (
+          returnedTeamMember &&
+          returnedTeamMember.status == TeamMemberStatus.deleted
+        ) {
+          console.log("user was deleted from team");
+          router.push("/teams");
+          return;
+        }
+
+        // if there is no team member through user id,
+        // give him last chance and see if he was invited
+        if (!returnedTeamMember) {
+          const invitedTeamMember =
+            await teamService.getTeamMemberByEmailInvite(
+              teamid,
+              currUser.email
+            );
+
+          if (!invitedTeamMember) {
+            console.log("not invited to team either");
+            router.push("/teams");
+            return;
+          }
+
+          // if I am new to the team but I was invited, and this is my first time, then activate me into the team
+          // and proceed with showing the dashboard stuff
+
+          invitedTeamMember.status = TeamMemberStatus.activated;
+          invitedTeamMember.userId = currUser.uid;
+          await teamService.updateTeamMember(invitedTeamMember);
+
+          setValue((prevValue) => ({
+            ...prevValue,
+            userTeamMember: invitedTeamMember,
+          }));
+        } else {
+          setValue((prevValue) => ({
+            ...prevValue,
+            userTeamMember: returnedTeamMember,
+          }));
+        }
+
+        // SECTION: get all teammembers for team, will have listeners in other subcomponents
+        const teamMembers = await teamService.getTeamMembersByTeamId(
+          returnedTeam.id
+        );
+        setValue((prevValue) => ({ ...prevValue, teamMembers: teamMembers }));
+      } catch (error) {
+        console.log(error);
+        router.push("/teams/login");
+      }
+
+      setLoading(false);
+    })();
+  }, []);
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <TeamDashboardContext.Provider value={value}>
+      {children}
+    </TeamDashboardContext.Provider>
+  );
+}
+
+export function useTeamDashboardContext() {
+  return useContext(TeamDashboardContext);
+}

pages/teams/[teamid].tsx

@@ -1,99 +1,35 @@
-import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next'
+import { GetServerSidePropsContext, GetServerSidePropsResult } from "next";
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router";
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from "react";
-import BackgroundLayout from '../../components/Layouts/BackgroundLayout'
+import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
-import { useAuth } from '../../contexts/authContext'
+import Loading from "../../components/Loading";
-import { Team } from '../../models/team'
+import { useAuth } from "../../contexts/authContext";
-import { TeamMemberStatus } from '../../models/teamMember'
+import {
-import TeamService from '../../services/teamService'
+  TeamDashboardContextProvider,
+  useTeamDashboardContext,
+} from "../../contexts/teamDashboardContext";
+import { Team } from "../../models/team";
+import { TeamMemberStatus } from "../../models/teamMember";
+import TeamService from "../../services/teamService";
 
-const teamService = new TeamService()
+function TeamDashboard() {
+  const { currUser } = useAuth();
+  const router = useRouter();
+  const teamDashboardContext = useTeamDashboardContext();
 
-export default function TeamDashboard() {
+  console.log(teamDashboardContext);
-  const { currUser } = useAuth()
-  const router = useRouter()
-  const { teamid } = router.query
 
-  const [loading, setLoading] = useState<Boolean>(true)
+  return <div>{JSON.stringify(teamDashboardContext)}</div>;
-  const [team, setTeam] = useState<Team>(null)
+}
-
-  useEffect(() => {
-    (async function() {
-      try {
-        // if not authenticated, take user to the login
-        if (!currUser) {
-          console.log('not authenticated...routing from dashboard to teams home')
-          router.push('/teams/login')
-          return
-        }
-
-        if (typeof teamid !== "string") {
-          console.log('not a proper query with teamid')
-          router.push('/teams')
-          return
-        }
-
-        // check if the team is a valid team and that user is in it
-        const returnedTeam = await teamService.getTeam(teamid)
-        if (!returnedTeam) {
-          console.log('team doesnt exist')
-          router.push('/teams')
-          return
-        }
-
-        const returnedTeamMember = await teamService.getTeamMemberByUserId(teamid, currUser.uid)          
-
-        console.log(returnedTeam)
-        console.log(returnedTeamMember)
-
-        //  if you are not a member of this team, then get out of here
-        //   but have to check through email invite and userid
-        if (returnedTeamMember && returnedTeamMember.status == TeamMemberStatus.deleted) {
-          console.log('user was deleted from team')
-          router.push('/teams')
-          return
-        }
-
-        // if there is no team member through user id,
-        // give him last chance and see if he was invited
-        if (!returnedTeamMember) {
-          const invitedTeamMember = await teamService.getTeamMemberByEmailInvite(teamid, currUser.email)
-
-          if (!invitedTeamMember) {
-            console.log('not invited to team either')
-            router.push('/teams')
-            return 
-          }
-
-          // if I am new to the team but I was invited, and this is my first time, then activate me into the team
-          // and proceed with showing the dashboard stuff
-
-          invitedTeamMember.status = TeamMemberStatus.activated
-          invitedTeamMember.userId = currUser.uid
-          await teamService.updateTeamMember(invitedTeamMember)
-        }
-      } catch(error) {
-        console.log(error)
-        router.push('/teams/login')
-      }
-
-      setLoading(false)
-    })();
-  }, [])
-
-  if (loading) {
-    return (
-      <div>loading</div> 
-    )
-  }
 
+export default function TeamDashboardWrapper() {
   return (
-    <BackgroundLayout>
+    <TeamDashboardContextProvider>
-      the team is {teamid}
+      <BackgroundLayout>
-      
+        <TeamDashboard />
-    
+      </BackgroundLayout>
-    </BackgroundLayout>
+    </TeamDashboardContextProvider>
-  )
+  );
 }
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
@@ -105,5 +41,5 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   return {
     props: {},
-  }
+  };
 }

pages/teams/index.tsx

@@ -1,72 +1,80 @@
-import { useAuth } from "../../contexts/authContext"
+import { useAuth } from "../../contexts/authContext";
-import { useRouter } from "next/router"
+import { useRouter } from "next/router";
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
-import UserService from '../../services/userService'
+import UserService from "../../services/userService";
-import { User } from "../../models/user"
+import { User } from "../../models/user";
-import { GetServerSidePropsContext } from "next"
+import { GetServerSidePropsContext } from "next";
-import nookies from 'nookies'
+import nookies from "nookies";
-import firebaseAdmin from 'firebase-admin'
+import firebaseAdmin from "firebase-admin";
-import unfetch from 'isomorphic-unfetch'
+import unfetch from "isomorphic-unfetch";
-import {
+import { FaPeopleCarry, FaArrowRight, FaBullhorn } from "react-icons/fa";
-  FaPeopleCarry,
+import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
-  FaArrowRight,
+import TeamService from "../../services/teamService";
-  FaBullhorn
-} from "react-icons/fa";
-import BackgroundLayout from "../../components/Layouts/BackgroundLayout"
-import TeamService from "../../services/teamService"
 
 /**
  * figure out where to take the user based on everything
  */
 
-const userService: UserService = new UserService()
+const userService: UserService = new UserService();
-const teamService: TeamService = new TeamService()
+const teamService: TeamService = new TeamService();
 
 function RouteHandler() {
-  const { currUser } = useAuth()
+  const { currUser } = useAuth();
-  const router = useRouter()
+  const router = useRouter();
 
-  const [loading, setLoading] = useState<Boolean>(true)
+  const [loading, setLoading] = useState<Boolean>(true);
-  const [user, setUser] = useState<User | null>(null)
+  const [user, setUser] = useState<User | null>(null);
 
   useEffect(() => {
-    (async function() {
+    (async function () {
       try {
         // if not authenticated, take user to the login
         if (!currUser) {
-          console.log('not authenticated...routing from dashboard to teams home')
+          console.log(
-          router.push('/teams/login')
+            "not authenticated...routing from dashboard to teams home"
+          );
+          router.push("/teams/login");
         }
 
         // get user
-        const returnedUser: User | null = await userService.getUser(currUser.uid)
+        const returnedUser: User | null = await userService.getUser(
-        console.log(returnedUser)
+          currUser.uid
+        );
+        console.log(returnedUser);
         // if user has no profile, then go to create profile
-        if (!returnedUser || !returnedUser.firstName || !returnedUser.lastName || !returnedUser.nickName) {
+        if (
-          console.log('no profile for the user, routing him/her there')
+          !returnedUser ||
-          router.push('/teams/profile')
+          !returnedUser.firstName ||
+          !returnedUser.lastName ||
+          !returnedUser.nickName
+        ) {
+          console.log("no profile for the user, routing him/her there");
+          router.push("/teams/profile");
         }
-        setUser(returnedUser)
+        setUser(returnedUser);
 
         // check if user is in a team go to the team dashboard
-        const returnedTeamMembers = await teamService.getTeamMembersByUserId(currUser.uid)
+        const returnedTeamMembers = await teamService.getTeamMembersByUserId(
+          currUser.uid
+        );
         if (returnedTeamMembers.length > 0) {
-          console.log('in a team! going to the team dashboard of the first one!')
+          console.log(
-          router.push('/teams/' + returnedTeamMembers[0].teamId)
+            "in a team! going to the team dashboard of the first one!"
-          return
+          );
+          router.push("/teams/" + returnedTeamMembers[0].teamId);
+          return;
         }
-
+      } catch (error) {
-      } catch(error) {
+        console.log(error);
-        console.log(error)
+        router.push("/teams/login");
-        router.push('/teams/login')
       }
     })();
 
-    setLoading(false)
+    setLoading(false);
-  }, [currUser])
+  }, [currUser]);
 
   if (loading || !user) {
-    return <div></div>
+    return <div></div>;
   }
 
   // not in a team yet, and have not created a team yet
@@ -76,25 +84,36 @@ function RouteHandler() {
       <div className="flex flex-row items-center justify-between">
         <span className="flex flex-col justify-start">
           <div className="text-lg">👋Hey, {user.firstName}</div>
-          <span className="text-gray-300 text-md">Let&apos;s get you started.</span>
+          <span className="text-gray-300 text-md">
+            Let&apos;s get you started.
+          </span>
         </span>
 
-        <button onClick={() => router.push('/teams/profile')}>
+        <button onClick={() => router.push("/teams/profile")}>
-          <img src={user ? user.avatarUrl : currUser.photoURL} alt="asdf" className="rounded-full w-12" />
+          <img
+            src={user ? user.avatarUrl : currUser.photoURL}
+            alt="asdf"
+            className="rounded-full w-12"
+          />
         </button>
       </div>
 
       {/* create team hover thing */}
-      <button onClick={() => router.push('/teams/create')} className="group flex flex-row py-5 px-3 items-center border border-dashed rounded hover:shadow-lg transition duration-400">
+      <button
+        onClick={() => router.push("/teams/create")}
+        className="group flex flex-row py-5 px-3 items-center border border-dashed rounded hover:shadow-lg transition duration-400"
+      >
         <FaPeopleCarry className="text-5xl text-teal-500" />
 
         <span className="flex flex-col items-start ml-2 mr-10">
           <span className="text-gray-500">Create a Team</span>
-          <span className="text-gray-300 text-sm text-left">Add members, and get started immediately.</span>
+          <span className="text-gray-300 text-sm text-left">
+            Add members, and get started immediately.
+          </span>
         </span>
 
-        <span className='ml-auto bg-gray-500 bg-opacity-25 p-2 rounded group-hover:bg-opacity-40 group-hover:bg-teal-500'>
+        <span className="ml-auto bg-gray-500 bg-opacity-25 p-2 rounded group-hover:bg-opacity-40 group-hover:bg-teal-500">
-            <FaArrowRight className='text-sm text-white' />
+          <FaArrowRight className="text-sm text-white" />
         </span>
       </button>
 
@@ -104,14 +123,23 @@ function RouteHandler() {
 
         <span className="flex flex-col items-start ml-2 mr-10">
           <span className="text-gray-500">Remind Your Manager</span>
-          <span className="text-gray-300 text-sm text-left">Your account email is {user.emailAddress}</span>
+          <span className="text-gray-300 text-sm text-left">
+            Your account email is {user.emailAddress}
+          </span>
         </span>
-
       </button>
 
-      <span className="text-gray-300 ml-auto text-md mt-10">or learn more about <button onClick={() => router.push('/teams/landing')} className="underline font-satisfy text-xl text-teal-500 decoration-teal-500">nirvana</button></span>
+      <span className="text-gray-300 ml-auto text-md mt-10">
+        or learn more about{" "}
+        <button
+          onClick={() => router.push("/teams/landing")}
+          className="underline font-satisfy text-xl text-teal-500 decoration-teal-500"
+        >
+          nirvana
+        </button>
+      </span>
     </div>
-  )
+  );
 }
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
@@ -150,7 +178,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   //  }
   // }
 
-  return { props: { }}
+  return { props: {} };
 }
 
-export default RouteHandler
+export default RouteHandler;

services/teamService.tsx

@@ -1,34 +1,55 @@
-import { addDoc, collection, doc, DocumentReference, Firestore, getDoc, getDocs, getFirestore, orderBy, query, serverTimestamp, setDoc, where } from 'firebase/firestore'
+import {
-import { Team } from '../models/team'
+  addDoc,
-import { TeamMember, TeamMemberRole, TeamMemberStatus } from '../models/teamMember'
+  collection,
-import { Collections } from './collections'
+  doc,
-import IService from './IService'
+  DocumentReference,
+  Firestore,
+  getDoc,
+  getDocs,
+  getFirestore,
+  orderBy,
+  query,
+  serverTimestamp,
+  setDoc,
+  where,
+} from "firebase/firestore";
+import { Team } from "../models/team";
+import {
+  TeamMember,
+  TeamMemberRole,
+  TeamMemberStatus,
+} from "../models/teamMember";
+import { Collections } from "./collections";
+import IService from "./IService";
 
 export default class TeamService implements IService {
-  db : Firestore = getFirestore()
+  db: Firestore = getFirestore();
 
   async createTeam(team: Team): Promise<string> {
     // create team
     const teamDocRef = await addDoc(collection(this.db, Collections.teams), {
       ...team,
-      createdDate: serverTimestamp()
+      createdDate: serverTimestamp(),
-    })
+    });
 
-    const teamMember = new TeamMember()
+    const teamMember = new TeamMember();
-    teamMember.role = TeamMemberRole.admin
+    teamMember.role = TeamMemberRole.admin;
-    teamMember.teamId = teamDocRef.id
+    teamMember.teamId = teamDocRef.id;
-    teamMember.userId = team.createdByUserId
+    teamMember.userId = team.createdByUserId;
-    teamMember.status = TeamMemberStatus.activated
+    teamMember.status = TeamMemberStatus.activated;
 
     // create team member as admin who created the team
-    const teamMemberRef = await addDoc(collection(this.db, Collections.teamMembers), {
+    const teamMemberRef = await addDoc(
-      ...teamMember,
+      collection(this.db, Collections.teamMembers),
-      createdDate: serverTimestamp()
+      {
-    })
+        ...teamMember,
+        createdDate: serverTimestamp(),
+      }
+    );
 
-    console.log('created team')
+    console.log("created team");
 
-    return teamDocRef.id
+    return teamDocRef.id;
   }
 
   async getTeam(teamId: string): Promise<Team | null> {
@@ -36,105 +57,135 @@ export default class TeamService implements IService {
     const docSnap = await getDoc(docRef);
 
     if (docSnap.exists()) {
-      console.log('got team data')
+      console.log("got team data");
-      let team: Team = docSnap.data() as Team
+      let team: Team = docSnap.data() as Team;
-      team.id = docSnap.id
+      team.id = docSnap.id;
-      return team
+      return team;
     } else {
       // doc.data() will be undefined in this case
       console.log("team not found!");
 
-      return null
+      return null;
     }
   }
 
-  async getTeamMemberByUserId(teamId: string, userId: string): Promise<TeamMember | null> {
+  async getTeamMemberByUserId(
+    teamId: string,
+    userId: string
+  ): Promise<TeamMember | null> {
     const q = query(
       collection(this.db, Collections.teamMembers),
       where("teamId", "==", teamId),
       where("userId", "==", userId)
-    )
+    );
 
     const querySnapshot = await getDocs(q);
 
     if (querySnapshot.size > 1) {
-      console.log('there are multiple teammembers for this user...error in teamservice')
+      console.log(
+        "there are multiple teammembers for this user...error in teamservice"
+      );
     }
 
-    console.log(querySnapshot)
+    var teamMember: TeamMember | null = null;
-
-    var teamMember: TeamMember | null = null
     querySnapshot.forEach((doc) => {
       // doc.data() is never undefined for query doc snapshots
       // get the first one and just return...shouldn't be more
-      console.log('got teammember data')
+      console.log("got teammember data");
-      teamMember = doc.data() as TeamMember
+      teamMember = doc.data() as TeamMember;
 
-      teamMember.id = doc.id
+      teamMember.id = doc.id;
     });
 
-    return teamMember
+    return teamMember;
   }
 
-  async getTeamMemberByEmailInvite(teamId: string, emailAddress: string): Promise<TeamMember | null> {
+  async getTeamMemberByEmailInvite(
+    teamId: string,
+    emailAddress: string
+  ): Promise<TeamMember | null> {
     const q = query(
       collection(this.db, Collections.teamMembers),
       where("teamId", "==", teamId),
       where("inviteEmailAddress", "==", emailAddress)
-    )
+    );
 
     const querySnapshot = await getDocs(q);
 
     if (querySnapshot.size > 1) {
-      console.log('there are multiple teammembers for this user...error in teamservice')
+      console.log(
+        "there are multiple teammembers for this user...error in teamservice"
+      );
     }
 
-    console.log(querySnapshot)
+    var teamMember: TeamMember | null = null;
-
-    var teamMember: TeamMember | null = null
     querySnapshot.forEach((doc) => {
       // doc.data() is never undefined for query doc snapshots
       // get the first one and just return...shouldn't be more
-      console.log('got teammember data')
+      console.log("got teammember data");
-      teamMember = doc.data() as TeamMember
+      teamMember = doc.data() as TeamMember;
 
-      teamMember.id = doc.id
+      teamMember.id = doc.id;
     });
 
-    return teamMember
+    return teamMember;
   }
 
   async getTeamMembersByUserId(userId: string): Promise<TeamMember[]> {
     const q = query(
       collection(this.db, Collections.teamMembers),
-      where("userId", "==", userId),
+      where("userId", "==", userId)
-    )
+    );
 
     const querySnapshot = await getDocs(q);
 
     if (querySnapshot.size > 1) {
-      console.log('this user is part of multiple teams')
+      console.log("this user is part of multiple teams");
     }
 
-    console.log(querySnapshot)
+    var teamMembers: TeamMember[] = [];
-
-    var teamMembers: TeamMember[] = []
 
     querySnapshot.forEach((doc) => {
       // doc.data() is never undefined for query doc snapshots
       // get the first one and just return...shouldn't be more
-      console.log('got teammember data')
+      console.log("got teammember data");
-      let teamMember:TeamMember = doc.data() as TeamMember
+      let teamMember: TeamMember = doc.data() as TeamMember;
-      teamMember.id = doc.id
+      teamMember.id = doc.id;
 
-      teamMembers.push(teamMember)
+      teamMembers.push(teamMember);
     });
 
-    return teamMembers
+    return teamMembers;
+  }
+
+  async getTeamMembersByTeamId(teamId: string): Promise<TeamMember[]> {
+    const q = query(
+      collection(this.db, Collections.teamMembers),
+      where("teamId", "==", teamId)
+    );
+
+    const querySnapshot = await getDocs(q);
+
+    var teamMembers: TeamMember[] = [];
+
+    querySnapshot.forEach((doc) => {
+      // doc.data() is never undefined for query doc snapshots
+      // get the first one and just return...shouldn't be more
+      let teamMember: TeamMember = doc.data() as TeamMember;
+      teamMember.id = doc.id;
+
+      teamMembers.push(teamMember);
+    });
+
+    return teamMembers;
   }
 
   async updateTeamMember(teamMember: TeamMember) {
     const docRef = doc(this.db, Collections.teamMembers, teamMember.id);
-    await setDoc(docRef, { ...teamMember, lastUpdatedDate: serverTimestamp() }, { merge: true })
+    await setDoc(
+      docRef,
+      { ...teamMember, lastUpdatedDate: serverTimestamp() },
+      { merge: true }
+    );
   }
 }