#3060-updated logo fom

src/backend/src/services/organizations.services.ts

@@ -201,6 +201,10 @@ export default class OrganizationsService {
 
     const logoImageData = await uploadFile(logoImage);
 
+    if (!logoImageData?.name) {
+      throw new HttpException(500, 'Image Name not found');
+    }
+
     const updatedOrg = await prisma.organization.update({
       where: { organizationId: organization.organizationId },
       data: {

src/frontend/src/pages/AdminToolsPage/AdminToolsPage.tsx

@@ -18,7 +18,6 @@ import NERTabs from '../../components/Tabs';
 import { routes } from '../../utils/routes';
 import { Box } from '@mui/system';
 import AdminToolsRecruitmentConfig from './RecruitmentConfig/AdminToolsRecruitmentConfig';
-import EditDescription from './EditGuestView/EditDescription';
 import EditLogo from './EditGuestView/EditLogo';
 
 const AdminToolsPage: React.FC = () => {

src/frontend/src/pages/AdminToolsPage/EditGuestView/EditLogo.tsx

@@ -1,21 +1,29 @@
 import React from 'react';
-import { useCurrentOrganization, useOrganizationLogo, useSetOrganizationLogo } from '../../../hooks/organizations.hooks';
+import { useCurrentOrganization, useSetOrganizationLogo } from '../../../hooks/organizations.hooks';
 import LoadingIndicator from '../../../components/LoadingIndicator';
 import EditLogoForm from './EditLogoForm';
+import { useToast } from '../../../hooks/toasts.hooks';
 
 const EditLogo = () => {
   const { data: organization, isLoading: organizationIsLoading } = useCurrentOrganization();
   const { mutateAsync } = useSetOrganizationLogo();
-  const { data: imageUrl } = useOrganizationLogo();
+  const toast = useToast();
 
   if (organizationIsLoading || !organization) return <LoadingIndicator />;
 
   const onSubmitWrapper = async (logoImage: File) => {
-    console.log('RECEIVED FILE');
+    try {
+      await mutateAsync(logoImage);
+      toast.success('Logo updated successfully!');
+    } catch (e) {
+      if (e instanceof Error) {
+        toast.error(e.message);
+      }
+    }
     await mutateAsync(logoImage);
   };
 
-  return <EditLogoForm logoImageUrl={imageUrl} onSubmit={onSubmitWrapper} />;
+  return <EditLogoForm onSubmit={onSubmitWrapper} />;
 };
 
 export default EditLogo;

src/frontend/src/pages/AdminToolsPage/EditGuestView/EditLogoForm.tsx

@@ -1,39 +1,31 @@
 import React from 'react';
 import { Box, Button, Stack, useTheme } from '@mui/material';
 import FileUploadIcon from '@mui/icons-material/FileUpload';
+import LogoDisplay from '../../HomePage/components/LogoDisplay';
 
 interface EditLogoFormProps {
-  logoImageUrl?: string;
   onSubmit: (logoImage: File) => Promise<void>;
 }
 
-const EditLogoForm: React.FC<EditLogoFormProps> = ({ logoImageUrl, onSubmit }) => {
+const EditLogoForm: React.FC<EditLogoFormProps> = ({ onSubmit }) => {
   const theme = useTheme();
   return (
     <Stack spacing={2}>
-      {!logoImageUrl ? (
-        <Box
-          sx={{
-            background: theme.palette.background.paper,
-            width: 300,
-            height: 300,
-            borderRadius: 2,
-            boxShadow: 3
-          }}
-        />
-      ) : (
-        <Box
-          component="img"
-          src={logoImageUrl}
-          alt="Logo"
-          sx={{
-            width: 300,
-            height: 300,
-            borderRadius: 2,
-            boxShadow: 3
-          }}
-        />
-      )}
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          background: theme.palette.background.paper,
+          width: 300,
+          height: 300,
+          borderRadius: 2,
+          boxShadow: 3
+        }}
+      >
+        <LogoDisplay />
+      </Box>
+
       <Button
         variant="contained"
         color="error"
@@ -42,13 +34,13 @@ const EditLogoForm: React.FC<EditLogoFormProps> = ({ logoImageUrl, onSubmit }) =
         sx={{
           width: 'fit-content',
           textTransform: 'none',
-          mt: '9.75px'
+          mt: '9.75px',
+          color: 'black'
         }}
       >
         Upload
         <input
           onChange={(e) => {
-            console.log('SUBMITTED');
             !!e.target.files && onSubmit(e.target.files[0]);
           }}
           type="file"

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

@@ -0,0 +1,24 @@
+import { Box } from '@mui/material';
+import React from 'react';
+import { useOrganizationLogo } from '../../../hooks/organizations.hooks';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+
+const LogoDisplay = () => {
+  const { data: imageUrl, isLoading } = useOrganizationLogo();
+
+  if (isLoading) return <LoadingIndicator />;
+
+  return (
+    <Box
+      component="img"
+      src={imageUrl ?? '/logo.png'}
+      sx={{
+        height: '100%',
+        width: '100%',
+        borderRadius: 2
+      }}
+    />
+  );
+};
+
+export default LogoDisplay;