#1513: added team description to user settings

Author: ItsEricSun

src/frontend/src/pages/SettingsPage/Settings.tsx

@@ -15,6 +15,7 @@ import PageLayout from '../../components/PageLayout';
 import { useCurrentUser, useCurrentUserSecureSettings, useSingleUserSettings } from '../../hooks/users.hooks';
 import ErrorPage from '../ErrorPage';
 import UserSecureSettings from './UserSecureSettings/UserSecureSettings';
+import { useAllTeams } from '../../hooks/teams.hooks';
 
 const NERSwitch = styled((props: SwitchProps) => (
   <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
@@ -80,16 +81,20 @@ const Settings: React.FC = () => {
     error: secureSettingsError,
     data: userSecureSettings
   } = useCurrentUserSecureSettings();
+  const { isLoading: allTeamsIsLoading, isError: allTeamsIsError, data: teams, error: allTeamsError } = useAllTeams();
 
   if (secureSettingsIsError) return <ErrorPage error={secureSettingsError} message={secureSettingsError.message} />;
   if (settingsIsError) return <ErrorPage error={settingsError} message={settingsError.message} />;
+  if (allTeamsIsError) return <ErrorPage error={allTeamsError} message={allTeamsError.message} />;
   if (
     auth.isLoading ||
     !auth.user ||
     settingsIsLoading ||
     !userSettingsData ||
     secureSettingsIsLoading ||
-    !userSecureSettings
+    !userSecureSettings ||
+    allTeamsIsLoading ||
+    !teams
   )
     return <LoadingIndicator />;
 
@@ -100,6 +105,10 @@ const Settings: React.FC = () => {
     }, 2000);
   };
 
+  const userTeams = teams.filter((team) =>
+    team.members.some((member) => member.userId === user.userId || team.head.userId === user.userId)
+  );
+
   return (
     <PageLayout title="Settings">
       {showAlert && <Alert severity="info">Haha {auth.user?.firstName} bye bye!</Alert>}
@@ -145,6 +154,12 @@ const Settings: React.FC = () => {
           <Grid item md={4} lg={2}>
             <DetailDisplay label="Role" content={user.role} />
           </Grid>
+          <Grid item md={4} lg={3}>
+            <DetailDisplay
+              label="Teams"
+              content={userTeams.length === 0 ? 'None' : userTeams.map((team) => team.teamName).join(', ')}
+            />
+          </Grid>
         </Grid>
       </PageBlock>
       <UserSettings currentSettings={userSettingsData} />