#2082 no more use states

Author: superhvarn

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

@@ -334,18 +334,25 @@ export const useDenyReimbursementRequest = (id: string) => {
  *
  * @param fileIds The google file ids to fetch the images for
  */
-export const useDownloadPDFOfImages = (startDate: Date, endDate: Date, refundSource: String) => {
-  return useMutation(['reimbursement-requests'], async (formData: { fileIds: string[] }) => {
-    const promises = formData.fileIds.map((fileId) => {
-      return downloadGoogleImage(fileId);
-    });
-    const blobs = await Promise.all(promises);
-    const pdfName = `${startDate.toLocaleDateString()}-${endDate.toLocaleDateString()}.pdf`;
+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);
+      });
 
-    const pdfFileName = refundSource !== 'BOTH' ? `receipts-${refundSource}-${pdfName}` : `receipts-${pdfName}`;
+      console.log(formData.startDate)
 
-    await downloadBlobsToPdf(blobs, pdfFileName);
-  });
+      const blobs = await Promise.all(promises);
+      const pdfName = `${formData.startDate.toLocaleDateString()}-${formData.endDate.toLocaleDateString()}.pdf`;
+
+      const pdfFileName =
+        formData.refundSource !== 'BOTH' ? `receipts-${formData.refundSource}-${pdfName}` : `receipts-${pdfName}`;
+
+      await downloadBlobsToPdf(blobs, pdfFileName);
+    }
+  );
 };
 
 /**

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

@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, MenuItem, Select, TextField } from '@mui/material';
+import { FormControl, FormLabel, MenuItem, Select, TextField, setRef } from '@mui/material';
 import NERFormModal from '../../../components/NERFormModal';
 import { Controller, useForm } from 'react-hook-form';
 import { DatePicker } from '@mui/x-date-pickers';
@@ -8,6 +8,7 @@ import * as yup from 'yup';
 import { useDownloadPDFOfImages } from '../../../hooks/finance.hooks';
 import { useToast } from '../../../hooks/toasts.hooks';
 import { ReimbursementRequest } from 'shared';
+import { useState } from 'react';
 
 const schema = yup.object().shape({
   startDate: yup.date().required('Start Date is required'),
@@ -25,36 +26,25 @@ interface GenerateReceiptsModalProps {
   open: boolean;
   setOpen: (val: boolean) => void;
   allReimbursementRequests?: ReimbursementRequest[];
-  setRefundSource: (val: string) => void;
   refundSource: string;
   startDate: Date;
   endDate: Date;
-  setStartDate: (val: Date) => void;
-  setEndDate: (val: Date) => void;
-  endDatePickerOpen: boolean;
-  startDatePickerOpen: boolean;
-  setEndDatePickerOpen: (val: boolean) => void;
-  setStartDatePickerOpen: (val: boolean) => void;
 }
 
 const GenerateReceiptsModal = ({
   open,
   setOpen,
   allReimbursementRequests,
-  refundSource,
-  setRefundSource,
   startDate,
-  setStartDate,
   endDate,
-  setEndDate,
-  setEndDatePickerOpen,
-  setStartDatePickerOpen,
-  startDatePickerOpen,
-  endDatePickerOpen
+  refundSource
 }: GenerateReceiptsModalProps) => {
   const toast = useToast();
 
-  const { mutateAsync, isLoading } = useDownloadPDFOfImages(startDate, endDate, refundSource);
+  const [endDatePickerOpen, setEndDatePickerOpen] = useState(false);
+  const [startDatePickerOpen, setStartDatePickerOpen] = useState(false);
+
+  const { mutateAsync, isLoading } = useDownloadPDFOfImages();
 
   const refundSourceOptions = ['BUDGET', 'CASH', 'BOTH'];
 
@@ -78,7 +68,12 @@ const GenerateReceiptsModal = ({
 
     try {
       await mutateAsync({
-        fileIds: receipts.map((receipt) => receipt.googleFileId)
+        fileIds: receipts.map((receipt) => receipt.googleFileId),
+        startDate: data.startDate,
+        endDate: data.endDate,
+        refundSource: data.refundSource
+
+
       });
     } catch (error: unknown) {
       if (error instanceof Error) {
@@ -92,9 +87,9 @@ const GenerateReceiptsModal = ({
     handleSubmit,
     control,
     reset,
-    formState: { errors, isValid }
+    formState: { errors, isValid },
   } = useForm({
-    resolver: yupResolver(schema)
+    resolver: yupResolver(schema),
   });
 
   return (
@@ -125,7 +120,6 @@ const GenerateReceiptsModal = ({
                   onOpen={() => setStartDatePickerOpen(true)}
                   onChange={(newValue) => {
                     const newDate = newValue ?? new Date();
-                    setStartDate(newDate);
                     onChange(newDate);
                   }}
                   PopperProps={{
@@ -157,7 +151,6 @@ const GenerateReceiptsModal = ({
                   onOpen={() => setEndDatePickerOpen(true)}
                   onChange={(newValue) => {
                     const newDate = newValue ?? new Date();
-                    setEndDate(newDate);
                     onChange(newDate);
                   }}
                   PopperProps={{
@@ -184,10 +177,8 @@ const GenerateReceiptsModal = ({
               render={({ field: { onChange, value } }) => (
                 <Select
                   value={value}
-                  defaultValue={refundSourceOptions[2]}
                   onChange={(event) => {
                     const newRefundSource = event.target.value;
-                    setRefundSource(newRefundSource);
                     onChange(newRefundSource);
                   }}
                 >

src/frontend/src/pages/FinancePage/FinancePage.tsx

@@ -62,13 +62,6 @@ const FinancePage = () => {
   const [accountCreditModalShow, setAccountCreditModalShow] = useState<boolean>(false);
   const [showTotalAmountSpent, setShowTotalAmountSpent] = useState(false);
 
-  const [refundSource, setRefundSource] = useState('');
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(new Date());
-
-  const [endDatePickerOpen, setEndDatePickerOpen] = useState(false);
-  const [startDatePickerOpen, setStartDatePickerOpen] = useState(false);
-
   if (isFinance && allReimbursementRequestsIsError) return <ErrorPage message={allReimbursementRequestsError?.message} />;
   if (userReimbursementRequestIsError) return <ErrorPage message={userReimbursementRequestError?.message} />;
   if (isFinance && allPendingAdvisorListIsError) return <ErrorPage message={allPendingAdvisorListError?.message} />;
@@ -168,17 +161,9 @@ const FinancePage = () => {
         open={showGenerateReceipts}
         setOpen={setShowGenerateReceipts}
         allReimbursementRequests={allReimbursementRequests}
-        setRefundSource={setRefundSource}
-        refundSource={refundSource}
-        startDate={startDate}
-        endDate={endDate}
-        setStartDate={setStartDate}
-        setEndDate={setEndDate}
-        setEndDatePickerOpen={setEndDatePickerOpen}
-        setStartDatePickerOpen={setStartDatePickerOpen}
-        endDatePickerOpen={endDatePickerOpen}
-        startDatePickerOpen={startDatePickerOpen}
-      />
+        refundSource="BOTH"
+        startDate={new Date()}
+        endDate={new Date()}/>
       <Grid container>
         <Grid item xs={12} sm={12} md={4}>
           <Refunds