Adding route and hook for page

Author: EdgarButtner

src/frontend/src/app/AppAuthenticated.tsx

@@ -13,6 +13,7 @@ import Settings from '../pages/SettingsPage/SettingsPage';
 import InfoPage from '../pages/InfoPage';
 import GanttChartPage from '../pages/GanttPage/ProjectGanttChart/ProjectGanttChartPage';
 import Teams from '../pages/TeamsPage/Teams';
+import GuestTeamPage from '../pages/GuestDivisionPage/GuestTeamPage';
 import AdminTools from '../pages/AdminToolsPage/AdminTools';
 import Credits from '../pages/CreditsPage/Credits';
 import AppContextUser from './AppContextUser';
@@ -121,6 +122,7 @@ const AppAuthenticated: React.FC<AppAuthenticatedProps> = ({ userId, userRole })
             <Route path={routes.CHANGE_REQUESTS} component={ChangeRequests} />
             <Route path={routes.GANTT} component={GanttChartPage} />
             <Route path={routes.TEAMS} component={Teams} />
+            <Route path={routes.DIVISIONS_BY_ID} component={GuestTeamPage} />
             <Route path={routes.SETTINGS} component={Settings} />
             <Route path={routes.ADMIN_TOOLS} component={AdminTools} />
             <Route path={routes.INFO} component={InfoPage} />

src/frontend/src/hooks/teams.hooks.ts

@@ -199,3 +199,10 @@ export const useMyTeamAsHead = () => {
     return data;
   });
 };
+
+export const useTeamsByTypeId = (teamTypeId: string) => {
+  return useQuery<TeamPreview[], Error>(['teams', 'type', teamTypeId], async () => {
+    const { data } = await getAllTeams();
+    return data.filter((team) => team.teamType?.teamTypeId === teamTypeId);
+  });
+};

src/frontend/src/layouts/Sidebar/Sidebar.tsx

@@ -38,6 +38,7 @@ import QueryStatsIcon from '@mui/icons-material/QueryStats';
 import CurrencyExchangeIcon from '@mui/icons-material/CurrencyExchange';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import { useState } from 'react';
+import { sub } from 'date-fns';
 
 interface SidebarProps {
   drawerOpen: boolean;
@@ -59,7 +60,7 @@ const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: Sid
     return {
       name: team.name,
       icon: <IconComponent />,
-      route: routes.TEAMS + '/' + team.teamTypeId
+      route: routes.DIVISIONS + '/' + team.teamTypeId
     };
   });
 

src/frontend/src/pages/GuestDivisionPage/GuestTeamPage.tsx

@@ -3,27 +3,25 @@ import ErrorPage from '../ErrorPage';
 import { Box, useMediaQuery } from '@mui/system';
 import PageLayout from '../../components/PageLayout';
 import GuestSubteamCard from './GuestSubteamCard';
-import { useAllTeams } from '../../hooks/teams.hooks';
+import { useTeamsByTypeId } from '../../hooks/teams.hooks';
 import { useParams } from 'react-router-dom';
 
 interface ParamTypes {
-  teamId: string;
+  teamTypeId: string;
 }
 
 const GuestTeamPage: React.FC = () => {
   const isMobilePortrait = useMediaQuery('(max-width:480px)');
-  const { teamId } = useParams<ParamTypes>();
-  const { isLoading: teamsIsLoading, isError: teamsIsError, data: allTeams, error: teamsError } = useAllTeams();
+  const { teamTypeId } = useParams<ParamTypes>();
+  const { isLoading: teamsIsLoading, isError: teamsIsError, data: teams, error: teamsError } = useTeamsByTypeId(teamTypeId);
 
-  if (teamsIsLoading || !allTeams) return <LoadingIndicator />;
+  if (teamsIsLoading || !teams) return <LoadingIndicator />;
   if (teamsIsError) return <ErrorPage message={teamsError.message} />;
 
-  const filteredTeams = allTeams.filter((team) => team.teamType?.teamTypeId === teamId);
-
-  if (filteredTeams.length === 0) return <ErrorPage message="No teams found for this division" />;
+  if (teams.length === 0) return <ErrorPage message="No teams found for this division" />;
 
   return (
-    <PageLayout title={filteredTeams[0].teamType!.name}>
+    <PageLayout title={teams[0].teamType!.name}>
       <Box
         sx={{
           display: 'grid',
@@ -33,7 +31,7 @@ const GuestTeamPage: React.FC = () => {
           px: isMobilePortrait ? 1 : 0
         }}
       >
-        {filteredTeams.map((team) => (
+        {teams.map((team) => (
           <GuestSubteamCard key={team.teamId} team={team} />
         ))}
       </Box>

src/frontend/src/pages/TeamsPage/TeamSpecificPage.tsx

@@ -194,7 +194,11 @@ const TeamSpecificPage: React.FC = () => {
           </Box>
         ) : null
       }
-      previousPages={[{ name: 'Teams', route: routes.TEAMS }]}
+      previousPages={
+        isGuest(user.role) && data.teamType
+          ? [{ name: data.teamType.name, route: `${routes.DIVISIONS}/${data.teamType.teamTypeId}` }]
+          : [{ name: 'Teams', route: routes.TEAMS }]
+      }
     >
       <Grid container spacing={2}>
         <Grid item xs={12}>

src/frontend/src/utils/routes.ts

@@ -41,6 +41,10 @@ const PROJECT_PART = PROJECTS_BY_WBS + '/part/:indexNum';
 const TEAMS = `/teams`;
 const TEAMS_BY_ID = TEAMS + `/:teamId`;
 
+/**************** Divisions Section ***************/
+const DIVISIONS = `/divisions`;
+const DIVISIONS_BY_ID = DIVISIONS + `/:teamTypeId`;
+
 /**************** Change Requests Section ****************/
 const CHANGE_REQUESTS = `/change-requests`;
 const ALL_CHANGE_REQUESTS = CHANGE_REQUESTS + `/all`;
@@ -96,6 +100,9 @@ export const routes = {
   TEAMS,
   TEAMS_BY_ID,
 
+  DIVISIONS,
+  DIVISIONS_BY_ID,
+
   GANTT,
 
   PROJECTS,