diff --git a/components/BeerForm.tsx b/components/BeerForm.tsx index 0de1c57..950805d 100644 --- a/components/BeerForm.tsx +++ b/components/BeerForm.tsx @@ -49,7 +49,10 @@ const BeerForm: FunctionComponent = ({ const [error, setError] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + const onSubmit: SubmitHandler = async (data) => { + setIsSubmitting(true); switch (formType) { case 'create': { try { @@ -86,6 +89,7 @@ const BeerForm: FunctionComponent = ({ error={!!errors.name} type="text" id="name" + disabled={isSubmitting} /> {formType === 'create' && breweries.length && ( @@ -96,6 +100,7 @@ const BeerForm: FunctionComponent = ({ = ({ {errors.abv?.message} = ({ {errors.ibu?.message} = ({ = ({ = ({ /> - + {!isSubmitting && ( + + )} + + {isSubmitting && ( + + )} ); }; diff --git a/components/ui/forms/Button.tsx b/components/ui/forms/Button.tsx index 6b32a73..7f3dd8d 100644 --- a/components/ui/forms/Button.tsx +++ b/components/ui/forms/Button.tsx @@ -3,11 +3,19 @@ import { FunctionComponent } from 'react'; interface FormButtonProps { children: string; type: 'button' | 'submit' | 'reset'; + isSubmitting?: boolean; } -const Button: FunctionComponent = ({ children, type }) => ( +const Button: FunctionComponent = ({ + children, + type, + isSubmitting = false, +}) => ( // eslint-disable-next-line react/button-has-type - ); diff --git a/components/ui/forms/FormSelect.tsx b/components/ui/forms/FormSelect.tsx index 00962f8..c9685a5 100644 --- a/components/ui/forms/FormSelect.tsx +++ b/components/ui/forms/FormSelect.tsx @@ -8,6 +8,7 @@ interface FormSelectProps { error: boolean; placeholder: string; message: string; + disabled?: boolean; } /** @@ -40,6 +41,7 @@ const FormSelect: FunctionComponent = ({ formRegister, placeholder, message, + disabled = false, }) => (