#2082 created new type DownloadReceiptsInput and added default values to useForm

Author: superhvarn

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

@@ -56,6 +56,13 @@ export interface EditReimbursementRequestPayload extends CreateReimbursementRequ
   receiptPictures: ReimbursementReceiptCreateArgs[];
 }
 
+export interface DownloadReceiptsFormInput {
+  fileIds: string[];
+  startDate: Date;
+  endDate: Date;
+  refundSource: string;
+}
+
 export interface ExpenseTypePayload {
   code: number;
   name: string;
@@ -335,22 +342,21 @@ export const useDenyReimbursementRequest = (id: string) => {
  * @param fileIds The google file ids to fetch the images for
  */
 export const useDownloadPDFOfImages = () => {
-  return useMutation(
-    ['reimbursement-requests'],
-    async (formData: { fileIds: string[]; startDate: Date; endDate: Date; refundSource: string }) => {
-      const promises = formData.fileIds.map((fileId) => {
-        return downloadGoogleImage(fileId);
-      });
+  return useMutation(['reimbursement-requests'], async (formData: { requestData: DownloadReceiptsFormInput }) => {
+    const promises = formData.requestData.fileIds.map((fileId) => {
+      return downloadGoogleImage(fileId);
+    });
 
-      const blobs = await Promise.all(promises);
-      const pdfName = `${formData.startDate.toLocaleDateString()}-${formData.endDate.toLocaleDateString()}.pdf`;
+    const blobs = await Promise.all(promises);
+    const pdfName = `${formData.requestData.startDate.toLocaleDateString()}-${formData.requestData.endDate.toLocaleDateString()}.pdf`;
 
-      const pdfFileName =
-        formData.refundSource !== 'BOTH' ? `receipts-${formData.refundSource}-${pdfName}` : `receipts-${pdfName}`;
+    const pdfFileName =
+      formData.requestData.refundSource !== 'BOTH'
+        ? `receipts-${formData.requestData.refundSource}-${pdfName}`
+        : `receipts-${pdfName}`;
 
-      await downloadBlobsToPdf(blobs, pdfFileName);
-    }
-  );
+    await downloadBlobsToPdf(blobs, pdfFileName);
+  });
 };
 
 /**

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

@@ -58,10 +58,12 @@ const GenerateReceiptsModal = ({ open, setOpen, allReimbursementRequests }: Gene
 
     try {
       await mutateAsync({
-        fileIds: receipts.map((receipt) => receipt.googleFileId),
-        startDate: data.startDate,
-        endDate: data.endDate,
-        refundSource: data.refundSource
+        requestData: {
+          fileIds: receipts.map((receipt) => receipt.googleFileId),
+          startDate: data.startDate,
+          endDate: data.endDate,
+          refundSource: data.refundSource
+        }
       });
     } catch (error: unknown) {
       if (error instanceof Error) {
@@ -77,7 +79,12 @@ const GenerateReceiptsModal = ({ open, setOpen, allReimbursementRequests }: Gene
     reset,
     formState: { errors, isValid }
   } = useForm({
-    resolver: yupResolver(schema)
+    resolver: yupResolver(schema),
+    defaultValues: {
+      startDate: new Date(),
+      endDate: new Date(),
+      refundSource: refundSourceOptions[2]
+    }
   });
 
   return (
@@ -107,8 +114,7 @@ const GenerateReceiptsModal = ({ open, setOpen, allReimbursementRequests }: Gene
                   onClose={() => setStartDatePickerOpen(false)}
                   onOpen={() => setStartDatePickerOpen(true)}
                   onChange={(newValue) => {
-                    const newDate = newValue ?? new Date();
-                    onChange(newDate);
+                    onChange(newValue ?? new Date());
                   }}
                   PopperProps={{
                     placement: 'right'
@@ -138,8 +144,7 @@ const GenerateReceiptsModal = ({ open, setOpen, allReimbursementRequests }: Gene
                   onClose={() => setEndDatePickerOpen(false)}
                   onOpen={() => setEndDatePickerOpen(true)}
                   onChange={(newValue) => {
-                    const newDate = newValue ?? new Date();
-                    onChange(newDate);
+                    onChange(newValue ?? new Date());
                   }}
                   PopperProps={{
                     placement: 'right'
@@ -163,14 +168,7 @@ const GenerateReceiptsModal = ({ open, setOpen, allReimbursementRequests }: Gene
               name="refundSource"
               control={control}
               render={({ field: { onChange, value } }) => (
-                <Select
-                  value={value}
-                  defaultValue={refundSourceOptions[2]}
-                  onChange={(event) => {
-                    const newRefundSource = event.target.value;
-                    onChange(newRefundSource);
-                  }}
-                >
+                <Select value={value} onChange={(event) => onChange(event.target.value)}>
                   {refundSourceOptions.map((status) => (
                     <MenuItem key={status} value={status}>
                       {status}