Merge pull request #4159 from Northeastern-Electric-Racing/#4102-sponsor-logoimageid-frontend

#4102 sponsor logoimageid frontend

Author: wavehassman

src/backend/src/controllers/finance.controllers.ts

@@ -1,5 +1,6 @@
 import { NextFunction, Request, Response } from 'express';
 import FinanceServices from '../services/finance.services.js';
+import { HttpException } from '../utils/errors.utils.js';
 
 export default class FinanceController {
   static async createSponsor(req: Request, res: Response, next: NextFunction) {
@@ -43,8 +44,7 @@ export default class FinanceController {
         contactPhone,
         contactPosition,
         stockDescription,
-        discountDescription,
-        req.file
+        discountDescription
       );
       res.status(200).json(sponsor);
     } catch (error: unknown) {
@@ -384,8 +384,7 @@ export default class FinanceController {
         contactPhone,
         contactPosition,
         stockDescription,
-        discountDescription,
-        req.file
+        discountDescription
       );
 
       res.status(200).json(updatedSponsor);
@@ -432,4 +431,15 @@ export default class FinanceController {
       next(error);
     }
   }
+
+  static async uploadSponsorLogo(req: Request, res: Response, next: NextFunction) {
+    try {
+      const { sponsorId } = req.params as Record<string, string>;
+      if (!req.file) throw new HttpException(400, 'Invalid or undefined image data');
+      const updatedSponsor = await FinanceServices.uploadSponsorLogo(req.currentUser, req.organization, sponsorId, req.file);
+      res.status(200).json(updatedSponsor);
+    } catch (error: unknown) {
+      next(error);
+    }
+  }
 }

src/backend/src/routes/finance.routes.ts

@@ -17,7 +17,6 @@ const upload = multer({ limits: { fileSize: MAX_FILE_SIZE }, storage: memoryStor
 
 financeRouter.post(
   '/sponsor/create',
-  upload.single('logoImage'),
   nonEmptyString(body('name')),
   body('activeStatus').isBoolean(),
   body('valueTypes').isArray(),
@@ -52,6 +51,13 @@ financeRouter.get('/sponsor/:sponsorId/sponsorTasks', FinanceController.getSpons
 
 financeRouter.post('/sponsor/:sponsorId/delete', FinanceController.deleteSponsor);
 
+financeRouter.post(
+  '/sponsor/:sponsorId/uploadLogo',
+  upload.single('logoImage'),
+  validateInputs,
+  FinanceController.uploadSponsorLogo
+);
+
 financeRouter.post(
   '/sponsorTier/create',
   nonEmptyString(body('name')),
@@ -146,7 +152,6 @@ financeRouter.get('/sponsorTiers', FinanceController.getAllSponsorTiers);
 
 financeRouter.post(
   '/sponsor/:sponsorId/edit',
-  upload.single('logoImage'),
   nonEmptyString(body('name')),
   body('activeStatus').isBoolean(),
   body('valueTypes').isArray(),

src/backend/src/services/finance.services.ts

@@ -81,8 +81,7 @@ export default class FinanceServices {
     contactPhone?: string,
     contactPosition?: string,
     stockDescription?: string,
-    discountDescription?: string,
-    logoImage?: Express.Multer.File
+    discountDescription?: string
   ) {
     if (!(await userHasPermission(submitter.userId, organization.organizationId, isHead)))
       throw new AccessDeniedException('Only heads can create a sponsor');
@@ -106,8 +105,6 @@ export default class FinanceServices {
       data: { name: contactName, email: contactEmail, phone: contactPhone, position: contactPosition }
     });
 
-    const { id: logoImageId } = logoImage ? await uploadFile(logoImage) : { id: undefined };
-
     const sponsor = await prisma.sponsor.create({
       data: {
         name,
@@ -122,7 +119,6 @@ export default class FinanceServices {
         taxExempt,
         discountCode,
         sponsorNotes,
-        logoImageId,
         contactId: contact.sponsorContactId,
         sponsorTasks: {
           create: sponsorTasks.map((task) => ({
@@ -1230,8 +1226,7 @@ export default class FinanceServices {
     contactPhone?: string,
     contactPosition?: string,
     stockDescription?: string,
-    discountDescription?: string,
-    logoImage?: Express.Multer.File
+    discountDescription?: string
   ): Promise<Sponsor> {
     if (!(await userHasPermission(submitter.userId, organization.organizationId, isHead)))
       throw new AccessDeniedException('Only heads can edit sponsors.');
@@ -1329,8 +1324,6 @@ export default class FinanceServices {
       data: { name: contactName, email: contactEmail, phone: contactPhone, position: contactPosition }
     });
 
-    const { id: logoImageId } = logoImage ? await uploadFile(logoImage) : { id: undefined };
-
     const updatedSponsor = await prisma.sponsor.update({
       where: { sponsorId: oldSponsor.sponsorId },
       data: {
@@ -1345,15 +1338,49 @@ export default class FinanceServices {
         tier: sponsorTierId ? { connect: { sponsorTierId } } : { disconnect: true },
         taxExempt,
         discountCode,
-        sponsorNotes,
-        ...(logoImageId && { logoImageId })
+        sponsorNotes
       },
       ...getSponsorQueryArgs(organization.organizationId)
     });
 
     return sponsorTransformer(updatedSponsor);
   }
 
+  /**
+   * Uploads a logo image for a sponsor and stores the resulting image ID.
+   *
+   * @param submitter The user performing the upload
+   * @param organization The organization the sponsor belongs to
+   * @param sponsorId The id of the sponsor
+   * @param logoImage The logo image file to upload
+   * @returns The updated sponsor
+   */
+  static async uploadSponsorLogo(
+    submitter: User,
+    organization: Organization,
+    sponsorId: string,
+    logoImage: Express.Multer.File
+  ): Promise<Sponsor> {
+    if (!(await userHasPermission(submitter.userId, organization.organizationId, isHead)))
+      throw new AccessDeniedException('Only heads can update a sponsor logo');
+
+    const sponsor = await prisma.sponsor.findUnique({
+      where: { sponsorId, organizationId: organization.organizationId }
+    });
+
+    if (!sponsor) throw new NotFoundException('Sponsor', sponsorId);
+
+    const { id } = await uploadFile(logoImage);
+
+    const updatedSponsor = await prisma.sponsor.update({
+      where: { sponsorId },
+      data: { logoImageId: id },
+      ...getSponsorQueryArgs(organization.organizationId)
+    });
+
+    return sponsorTransformer(updatedSponsor);
+  }
+
   /**
    * Toggles the done status of a sponsor task
    * @param submitter The user toggling the task

src/frontend/src/apis/finance.api.ts

@@ -742,6 +742,12 @@ export const editSponsor = (id: string, formData: SponsorPayload) => {
   return axios.post(apiUrls.editSponsor(id), formData);
 };
 
+export const uploadSponsorLogo = (sponsorId: string, logoImage: File) => {
+  const formData = new FormData();
+  formData.append('logoImage', logoImage);
+  return axios.post<Sponsor>(apiUrls.uploadSponsorLogo(sponsorId), formData);
+};
+
 /**
  * API call to delete a given sponsor task
  *

src/frontend/src/hooks/finance.hooks.ts

@@ -69,6 +69,7 @@ import {
   assignMemberToRR,
   setTaxExemptStatus,
   toggleSponsorTaskDone,
+  uploadSponsorLogo,
   getAllProspectiveSponsors,
   createProspectiveSponsor,
   editProspectiveSponsor,
@@ -186,6 +187,7 @@ export interface SponsorPayload {
   sponsorNotes?: string;
   stockDescription?: string;
   discountDescription?: string;
+  logoImageId?: string;
 }
 
 interface EditSponsorPayload extends SponsorPayload {
@@ -1324,6 +1326,27 @@ export const useEditSponsor = () => {
   );
 };
 
+interface UploadSponsorLogoPayload {
+  sponsorId: string;
+  logoImage: File;
+}
+
+export const useUploadSponsorLogo = () => {
+  const queryClient = useQueryClient();
+  return useMutation<Sponsor, Error, UploadSponsorLogoPayload>(
+    ['sponsor', 'uploadLogo'],
+    async ({ sponsorId, logoImage }: UploadSponsorLogoPayload) => {
+      const { data } = await uploadSponsorLogo(sponsorId, logoImage);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['sponsor']);
+      }
+    }
+  );
+};
+
 /**
  * Custom React Hook to delete a sponsor task
  *

src/frontend/src/pages/FinancePage/FinanceComponents/CreateSponsorPage.tsx

@@ -1,6 +1,6 @@
 import { useForm } from 'react-hook-form';
 import LoadingIndicator from '../../../components/LoadingIndicator';
-import { SponsorPayload, useCreateSponsor } from '../../../hooks/finance.hooks';
+import { SponsorPayload, useCreateSponsor, useUploadSponsorLogo } from '../../../hooks/finance.hooks';
 import sponsorSchema, { SponsorForm } from './SponsorForm';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Box } from '@mui/system';
@@ -17,7 +17,8 @@ interface CreateSponsorPageProps {
 
 const CreateSponsorPage = ({ showPage, handleClose }: CreateSponsorPageProps) => {
   const toast = useToast();
-  const { isLoading, mutateAsync } = useCreateSponsor();
+  const { isLoading, mutateAsync: createSponsor } = useCreateSponsor();
+  const { mutateAsync: uploadLogo } = useUploadSponsorLogo();
 
   const {
     handleSubmit,
@@ -48,12 +49,17 @@ const CreateSponsorPage = ({ showPage, handleClose }: CreateSponsorPageProps) =>
   });
 
   const [submitError, setSubmitError] = useState<string | null>(null);
+  const [logoImage, setLogoImage] = useState<File | null>(null);
+
   if (isLoading) return <LoadingIndicator />;
 
   const onFormSubmit = async (formData: SponsorPayload) => {
     try {
       setSubmitError(null);
-      await mutateAsync({ ...formData });
+      const sponsor = await createSponsor(formData);
+      if (logoImage) {
+        await uploadLogo({ sponsorId: sponsor.sponsorId, logoImage });
+      }
       toast.success('Sponsor created successfully!');
       handleClose();
     } catch (err: unknown) {
@@ -71,7 +77,7 @@ const CreateSponsorPage = ({ showPage, handleClose }: CreateSponsorPageProps) =>
       title="Add Sponsor"
       component={
         <Box display="flex" flexDirection="column" alignItems="flex-end">
-          <SponsorForm control={control} errors={errors} setValue={setValue} />
+          <SponsorForm control={control} errors={errors} setValue={setValue} onLogoImageChange={setLogoImage} />
           {submitError && (
             <Box color="error.main" mb={2} fontWeight="bold">
               {submitError}

src/frontend/src/pages/FinancePage/FinanceComponents/EditSponsorPage.tsx

@@ -1,6 +1,6 @@
 import { CreateSponsorTask, Sponsor } from 'shared';
 import LoadingIndicator from '../../../components/LoadingIndicator';
-import { SponsorPayload, useEditSponsor } from '../../../hooks/finance.hooks';
+import { SponsorPayload, useEditSponsor, useUploadSponsorLogo } from '../../../hooks/finance.hooks';
 import SidePage from './SidePagePopup';
 import sponsorSchema, { SponsorForm } from './SponsorForm';
 
@@ -21,6 +21,7 @@ interface EditSponsorPageProps {
 const EditSponsorPage = ({ showPage, handleClose, sponsor }: EditSponsorPageProps) => {
   const toast = useToast();
   const { isLoading, mutateAsync } = useEditSponsor();
+  const { mutateAsync: uploadLogo } = useUploadSponsorLogo();
 
   const defaultSponsorTasks: CreateSponsorTask[] = (
     sponsor.sponsorTasks?.map((task) => ({
@@ -61,12 +62,17 @@ const EditSponsorPage = ({ showPage, handleClose, sponsor }: EditSponsorPageProp
     }
   });
   const [submitError, setSubmitError] = useState<string | null>(null);
+  const [logoImage, setLogoImage] = useState<File | null>(null);
+
   if (isLoading) return <LoadingIndicator />;
 
   const onSubmit = async (formData: SponsorPayload) => {
     try {
       setSubmitError(null);
       await mutateAsync({ sponsorId: sponsor.sponsorId, ...formData });
+      if (logoImage) {
+        await uploadLogo({ sponsorId: sponsor.sponsorId, logoImage });
+      }
       toast.success('Sponsor updated successfully!');
       handleClose();
     } catch (err: unknown) {
@@ -84,7 +90,13 @@ const EditSponsorPage = ({ showPage, handleClose, sponsor }: EditSponsorPageProp
       title="Edit Sponsor"
       component={
         <Box display="flex" flexDirection="column" alignItems="flex-end">
-          <SponsorForm control={control} errors={errors} setValue={setValue} defaultValues={sponsor}></SponsorForm>
+          <SponsorForm
+            control={control}
+            errors={errors}
+            setValue={setValue}
+            defaultValues={sponsor}
+            onLogoImageChange={setLogoImage}
+          />
           {submitError && (
             <Box color="error.main" mb={2} fontWeight="bold">
               {submitError}