Merge pull request #4179 from Northeastern-Electric-Racing/#4100-sponsors-page

#4100 sponsors page

Author: wavehassman

src/frontend/src/app/AppAuthenticated.tsx

@@ -30,6 +30,7 @@ import RetrospectiveGanttChartPage from '../pages/RetrospectivePage/Retrospectiv
 import Calendar from '../pages/CalendarPage/Calendar';
 import GuestEventPage from '../pages/GuestEventPage/GuestEventPage';
 import GuestInfoPage from '../pages/GuestInfoPage/GuestInfoPage';
+import GuestSponsorsPage from '../pages/GuestSponsorsPage/GuestSponsorsPage';
 import ProjectManagementPage from '../pages/ProjectManagementPage/ProjectManagementPage';
 import SidebarLayout from '../layouts/SidebarLayout';
 
@@ -83,6 +84,7 @@ const AppAuthenticated: React.FC<AppAuthenticatedProps> = ({ userId, userRole })
               <Route path={routes.RETROSPECTIVE} component={RetrospectiveGanttChartPage} />
               <Route path={routes.PROJECT_MANAGEMENT} component={ProjectManagementPage} />
               <Route path={routes.EVENTS} component={GuestEventPage} />
+              <Route path={routes.SPONSORS} component={GuestSponsorsPage} />
               <Route path={routes.GUEST_INFO} component={GuestInfoPage} />
               <Redirect from={routes.BASE} to={routes.HOME} />
               <Route path="*" component={PageNotFound} />

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

@@ -10,8 +10,7 @@ import { Typography, Box, IconButton, Divider } from '@mui/material';
 import HomeIcon from '@mui/icons-material/Home';
 import AlignHorizontalLeftIcon from '@mui/icons-material/AlignHorizontalLeft';
 import DashboardIcon from '@mui/icons-material/Dashboard';
-// To be uncommented after guest sponsors page is developed
-// import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism';
+import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism';
 import FolderIcon from '@mui/icons-material/Folder';
 import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import GroupIcon from '@mui/icons-material/Group';
@@ -24,12 +23,9 @@ import NavUserMenu from '../PageTitle/NavUserMenu';
 import DrawerHeader from '../../components/DrawerHeader';
 import { Cached, ChevronLeft, ChevronRight } from '@mui/icons-material';
 import { useHomePageContext } from '../../app/HomePageContext';
-// once divisions developed, import TeamType from shared
-import { isGuest } from 'shared';
-// To be uncommented after divisions page is developed
+import { isGuest, TeamType } from 'shared';
 import * as MuiIcons from '@mui/icons-material';
 import { useAllTeamTypes } from '../../hooks/team-types.hooks';
-import { TeamType } from 'shared';
 import ErrorPage from '../../pages/ErrorPage';
 import BarChartIcon from '@mui/icons-material/BarChart';
 import { useCurrentUser } from '../../hooks/users.hooks';
@@ -137,7 +133,6 @@ const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: Sid
       ]
     },
 
-    // Teams tab here to be replaced with below code once guest divisions is developed
     !onGuestHomePage
       ? {
           name: 'Teams',
@@ -161,12 +156,11 @@ const Sidebar = ({ drawerOpen, setDrawerOpen, moveContent, setMoveContent }: Sid
       icon: <Cached />,
       route: routes.RETROSPECTIVE
     },
-    // To be uncommented once guest mode sponsors page is developed
-    // onGuestHomePage && {
-    //   name: 'Sponsors',
-    //   icon: <VolunteerActivismIcon />,
-    //   route: routes.RETROSPECTIVE
-    // },
+    onGuestHomePage && {
+      name: 'Sponsors',
+      icon: <VolunteerActivismIcon />,
+      route: routes.SPONSORS
+    },
     {
       name: 'Info',
       icon: <QuestionMarkIcon />,

src/frontend/src/pages/GuestSponsorsPage/GuestSponsorsPage.tsx

@@ -0,0 +1,75 @@
+import { Typography, useTheme } from '@mui/material';
+import LoadingIndicator from '../../components/LoadingIndicator';
+import { useGetAllSponsors } from '../../hooks/finance.hooks';
+import ErrorPage from '../ErrorPage';
+import { Box } from '@mui/system';
+import PageLayout from '../../components/PageLayout';
+import { useGetImageUrl } from '../../hooks/onboarding.hook';
+
+const SponsorImage: React.FC<{ logoImageId: string; name: string }> = ({ logoImageId, name }) => {
+  const { data: imageUrl, isLoading, isError, error } = useGetImageUrl(logoImageId);
+
+  if (isError) {
+    return <ErrorPage message={error.message} />;
+  }
+
+  if (!imageUrl || isLoading) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 2,
+        p: 2,
+        width: { xs: '100%', sm: 'calc(50% - 8px)', md: 'calc(33.33% - 11px)' }
+      }}
+    >
+      <Box component="img" src={imageUrl} alt={name} sx={{ maxWidth: '100%', maxHeight: 120, objectFit: 'contain' }} />
+    </Box>
+  );
+};
+
+const GuestSponsorsPage: React.FC = () => {
+  const theme = useTheme();
+  const { data: sponsors, isLoading, isError, error } = useGetAllSponsors();
+  if (isError) {
+    return <ErrorPage message={error.message} />;
+  }
+
+  if (!sponsors || isLoading) {
+    return <LoadingIndicator />;
+  }
+
+  const sorted = [...sponsors].sort((a, b) => {
+    const aVal = a.tier?.minSupportValue ?? -Infinity;
+    const bVal = b.tier?.minSupportValue ?? -Infinity;
+    return bVal - aVal;
+  });
+
+  return (
+    <PageLayout title="Sponsors">
+      <Box>
+        <Box sx={{ bgcolor: theme.palette.background.paper, borderRadius: 2, p: 2 }}>
+          <Typography>
+            We would not be able to put a competitive car on the track each year without the help of each and every one of
+            our sponsors. Thank you for your support!
+          </Typography>
+        </Box>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2, mt: 2 }}>
+          {sorted.map(
+            (sponsor) =>
+              sponsor.logoImageId && (
+                <SponsorImage key={sponsor.sponsorId} logoImageId={sponsor.logoImageId} name={sponsor.name} />
+              )
+          )}
+        </Box>
+      </Box>
+    </PageLayout>
+  );
+};
+
+export default GuestSponsorsPage;

src/frontend/src/utils/routes.ts

@@ -28,6 +28,7 @@ const REIMBURSEMENT_REQUEST_EDIT = REIMBURSEMENT_REQUEST_BY_ID + `/edit`;
 const NEW_REIMBURSEMENT_REQUEST = REIMBURSEMENT_REQUESTS + `/my-requests/new`;
 const FINANCE_DASHBOARD = FINANCE + `/dashboard`;
 const COMPANIES = FINANCE + `/companies`;
+const SPONSORS = `/sponsors`;
 
 /**************** Projects Section ****************/
 const PROJECTS = `/projects`;
@@ -149,5 +150,7 @@ export const routes = {
   EDIT_GRAPH,
   GRAPH_COLLECTION_BY_ID,
 
+  SPONSORS,
+
   RETROSPECTIVE
 };