add isSubmitting state to BeerForm

components/BeerForm.tsx

@@ -49,7 +49,10 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
 
   const [error, setError] = useState('');
 
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   const onSubmit: SubmitHandler<BeerPostT> = async (data) => {
+    setIsSubmitting(true);
     switch (formType) {
       case 'create': {
         try {
@@ -86,6 +89,7 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
           error={!!errors.name}
           type="text"
           id="name"
+          disabled={isSubmitting}
         />
       </FormSegment>
       {formType === 'create' && breweries.length && (
@@ -96,6 +100,7 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
           </FormInfo>
           <FormSegment>
             <FormSelect
+              disabled={isSubmitting}
               formRegister={register('breweryId')}
               error={!!errors.breweryId}
               id="breweryId"
@@ -117,6 +122,7 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
             <FormError>{errors.abv?.message}</FormError>
           </FormInfo>
           <FormTextInput
+            disabled={isSubmitting}
             placeholder="12"
             formValidationSchema={register('abv', { valueAsNumber: true })}
             error={!!errors.abv}
@@ -130,6 +136,7 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
             <FormError>{errors.ibu?.message}</FormError>
           </FormInfo>
           <FormTextInput
+            disabled={isSubmitting}
             placeholder="52"
             formValidationSchema={register('ibu', { valueAsNumber: true })}
             error={!!errors.ibu}
@@ -145,6 +152,7 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
       </FormInfo>
       <FormSegment>
         <FormTextArea
+          disabled={isSubmitting}
           placeholder="Ratione cumque quas quia aut impedit ea culpa facere. Ut in sit et quas reiciendis itaque."
           error={!!errors.description}
           formValidationSchema={register('description')}
@@ -159,6 +167,7 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
       </FormInfo>
       <FormSegment>
         <FormSelect
+          disabled={isSubmitting}
           formRegister={register('typeId')}
           error={!!errors.typeId}
           id="typeId"
@@ -171,11 +180,19 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
         />
       </FormSegment>
 
-      <Button type="submit">{`${
+      {!isSubmitting && (
-        formType === 'edit'
+        <Button type="submit" isSubmitting={isSubmitting}>{`${
-          ? `Edit ${defaultValues?.name || 'beer post'}`
+          formType === 'edit'
-          : 'Create beer post'
+            ? `Edit ${defaultValues?.name || 'beer post'}`
-      } `}</Button>
+            : 'Create beer post'
+        }`}</Button>
+      )}
+
+      {isSubmitting && (
+        <Button type="submit" isSubmitting={isSubmitting}>
+          Submitting
+        </Button>
+      )}
     </form>
   );
 };

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<FormButtonProps> = ({ children, type }) => (
+const Button: FunctionComponent<FormButtonProps> = ({
+  children,
+  type,
+  isSubmitting = false,
+}) => (
   // eslint-disable-next-line react/button-has-type
-  <button type={type} className="btn-primary btn mt-4 w-full rounded-xl">
+  <button
+    type={type}
+    className={`btn btn-primary mt-4 w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
+  >
     {children}
   </button>
 );

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<FormSelectProps> = ({
   formRegister,
   placeholder,
   message,
+  disabled = false,
 }) => (
   <select
     id={id}
@@ -47,6 +49,7 @@ const FormSelect: FunctionComponent<FormSelectProps> = ({
       error ? 'select-error' : ''
     }`}
     placeholder={placeholder}
+    disabled={disabled}
     {...formRegister}
   >
     <option value="">{message}</option>

requests/sendCreateBeerPostRequest.ts

@@ -27,7 +27,7 @@ const sendCreateBeerPostRequest = async (
   const parsedPayload = beerPostQueryResultSchema.safeParse(payload);
 
   if (!parsedPayload.success) {
-    throw new Error('Invalid API response');
+    throw new Error('Invalid API response payload');
   }
 
   return parsedPayload.data;

services/BeerPost/schema/BeerPostQueryResult.ts

@@ -26,7 +26,7 @@ export const beerPostQueryResultSchema = z.object({
     id: z.string(),
     username: z.string(),
   }),
-  createdAt: z.date(),
+  createdAt: z.coerce.date(),
 });
 
 export const beerPostQueryResultArraySchema = z.array(beerPostQueryResultSchema);