Fix dependency conflicts, upgrade nx & vite

.gitignore

@@ -43,3 +43,5 @@ Thumbs.db
 *.env
 *.env.*
 !.env.example
+
+vite.config.*.timestamp*

.prettierignore

@@ -1,3 +1,5 @@
 # Add files here to ignore them from prettier formatting
 /dist
-/coverage
+/coverage
+/.nx/cache
+/.nx/workspace-data

apps/backend/project.json

@@ -3,6 +3,7 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/backend/src",
   "projectType": "application",
+  "tags": [],
   "targets": {
     "build": {
       "executor": "@nx/webpack:webpack",
@@ -39,7 +40,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/backend/**/*.ts"]
@@ -67,6 +68,5 @@
         "forwardAllArgs": false
       }
     }
-  },
-  "tags": []
+  }
 }

apps/frontend/.eslintrc.json

@@ -1,6 +1,10 @@
 {
   "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
+  "ignorePatterns": [
+    "!**/*",
+    "**/vite.config.*.timestamp*",
+    "**/vitest.config.*.timestamp*"
+  ],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/frontend/project.json

@@ -3,6 +3,7 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/frontend/src",
   "projectType": "application",
+  "tags": [],
   "targets": {
     "build": {
       "executor": "@nx/vite:build",
@@ -54,15 +55,15 @@
       }
     },
     "test": {
-      "executor": "@nx/vite:test",
+      "executor": "@nx/vitest:test",
       "outputs": ["{options.reportsDirectory}"],
       "options": {
         "passWithNoTests": true,
         "reportsDirectory": "../../coverage/apps/frontend"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/frontend/**/*.{ts,tsx,js,jsx}"]
@@ -82,6 +83,5 @@
         "forwardAllArgs": false
       }
     }
-  },
-  "tags": []
+  }
 }

apps/frontend/src/app.tsx

@@ -7,7 +7,7 @@ import PantryPastOrders from '@containers/pantryPastOrders';
 import Pantries from '@containers/pantries';
 import Orders from '@containers/orders';
 import PantryDashboard from '@containers/pantryDashboard';
-import { submitFoodRequestFormModal } from '@components/forms/requestFormModal';
+import submitFoodRequestFormModal from '@components/forms/requestFormModal';
 import { submitDeliveryConfirmationFormModal } from '@components/forms/deliveryConfirmationModal';
 import FormRequests from '@containers/FormRequests';
 import PantryApplication from '@containers/pantryApplication';
@@ -164,7 +164,7 @@ const router = createBrowserRouter([
         loader: pantryIdLoader,
       },
       {
-        path: '/donation-mangement',
+        path: '/donation-management',
         element: (
           <ProtectedRoute>
             <DonationManagement />

apps/frontend/src/components/forms/requestFormModal.tsx

@@ -11,22 +11,29 @@ import {
   Field,
   CloseButton,
 } from '@chakra-ui/react';
-import { Form, ActionFunction, ActionFunctionArgs } from 'react-router-dom';
-import { FoodRequest, FoodTypes, RequestSize } from '../../types/types';
+import {
+  CreateFoodRequestBody,
+  FoodRequest,
+  FoodTypes,
+  RequestSize,
+} from '../../types/types';
 import { ChevronDownIcon } from 'lucide-react';
+import apiClient from '@api/apiClient';
 
 interface FoodRequestFormModalProps {
   previousRequest?: FoodRequest;
   isOpen: boolean;
   onClose: () => void;
   pantryId: number;
+  onSuccess: () => void;
 }
 
 const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
   previousRequest,
   isOpen,
   onClose,
   pantryId,
+  onSuccess,
 }) => {
   const [selectedItems, setSelectedItems] = useState<string[]>([]);
   const [requestedSize, setRequestedSize] = useState<string>('');
@@ -45,6 +52,26 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
     }
   }, [isOpen, previousRequest]);
 
+  const handleSubmit = async () => {
+    const foodRequestData: CreateFoodRequestBody = {
+      pantryId,
+      requestedSize: requestedSize as RequestSize,
+      requestedItems: selectedItems,
+      additionalInformation: additionalNotes || '',
+      dateReceived: null,
+      feedback: null,
+      photos: [],
+    };
+
+    try {
+      await apiClient.createFoodRequest(foodRequestData);
+      onClose();
+      onSuccess();
+    } catch (error) {
+      alert('Failed to submit request. Please try again.');
+    }
+  };
+
   return (
     <Dialog.Root
       open={isOpen}
@@ -75,28 +102,13 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                 : `Please keep in mind that we may not be able to accommodate specific
               food requests at all times, but we will do our best to match your preferences.`}
             </Text>
-            <Form
-              method="post"
-              action="/food-request"
-              onSubmit={(e) => {
-                if (selectedItems.length === 0) {
-                  e.preventDefault();
-                  alert('Please select at least one food type');
-                }
-                if (requestedSize === '') {
-                  e.preventDefault();
-                  alert('Please select a requested size.');
-                }
-              }}
-            >
-              <input type="hidden" name="pantryId" value={pantryId} />
+            <Box>
               <Field.Root required mb={4}>
                 <Field.Label>
                   <Text textStyle="p2" fontWeight={600} color="neutral.800">
                     Size of Shipment
                   </Text>
                 </Field.Label>
-                <input type="hidden" name="size" value={requestedSize} />
                 <Menu.Root>
                   <Menu.Trigger asChild>
                     <Button
@@ -147,15 +159,6 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                   </Text>
                 </Field.Label>
 
-                {selectedItems.map((item) => (
-                  <input
-                    key={item}
-                    type="hidden"
-                    name="restrictions"
-                    value={item}
-                  />
-                ))}
-
                 <Menu.Root closeOnSelect={false}>
                   <Menu.Trigger asChild>
                     <Button
@@ -261,7 +264,6 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                 </Field.Label>
                 <Textarea
                   pl={2.5}
-                  name="notes"
                   placeholder="Anything else we should know about"
                   _placeholder={{
                     color: 'neutral.300',
@@ -300,15 +302,15 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                 </Button>
 
                 <Button
-                  type="submit"
+                  onClick={handleSubmit}
                   bg={isFormValid ? '#213C4A' : 'neutral.400'}
                   color={'white'}
                   disabled={!isFormValid}
                 >
                   Continue
                 </Button>
               </Flex>
-            </Form>
+            </Box>
           </Dialog.Body>
           <Dialog.CloseTrigger asChild>
             <CloseButton size="lg" />
@@ -319,49 +321,4 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
   );
 };
 
-export const submitFoodRequestFormModal: ActionFunction = async ({
-  request,
-}: ActionFunctionArgs) => {
-  const form = await request.formData();
-
-  const foodRequestData = new Map();
-
-  const pantryId = form.get('pantryId');
-  foodRequestData.set('requestedSize', form.get('size'));
-  form.delete('size');
-  foodRequestData.set('additionalInformation', form.get('notes'));
-  form.delete('notes');
-  foodRequestData.set('requestedItems', form.getAll('restrictions'));
-  form.delete('restrictions');
-  foodRequestData.set('pantryId', form.get('pantryId'));
-
-  const data = Object.fromEntries(foodRequestData);
-  console.log(data);
-
-  try {
-    const response = await fetch('/api/requests/create', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data),
-    });
-
-    if (response.ok) {
-      console.log('Food request submitted successfully');
-
-      window.location.href = `/request-form/${pantryId}`;
-      return null;
-    } else {
-      console.error('Failed to submit food request', await response.text());
-      window.location.href = `/request-form/${pantryId}`;
-      return null;
-    }
-  } catch (error) {
-    console.error('Error submitting food request', error);
-    window.location.href = `/request-form/${pantryId}`;
-    return null;
-  }
-};
-
 export default FoodRequestFormModal;

apps/frontend/src/containers/FormRequests.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import {
   Box,
@@ -39,27 +39,27 @@ const FormRequests: React.FC = () => {
 
   const pageSize = 10;
 
-  useEffect(() => {
-    const fetchRequests = async () => {
-      if (pantryId) {
-        try {
-          const data = await ApiClient.getPantryRequests(pantryId);
-          const sortedData = data
-            .slice()
-            .sort((a, b) => b.requestId - a.requestId);
-          setRequests(sortedData);
+  const fetchRequests = useCallback(async () => {
+    if (pantryId) {
+      try {
+        const data = await ApiClient.getPantryRequests(pantryId);
+        const sortedData = data
+          .slice()
+          .sort((a, b) => b.requestId - a.requestId);
+        setRequests(sortedData);
 
-          if (sortedData.length > 0) {
-            setPreviousRequest(sortedData[0]);
-          }
-        } catch (error) {
-          console.log(error);
+        if (sortedData.length > 0) {
+          setPreviousRequest(sortedData[0]);
         }
+      } catch (error) {
+        console.log(error);
       }
-    };
+    }
+  }, [pantryId]);
 
+  useEffect(() => {
     fetchRequests();
-  }, [pantryId]);
+  }, [pantryId, fetchRequests]);
 
   const paginatedRequests = requests.slice(
     (currentPage - 1) * pageSize,
@@ -88,6 +88,7 @@ const FormRequests: React.FC = () => {
           isOpen={newRequestDisclosure.open}
           onClose={newRequestDisclosure.onClose}
           pantryId={pantryId}
+          onSuccess={fetchRequests}
         />
         {previousRequest && (
           <>
@@ -108,6 +109,7 @@ const FormRequests: React.FC = () => {
               isOpen={previousRequestDisclosure.open}
               onClose={previousRequestDisclosure.onClose}
               pantryId={pantryId}
+              onSuccess={fetchRequests}
             />
           </>
         )}

apps/frontend/src/types/types.ts

@@ -228,8 +228,6 @@ export interface CreateFoodRequestBody {
   requestedSize: string;
   requestedItems: string[];
   additionalInformation: string | null | undefined;
-  status: string;
-  fulfilledBy: number | null | undefined;
   dateReceived: string | null | undefined;
   feedback: string | null | undefined;
   photos: string[] | null | undefined;

apps/frontend/tsconfig.spec.json

@@ -5,7 +5,7 @@
     "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
   },
   "include": [
-    "vite.config.ts",
+    "vite.config.mts",
     "src/**/*.test.ts",
     "src/**/*.spec.ts",
     "src/**/*.test.tsx",