diff --git a/apps/frontend/src/components/forms/requestFormModal.tsx b/apps/frontend/src/components/forms/requestFormModal.tsx index 1e1d1ad3..81e065cb 100644 --- a/apps/frontend/src/components/forms/requestFormModal.tsx +++ b/apps/frontend/src/components/forms/requestFormModal.tsx @@ -20,6 +20,7 @@ import { ChevronDownIcon } from 'lucide-react'; import { FloatingAlert } from '@components/floatingAlert'; import apiClient from '@api/apiClient'; import { TagGroup } from './tagGroup'; +import { useAlert } from '../../hooks/alert'; interface FoodRequestFormModalProps { previousRequest?: FoodRequest; @@ -39,28 +40,26 @@ const FoodRequestFormModal: React.FC = ({ const [selectedFoodTypes, setSelectedFoodTypes] = useState([]); const [requestedSize, setRequestedSize] = useState(''); const [additionalNotes, setAdditionalNotes] = useState(''); - const [alert, setAlert] = useState<{ - key: number; - isError: boolean; - message: string; - }>({ - key: 0, - isError: true, - message: '', - }); + const [errorAlertState, setErrorMessage] = useAlert(); + const [successAlertState, setSuccessMessage] = useAlert(); const isFormValid = requestedSize !== '' && selectedFoodTypes.length > 0; useEffect(() => { - if (isOpen && previousRequest) { - setSelectedFoodTypes(previousRequest.requestedFoodTypes || []); - setRequestedSize(previousRequest.requestedSize || ''); - setAdditionalNotes( - previousRequest.additionalInformation || - 'No additional information supplied', - ); + if (isOpen) { + if (previousRequest) { + setSelectedFoodTypes(previousRequest.requestedFoodTypes || []); + setRequestedSize(previousRequest.requestedSize || ''); + setAdditionalNotes(previousRequest.additionalInformation || ''); + } else { + setSelectedFoodTypes([]); + setRequestedSize(''); + setAdditionalNotes(''); + } + setErrorMessage(''); + setSuccessMessage(''); } - }, [isOpen, previousRequest]); + }, [isOpen, previousRequest, setErrorMessage, setSuccessMessage]); const handleSubmit = async () => { const foodRequestData: CreateFoodRequestBody = { @@ -72,19 +71,11 @@ const FoodRequestFormModal: React.FC = ({ try { await apiClient.createFoodRequest(foodRequestData); - setAlert((prev) => ({ - key: prev.key + 1, - isError: false, - message: 'Request submitted', - })); + setSuccessMessage('Request submitted'); onClose(); onSuccess(); } catch { - setAlert((prev) => ({ - key: prev.key + 1, - isError: true, - message: 'Request could not be submitted.', - })); + setErrorMessage('Request could not be submitted.'); } }; @@ -97,18 +88,18 @@ const FoodRequestFormModal: React.FC = ({ }} closeOnInteractOutside > - {alert.message && alert.isError && ( + {errorAlertState && ( )} - {alert.message && !alert.isError && ( + {successAlertState && ( @@ -290,11 +281,7 @@ const FoodRequestFormModal: React.FC = ({ if (words.length <= 250) { setAdditionalNotes(e.target.value); } else { - setAlert((prev) => ({ - key: prev.key + 1, - isError: true, - message: 'Exceeded word limit', - })); + setErrorMessage('Exceeded word limit'); } }} />