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

pages/teams/[teamid].tsx

@@ -1,99 +1,35 @@
-import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import BackgroundLayout from '../../components/Layouts/BackgroundLayout'
-import { useAuth } from '../../contexts/authContext'
-import { Team } from '../../models/team'
-import { TeamMemberStatus } from '../../models/teamMember'
-import TeamService from '../../services/teamService'
+import { GetServerSidePropsContext, GetServerSidePropsResult } from "next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
+import Loading from "../../components/Loading";
+import { useAuth } from "../../contexts/authContext";
+import {
+  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() {
-  const { currUser } = useAuth()
-  const router = useRouter()
-  const { teamid } = router.query
+  console.log(teamDashboardContext);
 
-  const [loading, setLoading] = useState<Boolean>(true)
-  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> 
-    )
-  }
+  return <div>{JSON.stringify(teamDashboardContext)}</div>;
+}
 
+export default function TeamDashboardWrapper() {
   return (
-    <BackgroundLayout>
-      the team is {teamid}
-      
-    
-    </BackgroundLayout>
-  )
+    <TeamDashboardContextProvider>
+      <BackgroundLayout>
+        <TeamDashboard />
+      </BackgroundLayout>
+    </TeamDashboardContextProvider>
+  );
 }
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
@@ -105,5 +41,5 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   return {
     props: {},
-  }
-}
+  };
+}