Retool form post so error response doesn't get lost. Display error on…

… Error page.

src/apis/StFrancisRescue.js

@@ -73,27 +73,35 @@ const StFrancisRescue = (function() {
    *   jwt (optional)    - JWT token if the request need authentication
    *
    */
-  function post(url, body, jwt) {
+  async function post(url, body, jwt) {
     const headers = {
       Authorization: `Basic ${jwt}`,
       accept: 'application/json',
     }
 
     log('REQUEST  :=', url)
 
-    return fetch(url, { method: 'POST', headers, body, redirect: 'manual' })
-      .then(checkFetchResponseOK)
-      .then(response =>
-        response.type === 'opaqueredirect' ? '' : response.json()
-      )
-      .then(data => {
+    try {
+      const response = await fetch(url, { method: 'POST', headers, body, redirect: 'manual' })
+      if (response.type === 'opaqueredirect') {
+        log('RESPONSE :=')
+      }
+      else {
+        if (!response.ok) {
+          const errorText = await response.text()
+          console.error(response)
+          throw Error(errorText)
+        }
+
+        const data = await response.json()
         log('RESPONSE :=', data)
         return data
-      })
-      .catch(error => {
-        log('ERROR :=', error)
-        throw error
-      })
+      }
+    }
+    catch (error) {
+      log('ERROR :=', error)
+      throw error
+    }
   }
 
   return {

src/components/Error.js

@@ -1,21 +1,25 @@
 import React from 'react'
 import StandardLayout from './StandardLayout'
 import ErrorImage from '../assets/images/error-lolcat-problemz.jpg'
+import { useLocation } from 'react-router-dom'
 
-const Error = () => (
-  <>
-    <h1>An Error Has Occurred</h1>
+export default function Error() {
+  const { state } = useLocation()
+  return (
+    <>
+      <h1>An Error Has Occurred</h1>
 
-    <p>Well this is embarrassing, we're working on it right meow!</p>
+      <p>Well this is embarrassing, we're working on it right meow!</p>
 
-    <img alt="" src={ErrorImage} />
-  </>
-)
+      <img alt="" src={ErrorImage} />
+
+      <p style={{ marginTop: 30 }}>Error: {state.message}</p>
+    </>
+  )
+}
 
 export const ErrorPage = () => (
   <StandardLayout>
     <Error />
   </StandardLayout>
 )
-
-export default Error

src/components/StandardForm.js

@@ -24,8 +24,8 @@ const StandardForm = ({
       setSubmitDisabled(true)
       await StFrancisRescue.postForm(event, excludeList)
       navigate(nextPage)
-    } catch {
-      navigate('/error')
+    } catch(error) {
+      navigate('/error', { state: error })
     }
   }