diff --git a/frontend/src/routes/register/index.tsx b/frontend/src/routes/register/index.tsx index 470d2e8f4ee23ca84fb401e3ff2dde68e44a6209..4a92ee1b394647eca99a8e2acb6b834639e5ab23 100644 --- a/frontend/src/routes/register/index.tsx +++ b/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> diff --git a/frontend/src/routes/register/stepSummary.tsx b/frontend/src/routes/register/stepSummary.tsx index b855da2825aaaf1e5d5def4a9cd8166d88e71678..aa63ef3509e920a0c7aa56a8fa2fb5c41df0858a 100644 --- a/frontend/src/routes/register/stepSummary.tsx +++ b/frontend/src/routes/register/stepSummary.tsx @@ -1,4 +1,4 @@ -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> </> ) diff --git a/frontend/src/routes/register/submitState.ts b/frontend/src/routes/register/submitState.ts new file mode 100644 index 0000000000000000000000000000000000000000..e0bdda9fff21cc73db52924ecb1d76219cc72e4f --- /dev/null +++ b/frontend/src/routes/register/submitState.ts @@ -0,0 +1,7 @@ +enum SubmitState { + NotSubmitted, + SubmitSuccess, + SubmitFailure +} + +export default SubmitState