#4087 Fixing ErrorPage when no teams found, renaming TeamTypeCardProps and destucturing teamTypes in Teams.tsx

Author: EdgarButtner

src/frontend/src/pages/GuestDivisionPage/GuestSubteamCard.tsx

@@ -3,11 +3,11 @@ import { TeamPreview } from 'shared';
 import { NERButton } from '../../components/NERButton';
 import { Link as RouterLink } from 'react-router-dom';
 
-interface TeamTypeCardProps {
+interface GuestSubteamCardProps {
   team: TeamPreview;
 }
 
-const GuestSubteamCard: React.FC<TeamTypeCardProps> = ({ team }) => {
+const GuestSubteamCard: React.FC<GuestSubteamCardProps> = ({ team }) => {
   const theme = useTheme();
 
   return (

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

@@ -4,6 +4,8 @@ import { Box, useMediaQuery } from '@mui/system';
 import PageLayout from '../../components/PageLayout';
 import GuestSubteamCard from './GuestSubteamCard';
 import { useAllTeams } from '../../hooks/teams.hooks';
+import { useAllTeamTypes } from '../../hooks/team-types.hooks';
+import { Typography } from '@mui/material';
 
 interface GuestTeamPageProps {
   teamTypeId: string;
@@ -12,15 +14,39 @@ interface GuestTeamPageProps {
 const GuestTeamPage: React.FC<GuestTeamPageProps> = ({ teamTypeId }) => {
   const isMobilePortrait = useMediaQuery('(max-width:480px)');
   const { isLoading: teamsIsLoading, isError: teamsIsError, data: allTeams, error: teamsError } = useAllTeams();
-  const teams = allTeams?.filter((team) => team.teamType?.teamTypeId === teamTypeId);
+  const {
+    isLoading: teamTypesIsLoading,
+    isError: teamTypesIsError,
+    data: allTeamTypes,
+    error: teamTypesError
+  } = useAllTeamTypes();
 
-  if (teamsIsLoading || !teams) return <LoadingIndicator />;
+  if (teamsIsLoading || !allTeams || teamTypesIsLoading || !allTeamTypes) return <LoadingIndicator />;
   if (teamsIsError) return <ErrorPage message={teamsError.message} />;
+  if (teamTypesIsError) return <ErrorPage message={teamTypesError.message} />;
 
-  if (teams.length === 0) return <ErrorPage message="No teams found for this division" />;
+  const teams = allTeams.filter((team) => team.teamType?.teamTypeId === teamTypeId);
+  const teamTypeName = allTeamTypes.find((tt) => tt.teamTypeId === teamTypeId)?.name ?? '';
+
+  if (teams.length === 0) {
+    return (
+      <PageLayout title={teamTypeName}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '70vh'
+          }}
+        >
+          <Typography>No Teams found for this Division</Typography>
+        </Box>
+      </PageLayout>
+    );
+  }
 
   return (
-    <PageLayout title={teams[0].teamType!.name}>
+    <PageLayout title={teamTypeName}>
       <Box
         sx={{
           display: 'grid',

src/frontend/src/pages/TeamsPage/Teams.tsx

@@ -12,11 +12,16 @@ import { useCurrentUser } from '../../hooks/users.hooks';
 import { isGuest } from 'shared';
 import { useAllTeamTypes } from '../../hooks/team-types.hooks';
 import GuestTeamPage from '../GuestDivisionPage/GuestTeamPage';
+import LoadingIndicator from '../../components/LoadingIndicator';
+import ErrorPage from '../ErrorPage';
 
 const TeamOrDivisionPage: React.FC = () => {
   const { teamId } = useParams<{ teamId: string }>();
   const user = useCurrentUser();
-  const { data: teamTypes } = useAllTeamTypes();
+  const { isLoading: teamsLoading, isError: isTeamsError, data: teamTypes, error: teamsError } = useAllTeamTypes();
+
+  if (teamsLoading || !teamTypes) return <LoadingIndicator />;
+  if (isTeamsError) return <ErrorPage message={teamsError.message} />;
 
   if (isGuest(user.role) && teamTypes?.some((t) => t.teamTypeId === teamId)) {
     return <GuestTeamPage teamTypeId={teamId} />;