#3060-created forms

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

@@ -78,6 +78,7 @@ export default class OrganizationsController {
       if (!req.file) {
         throw new HttpException(400, 'Invalid or undefined image data');
       }
+
       const updatedOrg = await OrganizationsService.setLogoImage(req.file, req.currentUser, req.organization);
 
       res.status(200).json(updatedOrg);

src/frontend/src/hooks/organizations.hooks.ts

@@ -73,8 +73,10 @@ export const useSetOrganizationDescription = () => {
 };
 
 export const useSetOrganizationLogo = () => {
+  const queryClient = useQueryClient();
   return useMutation<Organization, Error, File>(['reimbursement-requsts', 'edit'], async (file: File) => {
     const { data } = await setOrganizationLogo(file);
+    queryClient.invalidateQueries(['organizations']);
     return data;
   });
 };

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

@@ -19,6 +19,7 @@ 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 = () => {
   const currentUser = useCurrentUser();
@@ -94,9 +95,7 @@ const AdminToolsPage: React.FC = () => {
       ) : tabIndex === 3 ? (
         <AdminToolsRecruitmentConfig />
       ) : tabIndex === 4 ? (
-        <Box>
-          <EditDescription />
-        </Box>
+        <EditLogo />
       ) : (
         <Box>
           <Box pb={2}>

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useCurrentOrganization, useOrganizationLogo, useSetOrganizationLogo } from '../../../hooks/organizations.hooks';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import EditLogoForm from './EditLogoForm';
+
+const EditLogo = () => {
+  const { data: organization, isLoading: organizationIsLoading } = useCurrentOrganization();
+  const { mutateAsync } = useSetOrganizationLogo();
+  const { data: imageUrl } = useOrganizationLogo();
+
+  if (organizationIsLoading || !organization) return <LoadingIndicator />;
+
+  const onSubmitWrapper = async (logoImage: File) => {
+    console.log('RECEIVED FILE');
+    await mutateAsync(logoImage);
+  };
+
+  return <EditLogoForm logoImageUrl={imageUrl} onSubmit={onSubmitWrapper} />;
+};
+
+export default EditLogo;

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Box, Button, Stack, useTheme } from '@mui/material';
+import FileUploadIcon from '@mui/icons-material/FileUpload';
+
+interface EditLogoFormProps {
+  logoImageUrl?: string;
+  onSubmit: (logoImage: File) => Promise<void>;
+}
+
+const EditLogoForm: React.FC<EditLogoFormProps> = ({ logoImageUrl, 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
+          }}
+        />
+      )}
+      <Button
+        variant="contained"
+        color="error"
+        component="label"
+        startIcon={<FileUploadIcon />}
+        sx={{
+          width: 'fit-content',
+          textTransform: 'none',
+          mt: '9.75px'
+        }}
+      >
+        Upload
+        <input
+          onChange={(e) => {
+            console.log('SUBMITTED');
+            !!e.target.files && onSubmit(e.target.files[0]);
+          }}
+          type="file"
+          id="logo-image"
+          accept="image/png, image/jpeg, application/pdf"
+          name="logoImageFile"
+          multiple
+          hidden
+        />
+      </Button>
+    </Stack>
+  );
+};
+
+export default EditLogoForm;