Merge pull request #3093 from Northeastern-Electric-Racing/#2795-Caio…

…-OrgLogo

#2795-Display Organization Logo

src/backend/src/controllers/organizations.controllers.ts

@@ -89,7 +89,9 @@ export default class OrganizationsController {
 
   static async getOrganizationLogoImage(req: Request, res: Response, next: NextFunction) {
     try {
-      const logoImageId = await OrganizationsService.getLogoImage(req.organization.organizationId);
+      const { organization } = req;
+
+      const logoImageId = await OrganizationsService.getLogoImage(organization.organizationId);
       res.status(200).json(logoImageId);
     } catch (error: unknown) {
       next(error);

src/backend/src/services/onboarding.services.ts

@@ -4,7 +4,6 @@ import { downloadImageFile } from '../utils/google-integration.utils';
 export default class OnboardingServices {
   static async downloadImage(fileId: string) {
     const fileData = await downloadImageFile(fileId);
-    console.log('FILE DATA RECEIVED');
 
     if (!fileData) throw new NotFoundException('Image File', fileId);
     return fileData;

src/frontend/src/pages/HomePage/GuestHomePage.tsx

@@ -3,7 +3,7 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import { Box, Typography } from '@mui/material';
+import { Box, Grid, Stack, Typography } from '@mui/material';
 import { useSingleUserSettings } from '../../hooks/users.hooks';
 import LoadingIndicator from '../../components/LoadingIndicator';
 import ErrorPage from '../ErrorPage';
@@ -12,6 +12,7 @@ import { AuthenticatedUser } from 'shared';
 import MemberEncouragement from './components/MemberEncouragement';
 import GuestOrganizationInfo from './components/GuestOrganizationInfo';
 import FeaturedProjects from './components/FeaturedProjects';
+import OrganizationLogo from './components/OrganizationLogo';
 
 interface GuestHomePageProps {
   user: AuthenticatedUser;
@@ -32,18 +33,27 @@ const GuestHomePage = ({ user }: GuestHomePageProps) => {
         sx={{
           display: 'flex',
           flexDirection: 'column',
-          gap: 2,
+          gap: 1.5,
           height: `${PAGE_GRID_HEIGHT}vh`,
           mt: 2
         }}
       >
-        <Box height={'45%'}>
-          <GuestOrganizationInfo />
-        </Box>
-        <Box height={'15%'}>
-          <MemberEncouragement />
-        </Box>
-        <Box height={'45%'}>
+        <Grid container height={'60%'} spacing={2}>
+          <Grid item height={'100%'} xs={8.5}>
+            <Stack height={'100%'} spacing={1.5}>
+              <Box height={'70%'}>
+                <GuestOrganizationInfo />
+              </Box>
+              <Box height={'30%'}>
+                <MemberEncouragement />
+              </Box>
+            </Stack>
+          </Grid>
+          <Grid item height={'100%'} xs={3.5}>
+            <OrganizationLogo />
+          </Grid>
+        </Grid>
+        <Box height={'40%'}>
           <FeaturedProjects />
         </Box>
       </Box>

src/frontend/src/pages/HomePage/components/OrganizationLogo.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import LogoDisplay from './LogoDisplay';
+import { useOrganizationLogo } from '../../../hooks/organizations.hooks';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import ErrorPage from '../../ErrorPage';
+
+const OrganizationLogo = () => {
+  const { data: imageData, isLoading, isError, error } = useOrganizationLogo();
+  if (isLoading) return <LoadingIndicator />;
+  if (isError) return <ErrorPage message={error.message} />;
+
+  return <LogoDisplay imageUrl={imageData && URL.createObjectURL(imageData)} />;
+};
+
+export default OrganizationLogo;

src/frontend/src/pages/HomePage/components/TaskDetailCard.tsx

@@ -58,8 +58,8 @@ const TaskDetailCard: React.FC<TaskDetailCardProps> = ({ task, taskNumber }) =>
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
         sx={{
-          minWidth: 'fit-content',
-          minHeight: 'fit-content',
+          width: '100%',
+          height: 'fit-content',
           mr: 3,
           background: theme.palette.background.default,
           border: taskOverdue && hover ? '1px solid red' : undefined

src/frontend/src/pages/HomePage/components/WorkPackageCard.tsx

@@ -40,7 +40,7 @@ const WorkPackageCard = ({ wp }: { wp: WorkPackage }) => {
     <Card
       variant="outlined"
       sx={{
-        minHeight: 'fit-content',
+        height: 'fit-content',
         minWidth: 'fit-content',
         mr: 3,
         background: theme.palette.background.default