Moving submit logic out of summary step component

frontend/src/routes/register/index.tsx

@@ -5,15 +5,22 @@ import { Box, Button } from '@mui/material'
 import Page from 'components/page'
 
 import { useHistory } from 'react-router-dom'
+import format from 'date-fns/format'
 import { RegisterFormData } from './formData'
 import StepSummary from './stepSummary'
 import StepPersonForm from './stepPersonForm'
 import { PersonFormMethods } from './personFormMethods'
-import { SummaryFormMethods } from './summaryFormMethods'
 import SubmitState from './submitState'
 import SponsorGuestButtons from '../components/sponsorGuestButtons'
+import { postJsonOpts } from '../../utils'
 
 
+/**
+ *
+ * This component controls the invite process where the sponsor
+ * enters the initial information about a guest.
+ *
+ */
 export default function StepRegistration() {
   const { t } = useTranslation(['common'])
   const [formData, setFormData] = useState<RegisterFormData>({
@@ -32,9 +39,9 @@ export default function StepRegistration() {
   const SUMMARY_STEP = 1
   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) {
       if (personFormRef.current) {
@@ -46,9 +53,38 @@ export default function StepRegistration() {
   }
 
   const registerGuest = () => {
-    if (summaryStepRef.current) {
-      summaryStepRef.current.doSubmit()
+    const payload = {
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      email: formData.email,
+      role: {
+        type: formData.role_type,
+        start_date: formData.role_start === null ? null : format(formData.role_start as Date, 'yyyy-MM-dd'),
+        end_date: formData.role_end === null ? null : format(formData.role_end as Date, 'yyyy-MM-dd'),
+        comments: formData.comment,
+        orgunit_id: formData.ou_id,
+      },
     }
+
+    console.log('submitting', JSON.stringify(payload))
+    fetch('/api/ui/v1/invite/', postJsonOpts(payload))
+      .then((res) => {
+        if (!res.ok) {
+          setSubmitState(SubmitState.SubmitFailure)
+          return null
+        }
+        return res.text()
+      })
+      .then((result) => {
+        if (result !== null) {
+          console.log('result', result)
+          setSubmitState(SubmitState.SubmitSuccess)
+        }
+      })
+      .catch((error) => {
+        console.log('error', error)
+        setSubmitState(SubmitState.SubmitFailure)
+      })
   }
 
   const handleBack = () => {
@@ -66,14 +102,6 @@ export default function StepRegistration() {
     history.push('/')
   }
 
-  const handleSubmitSuccess = () => {
-    setSubmitState(SubmitState.SubmitSuccess)
-  }
-
-  const handleSubmitFailure = () => {
-    setSubmitState(SubmitState.SubmitFailure)
-  }
-
   return (
     <Page>
       <SponsorGuestButtons registerNewGuestActive />
@@ -89,9 +117,6 @@ export default function StepRegistration() {
         {activeStep === SUMMARY_STEP && (
           <StepSummary
             formData={formData}
-            onSubmitSuccess={handleSubmitSuccess}
-            onSubmitFailure={handleSubmitFailure}
-            ref={summaryStepRef}
           />
         )}
       </Box>
@@ -132,6 +157,20 @@ export default function StepRegistration() {
           {t('button.cancel')}
         </Button>
       </Box>
+
+      {/* TODO For now just showing a heading to give the user some feedback. Should probably go to a different page on success */}
+      {submitState === SubmitState.SubmitSuccess && (
+        <Box>
+          <h2>Submit success</h2>
+        </Box>
+      )}
+
+      {submitState === SubmitState.SubmitFailure && (
+        <Box>
+          <h2>Submit failure</h2>
+        </Box>
+      )}
+
     </Page>
   )
 }

frontend/src/routes/register/stepSummary.tsx

-import React, { forwardRef, Ref, useImperativeHandle, useState } from 'react'
+import React, { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -14,69 +14,19 @@ import {
 import format from 'date-fns/format'
 import i18n from 'i18next'
 import { RegisterFormData } from './formData'
-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 StepSummary = forwardRef((props: StepSummaryProperties) => {
     const { t } = useTranslation(['common'])
-    const { formData, onSubmitSuccess, onSubmitFailure } = props
+    const { formData } = props
     const ous = useOus()
     const roleTypes = useRoleTypes()
-    const [submitState, setSubmitState] = useState(SubmitState.NotSubmitted)
-
-    const submit = () => {
-      const payload = {
-        first_name: formData.first_name,
-        last_name: formData.last_name,
-        email: formData.email,
-        role: {
-          type: formData.role_type,
-          start_date: formData.role_start === null ? null : format(formData.role_start as Date, 'yyyy-MM-dd'),
-          end_date: formData.role_end === null ? null : format(formData.role_end as Date, 'yyyy-MM-dd'),
-          comments: formData.comment,
-          orgunit_id: formData.ou_id,
-        },
-      }
-
-      console.log('submitting', JSON.stringify(payload))
-      fetch('/api/ui/v1/invite/', postJsonOpts(payload))
-        .then((res) => {
-          if (!res.ok) {
-            onSubmitFailure()
-            setSubmitState(SubmitState.SubmitFailure)
-            return null
-          }
-          return res.text()
-        })
-        .then((result) => {
-          if (result !== null) {
-            console.log('result', result)
-            onSubmitSuccess()
-            setSubmitState(SubmitState.SubmitSuccess)
-          }
-        })
-        .catch((error) => {
-          console.log('error', error)
-          onSubmitFailure()
-          setSubmitState(SubmitState.SubmitFailure)
-        })
-    }
-
-    function doSubmit() {
-      return submit()
-    }
-
-    useImperativeHandle(ref, () => ({ doSubmit }))
 
     const selectedOus = ous.find((value) => value.id === formData.ou_id)
     const ousName = selectedOus === undefined ? '' : (`${i18n.language === 'en' ? selectedOus.en : selectedOus.nb} (${selectedOus.id})`)
@@ -149,19 +99,6 @@ const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFor
               </TableRow>
             </TableBody>
           </Table>
-
-          {/* 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/summaryFormMethods.ts

-export interface SummaryFormMethods {
-  doSubmit: () => Promise<void>
-}