diff --git a/src/backend/src/controllers/organizations.controllers.ts b/src/backend/src/controllers/organizations.controllers.ts index af14eb1dd8..c418d4d779 100644 --- a/src/backend/src/controllers/organizations.controllers.ts +++ b/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); diff --git a/src/frontend/src/hooks/organizations.hooks.ts b/src/frontend/src/hooks/organizations.hooks.ts index 9dce4e608c..fdc288c6f0 100644 --- a/src/frontend/src/hooks/organizations.hooks.ts +++ b/src/frontend/src/hooks/organizations.hooks.ts @@ -73,8 +73,10 @@ export const useSetOrganizationDescription = () => { }; export const useSetOrganizationLogo = () => { + const queryClient = useQueryClient(); return useMutation(['reimbursement-requsts', 'edit'], async (file: File) => { const { data } = await setOrganizationLogo(file); + queryClient.invalidateQueries(['organizations']); return data; }); }; diff --git a/src/frontend/src/pages/AdminToolsPage/AdminToolsPage.tsx b/src/frontend/src/pages/AdminToolsPage/AdminToolsPage.tsx index 04856d5265..059f2a2514 100644 --- a/src/frontend/src/pages/AdminToolsPage/AdminToolsPage.tsx +++ b/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 ? ( ) : tabIndex === 4 ? ( - - - + ) : ( diff --git a/src/frontend/src/pages/AdminToolsPage/EditGuestView/EditLogo.tsx b/src/frontend/src/pages/AdminToolsPage/EditGuestView/EditLogo.tsx new file mode 100644 index 0000000000..311ec282f0 --- /dev/null +++ b/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 ; + + const onSubmitWrapper = async (logoImage: File) => { + console.log('RECEIVED FILE'); + await mutateAsync(logoImage); + }; + + return ; +}; + +export default EditLogo; diff --git a/src/frontend/src/pages/AdminToolsPage/EditGuestView/EditLogoForm.tsx b/src/frontend/src/pages/AdminToolsPage/EditGuestView/EditLogoForm.tsx new file mode 100644 index 0000000000..56fb62c168 --- /dev/null +++ b/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; +} + +const EditLogoForm: React.FC = ({ logoImageUrl, onSubmit }) => { + const theme = useTheme(); + return ( + + {!logoImageUrl ? ( + + ) : ( + + )} + + + ); +}; + +export default EditLogoForm;