[SSF 140] Fix Frontend Linting Issues

apps/frontend/src/app.tsx

@@ -151,7 +151,6 @@ const router = createBrowserRouter([
             <FormRequests />
           </ProtectedRoute>
         ),
-        action: submitFoodRequestFormModal,
       },
       {
         path: '/donation-management',

apps/frontend/src/chakra-ui.d.ts

@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import '@chakra-ui/react';
+import React from 'react';
+
+// This file serves as an extension onto some select chakra-ui components that we use
+// It essentially allows us to give permissions for these components to have children
+// Which, while the DOM renders just fine, TypeScript throws errors for unless these are specified
+declare module '@chakra-ui/react' {
+  export interface ComponentPropsStrictChildren {
+    asChild?: boolean; // Enables composition pattern
+    children?: JSX.Element | JSX.Element[]; // Allows child elements only
+    as?: React.ElementType; // Polymorphic component prop
+    [key: string]: any; // Catch-all for any other props
+  }
+
+  export interface ComponentPropsLenientChildren {
+    asChild?: boolean; // Enables composition pattern
+    children?: React.ReactNode; // Allows child elements (any combination of components/strings)
+    as?: React.ElementType; // Polymorphic component prop
+    [key: string]: any; // Catch-all for any other props
+  }
+
+  // Menu components
+  export interface MenuTriggerProps extends ComponentPropsStrictChildren {}
+  export interface MenuContentProps extends ComponentPropsStrictChildren {}
+  export interface MenuItemProps extends ComponentPropsLenientChildren {}
+  export interface MenuPositionerProps extends ComponentPropsStrictChildren {}
+  export interface MenuRootProps extends ComponentPropsStrictChildren {}
+  export interface MenuCheckboxItemProps extends ComponentPropsStrictChildren {}
+  export interface MenuRadioItemGroupProps
+    extends ComponentPropsStrictChildren {}
+  export interface MenuRadioItemProps extends ComponentPropsLenientChildren {}
+
+  // Dialog components
+  export interface DialogCloseTriggerProps
+    extends ComponentPropsStrictChildren {}
+  export interface DialogContentProps extends ComponentPropsStrictChildren {}
+  export interface DialogBackdropProps extends ComponentPropsStrictChildren {}
+  export interface DialogPositionerProps extends ComponentPropsStrictChildren {}
+  export interface DialogTitleProps extends ComponentPropsLenientChildren {}
+  export interface DialogTriggerProps extends ComponentPropsStrictChildren {}
+
+  // Checkbox components
+  export interface CheckboxLabelProps extends ComponentPropsLenientChildren {}
+  export interface CheckboxControlProps extends ComponentPropsStrictChildren {}
+
+  // Radio components
+  export interface RadioGroupItemProps extends ComponentPropsStrictChildren {}
+  export interface RadioGroupItemControlProps
+    extends ComponentPropsStrictChildren {}
+  export interface RadioGroupItemTextProps
+    extends ComponentPropsLenientChildren {}
+
+  // Pagination components
+  export interface PaginationPrevTriggerProps
+    extends ComponentPropsStrictChildren {}
+  export interface PaginationNextTriggerProps
+    extends ComponentPropsStrictChildren {}
+  export interface PaginationItemsProps extends ComponentPropsStrictChildren {}
+
+  // Tabs components
+  export interface TabsTriggerProps extends ComponentPropsLenientChildren {}
+  export interface TabsContentProps extends ComponentPropsLenientChildren {}
+  export interface TabsListProps extends ComponentPropsStrictChildren {}
+
+  // Field components
+  export interface FieldLabelProps extends ComponentPropsLenientChildren {}
+  export interface FieldRootProps extends ComponentPropsLenientChildren {}
+  export interface FieldHelperTextProps extends ComponentPropsLenientChildren {}
+
+  // Common components
+  export interface ButtonProps extends ComponentPropsStrictChildren {}
+  export interface IconButtonProps extends ComponentPropsStrictChildren {}
+  export interface BoxProps extends ComponentPropsStrictChildren {}
+  export interface LinkProps extends ComponentPropsStrictChildren {}
+  export interface TextProps extends ComponentPropsStrictChildren {}
+  export interface CardProps extends ComponentPropsStrictChildren {}
+  export interface CardBodyProps extends ComponentPropsStrictChildren {}
+  export interface TextareaProps extends ComponentPropsStrictChildren {}
+}

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

@@ -12,7 +12,7 @@ import { Donation, DonationItem, FoodType } from 'types/types';
 import { formatDate } from '@utils/utils';
 
 interface DonationDetailsModalProps {
-  donation?: Donation;
+  donation: Donation;
   isOpen: boolean;
   onClose: () => void;
 }
@@ -25,7 +25,7 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
   const [loadedDonation, setLoadedDonation] = useState<Donation>();
   const [items, setItems] = useState<DonationItem[]>([]);
 
-  const donationId = donation?.donationId; // adjust if your ID field is different
+  const donationId = donation.donationId;
 
   useEffect(() => {
     if (!isOpen || !donationId) return;

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

@@ -14,20 +14,29 @@ import {
 } from '@chakra-ui/react';
 import { useState } from 'react';
 import ApiClient from '@api/apiClient';
-import { FoodTypes } from '../../types/types';
+import { FoodTypes, FoodType } from '../../types/types';
 
 interface NewDonationFormModalProps {
   onDonationSuccess: () => void;
   isOpen: boolean;
   onClose: () => void;
 }
 
+interface DonationRow {
+  id: number;
+  foodItem: string;
+  foodType: FoodType | '';
+  numItems: string;
+  ozPerItem: string;
+  valuePerItem: string;
+}
+
 const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
   onDonationSuccess,
   isOpen,
   onClose,
 }) => {
-  const [rows, setRows] = useState([
+  const [rows, setRows] = useState<DonationRow[]>([
     {
       id: 1,
       foodItem: '',
@@ -51,7 +60,7 @@ const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
     calculateTotals(updatedRows);
   };
 
-  const calculateTotals = (updatedRows: typeof rows) => {
+  const calculateTotals = (updatedRows: DonationRow[]) => {
     let totalItems = 0,
       totalOz = 0,
       totalValue = 0;
@@ -123,7 +132,7 @@ const NewDonationFormModal: React.FC<NewDonationFormModalProps> = ({
           reservedQuantity: 0,
           ozPerItem: parseFloat(row.ozPerItem),
           estimatedValue: parseFloat(row.valuePerItem),
-          foodType: row.foodType,
+          foodType: row.foodType as FoodType,
         }));
 
         await ApiClient.postMultipleDonationItems({ donationId, items });

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

@@ -311,7 +311,7 @@ const RequestDetailsModal: React.FC<RequestDetailsModalProps> = ({
                       count={orderDetailsList.length}
                       pageSize={1}
                       page={currentPage}
-                      onChange={(page) => setCurrentPage(page)}
+                      onChange={(page: number) => setCurrentPage(page)}
                     >
                       <ButtonGroup variant="outline" size="sm">
                         <Pagination.PrevTrigger asChild>

apps/frontend/src/containers/formRequests.tsx

@@ -27,7 +27,7 @@ const FormRequests: React.FC = () => {
   const newRequestDisclosure = useDisclosure();
   const previousRequestDisclosure = useDisclosure();
 
-  const [pantryId, setPantryId] = useState<number | null>(null);
+  const [pantryId, setPantryId] = useState<number>();
   const [requests, setRequests] = useState<FoodRequest[]>([]);
   const [previousRequest, setPreviousRequest] = useState<
     FoodRequest | undefined
@@ -213,7 +213,7 @@ const FormRequests: React.FC = () => {
           count={Math.ceil(requests.length / pageSize)}
           pageSize={1}
           page={currentPage}
-          onChange={(page) => setCurrentPage(page)}
+          onChange={(page: number) => setCurrentPage(page)}
         >
           <ButtonGroup variant="outline" size="sm">
             <Pagination.PrevTrigger asChild>

apps/frontend/src/containers/volunteerManagement.tsx

@@ -202,7 +202,7 @@ const VolunteerManagement: React.FC = () => {
             count={Math.ceil(filteredVolunteers.length / pageSize)}
             pageSize={1}
             page={currentPage}
-            onChange={(page) => setCurrentPage(page)}
+            onChange={(page: number) => setCurrentPage(page)}
           >
             <ButtonGroup variant="outline" size="sm">
               <Pagination.PrevTrigger asChild>

apps/frontend/tsconfig.json

@@ -14,11 +14,11 @@
       "@public/*": ["../public/*"],
       "@shared/*": ["../../../shared/*"],
       "@utils/*": ["utils/*"],
-      "@loaders/*": ["loaders/*"],
-    },
+      "@loaders/*": ["loaders/*"]
+    }
   },
   "files": [],
-  "include": [],
+  "include": ["src/chakra-ui.d.ts"],
   "references": [
     {
       "path": "./tsconfig.app.json"