diff --git a/apps/frontend/src/app.tsx b/apps/frontend/src/app.tsx
index a388d765..95009ac2 100644
--- a/apps/frontend/src/app.tsx
+++ b/apps/frontend/src/app.tsx
@@ -151,7 +151,6 @@ const router = createBrowserRouter([
),
- action: submitFoodRequestFormModal,
},
{
path: '/donation-management',
diff --git a/apps/frontend/src/chakra-ui.d.ts b/apps/frontend/src/chakra-ui.d.ts
new file mode 100644
index 00000000..2e7b4e97
--- /dev/null
+++ b/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 {}
+}
diff --git a/apps/frontend/src/components/forms/donationDetailsModal.tsx b/apps/frontend/src/components/forms/donationDetailsModal.tsx
index 80b8d15c..a3aa1731 100644
--- a/apps/frontend/src/components/forms/donationDetailsModal.tsx
+++ b/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 = ({
const [loadedDonation, setLoadedDonation] = useState();
const [items, setItems] = useState([]);
- const donationId = donation?.donationId; // adjust if your ID field is different
+ const donationId = donation.donationId;
useEffect(() => {
if (!isOpen || !donationId) return;
diff --git a/apps/frontend/src/components/forms/newDonationFormModal.tsx b/apps/frontend/src/components/forms/newDonationFormModal.tsx
index cfc22116..11d1d9f3 100644
--- a/apps/frontend/src/components/forms/newDonationFormModal.tsx
+++ b/apps/frontend/src/components/forms/newDonationFormModal.tsx
@@ -14,7 +14,7 @@ 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;
@@ -22,12 +22,21 @@ interface NewDonationFormModalProps {
onClose: () => void;
}
+interface DonationRow {
+ id: number;
+ foodItem: string;
+ foodType: FoodType | '';
+ numItems: string;
+ ozPerItem: string;
+ valuePerItem: string;
+}
+
const NewDonationFormModal: React.FC = ({
onDonationSuccess,
isOpen,
onClose,
}) => {
- const [rows, setRows] = useState([
+ const [rows, setRows] = useState([
{
id: 1,
foodItem: '',
@@ -51,7 +60,7 @@ const NewDonationFormModal: React.FC = ({
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 = ({
reservedQuantity: 0,
ozPerItem: parseFloat(row.ozPerItem),
estimatedValue: parseFloat(row.valuePerItem),
- foodType: row.foodType,
+ foodType: row.foodType as FoodType,
}));
await ApiClient.postMultipleDonationItems({ donationId, items });
diff --git a/apps/frontend/src/components/forms/requestDetailsModal.tsx b/apps/frontend/src/components/forms/requestDetailsModal.tsx
index 5a63830d..ce31fd4c 100644
--- a/apps/frontend/src/components/forms/requestDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/requestDetailsModal.tsx
@@ -311,7 +311,7 @@ const RequestDetailsModal: React.FC = ({
count={orderDetailsList.length}
pageSize={1}
page={currentPage}
- onChange={(page) => setCurrentPage(page)}
+ onChange={(page: number) => setCurrentPage(page)}
>
diff --git a/apps/frontend/src/containers/formRequests.tsx b/apps/frontend/src/containers/formRequests.tsx
index f9d928b3..2d77ec0e 100644
--- a/apps/frontend/src/containers/formRequests.tsx
+++ b/apps/frontend/src/containers/formRequests.tsx
@@ -27,7 +27,7 @@ const FormRequests: React.FC = () => {
const newRequestDisclosure = useDisclosure();
const previousRequestDisclosure = useDisclosure();
- const [pantryId, setPantryId] = useState(null);
+ const [pantryId, setPantryId] = useState();
const [requests, setRequests] = useState([]);
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)}
>
diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index 4929767b..faea914c 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/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)}
>
diff --git a/apps/frontend/tsconfig.json b/apps/frontend/tsconfig.json
index a664b36c..138d5986 100644
--- a/apps/frontend/tsconfig.json
+++ b/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"