Merge pull request #234 from scientist-softserv/239-disable-button

239 page loading after request creation + disable button

Author: summer-cook

pages/requests/new/[ware].js

@@ -58,6 +58,8 @@ const NewRequest = () => {
   const [formData, setFormData] = useState(initialFormData)
   const [createRequestError, setCreateRequestError] = useState(undefined)
   const [createdRequestUUID, setCreatedRequestUUID] = useState(undefined)
+  const [buttonDisabled, setButtonDisabled] = useState(false)
+  const [formSubmitting, setFormSubmitting] = useState(false)
 
   /**
    * @param {object} event onChange event
@@ -80,13 +82,15 @@ const NewRequest = () => {
   }
 
   const handleSubmit = async (event) => {
+    setButtonDisabled(true)
     if (!event.formData) {
       // these steps are needed for requests without a dynamic form
       // but error on the event resulting from the react json form
       event.preventDefault()
       event.stopPropagation()
       setValidated(true)
     }
+    setFormSubmitting(true)
 
     if (requestForm.billingSameAsShipping === true) Object.assign(requestForm.billing, requestForm.shipping)
 
@@ -110,7 +114,7 @@ const NewRequest = () => {
   }, [createdRequestUUID])
 
   // TODO(alishaevn): use react bs placeholder component
-  if (isLoadingInitialRequest || !wareID) return <Loading wrapperClass='item-page mt-5' />
+  if (isLoadingInitialRequest || !wareID || formSubmitting) return <Loading wrapperClass='item-page mt-5' />
 
   if (!session) {
     return (
@@ -165,6 +169,7 @@ const NewRequest = () => {
             defaultRequiredDate={oneWeekFromNow}
             requestForm={requestForm}
             updateRequestForm={updateRequestForm}
+            buttonDisabled={buttonDisabled}
           />
         </Form>
       ) : (
@@ -179,40 +184,44 @@ const NewRequest = () => {
             defaultRequiredDate={oneWeekFromNow}
             requestForm={requestForm}
             updateRequestForm={updateRequestForm}
+            buttonDisabled={buttonDisabled}
           />
         </BsForm>
       )}
     </div>
   )
 }
 
-const StandardRequestOptions = ({ defaultRequiredDate, requestForm, updateRequestForm, }) => (
-  <>
-    <div className='row'>
-      <div className='col'>
-        <ShippingDetails
-          backgroundColor={requestFormHeaderBg}
-          billingCountry={requestForm.billing.country}
-          shippingCountry={requestForm.shipping.country}
-          updateRequestForm={updateRequestForm}
-        />
-      </div>
-      <div className='col'>
-        <AdditionalInfo
-          updateRequestForm={updateRequestForm}
-          defaultRequiredDate={defaultRequiredDate}
-          backgroundColor={requestFormHeaderBg}
-        />
+const StandardRequestOptions = ({ buttonDisabled, defaultRequiredDate, requestForm, updateRequestForm, }) => {
+  return (
+    <>
+      <div className='row'>
+        <div className='col'>
+          <ShippingDetails
+            backgroundColor={requestFormHeaderBg}
+            billingCountry={requestForm.billing.country}
+            shippingCountry={requestForm.shipping.country}
+            updateRequestForm={updateRequestForm}
+          />
+        </div>
+        <div className='col'>
+          <AdditionalInfo
+            updateRequestForm={updateRequestForm}
+            defaultRequiredDate={defaultRequiredDate}
+            backgroundColor={requestFormHeaderBg}
+          />
+        </div>
       </div>
-    </div>
-    <Button
-      addClass='btn btn-primary my-4 ms-auto d-block'
-      backgroundColor={buttonBg}
-      label='Initiate Request'
-      type='submit'
-      size='large'
-    />
-  </>
-)
+      <Button
+        addClass='btn btn-primary my-4 ms-auto d-block'
+        backgroundColor={buttonBg}
+        disabled={buttonDisabled}
+        label='Initiate Request'
+        type='submit'
+        size='large'
+      />
+    </>
+  )
+}
 
 export default NewRequest