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"