Merge branch 'GREG-60_create_feedback' into 'master'

GREG-60: Adding some feedback to user when he presses submit

See merge request !90

frontend/src/routes/register/index.tsx

@@ -11,6 +11,7 @@ import StepSummary from './stepSummary'
 import StepPersonForm from './stepPersonForm'
 import { PersonFormMethods } from './personFormMethods'
 import { SummaryFormMethods } from './summaryFormMethods'
+import SubmitState from './submitState'
 
 
 const steps = ['Register', 'Summary']
@@ -35,6 +36,7 @@ export default function StepRegistration() {
   const [activeStep, setActiveStep] = useState(0)
   const personFormRef = useRef<PersonFormMethods>(null)
   const summaryStepRef = useRef<SummaryFormMethods>(null)
+  const [submitState, setSubmitState] = useState(SubmitState.NotSubmitted)
 
   const handleNext = () => {
     if (activeStep === 0) {
@@ -65,6 +67,14 @@ export default function StepRegistration() {
     history.push('/')
   }
 
+  const handleSubmitSuccess = () => {
+    setSubmitState(SubmitState.SubmitSuccess)
+  }
+
+  const handleSubmitFailure = () => {
+    setSubmitState(SubmitState.SubmitFailure)
+  }
+
   return (
     <Page header='Register as a guest'>
 
@@ -90,7 +100,8 @@ export default function StepRegistration() {
         )
         }
         {activeStep === SUMMARY_STEP && (
-          <StepSummary formData={formData} ref={summaryStepRef} />
+          <StepSummary formData={formData} onSubmitSuccess={handleSubmitSuccess} onSubmitFailure={handleSubmitFailure}
+                       ref={summaryStepRef} />
         )}
       </Box>
 
@@ -105,12 +116,14 @@ export default function StepRegistration() {
           <>
             <Button
               onClick={handleBack}
+              disabled={submitState === SubmitState.SubmitSuccess}
               sx={{ mr: 1 }}
             >
               {t('button.back')}
             </Button>
 
             <Button onClick={registerGuest}
+                    disabled={submitState === SubmitState.SubmitSuccess}
                     sx={{ mr: 1 }}
             >
               {t('button.save')}
@@ -118,7 +131,9 @@ export default function StepRegistration() {
           </>
         )}
 
-        <Button onClick={handleCancel}>
+        <Button onClick={handleCancel}
+                disabled={submitState === SubmitState.SubmitSuccess}
+        >
           {t('button.cancel')}
         </Button>
       </Box>

frontend/src/routes/register/stepSummary.tsx

-import React, { forwardRef, Ref, useEffect, useImperativeHandle } from 'react'
+import React, { forwardRef, Ref, useEffect, useImperativeHandle, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Controller, SubmitHandler, useForm } from 'react-hook-form'
 
@@ -11,17 +11,21 @@ import { postJsonOpts } from '../../utils'
 import { PersonFormMethods } from './personFormMethods'
 import useOus from '../../hooks/useOus'
 import useRoleTypes from '../../hooks/useRoleTypes'
+import { SubmitState } from './submitState'
 
 
 interface StepSummaryProperties {
   formData: RegisterFormData
+  onSubmitSuccess: () => void
+  onSubmitFailure: () => void
 }
 
 const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFormMethods>) => {
     const { i18n, t } = useTranslation(['common'])
-    const { formData } = props
+    const { formData, onSubmitSuccess, onSubmitFailure } = props
     const ous = useOus()
     const roleTypes = useRoleTypes()
+    const [submitState, setSubmitState] = useState(SubmitState.NotSubmitted)
 
     const submit: SubmitHandler<RegisterFormData> = (data) => {
       const payload = {
@@ -36,12 +40,25 @@ const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFor
       }
       console.log('submitting', JSON.stringify(payload))
       fetch('/api/ui/v1/register/', postJsonOpts(payload))
-        .then((res) => res.text())
+        .then((res) => {
+          if (!res.ok) {
+            onSubmitFailure()
+            setSubmitState(SubmitState.SubmitFailure)
+            return null
+          }
+          return res.text()
+        })
         .then((result) => {
-          console.log('result', result)
+          if (result !== null) {
+            console.log('result', result)
+            onSubmitSuccess()
+            setSubmitState(SubmitState.SubmitSuccess)
+          }
         })
         .catch((error) => {
           console.log('error', error)
+          onSubmitFailure()
+          setSubmitState(SubmitState.SubmitFailure)
         })
     }
 
@@ -180,6 +197,19 @@ const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFor
 
             </Stack>
           </form>
+
+          {/* TODO For now just showing a heading to give the user some feedback */}
+          {submitState === SubmitState.SubmitSuccess && (
+            <Box>
+              <h2>Submit success</h2>
+            </Box>
+          )}
+
+          {submitState === SubmitState.SubmitFailure && (
+            <Box>
+              <h2>Submit failure</h2>
+            </Box>
+          )}
         </Box>
       </>
     )

frontend/src/routes/register/submitState.ts

+enum SubmitState {
+  NotSubmitted,
+  SubmitSuccess,
+  SubmitFailure
+}
+
+export default SubmitState