From 1194e19c84ff42580a377a2a6aee9065319099cd Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Mon, 13 Dec 2021 11:16:28 +0100
Subject: [PATCH] GREG-139: Adding error message if the submit failed
---
frontend/src/routes/guest/register/index.tsx | 26 +++++++++++++++++---
1 file changed, 22 insertions(+), 4 deletions(-)
diff --git a/frontend/src/routes/guest/register/index.tsx b/frontend/src/routes/guest/register/index.tsx
index 7cf5a503..cd2d443f 100644
--- a/frontend/src/routes/guest/register/index.tsx
+++ b/frontend/src/routes/guest/register/index.tsx
@@ -76,7 +76,6 @@ export default function GuestRegister() {
const guestRegisterRef = useRef<GuestRegisterCallableMethods>(null)
const guestConsentRef = useRef<GuestRegisterCallableMethods>(null)
- // TODO On submit successful the user should be directed to some page telling
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [submitState, setSubmitState] = useState<SubmitState>(
SubmitState.NotSubmitted
@@ -92,6 +91,8 @@ export default function GuestRegister() {
useState<GuestConsentData | null>(null)
const [fetchInvitationDataError, setFetchInvitationDataError] =
useState<ErrorReportProps | null>(null)
+ const [submitGuestDataError, setSubmitGuestDataError] =
+ useState<ErrorReportProps | null>(null)
const fetchInvitationData = async () => {
const response = await fetch('/api/ui/v1/invited/', fetchJsonOpts())
@@ -288,11 +289,12 @@ export default function GuestRegister() {
setSubmitState(SubmitState.Submitted)
setActiveStep(Step.SuccessStep)
} else {
- // Expect that the error will contain some JSON-data in the body
+ // Expect that the error will contain JSON-data in the body
+ // and that there will be a code field there
response
.json()
.then((errorData) => {
- setFetchInvitationDataError({
+ setSubmitGuestDataError({
errorHeading: t('error.guestRegistrationFailed'),
statusCode: response.status,
statusText: response.statusText,
@@ -304,7 +306,7 @@ export default function GuestRegister() {
// Probably some unknown data in the body, create an error message
// using the rest of the information in the response
- setFetchInvitationDataError({
+ setSubmitGuestDataError({
errorHeading: t('error.guestRegistrationFailed'),
statusCode: response.status,
statusText: response.statusText,
@@ -317,6 +319,13 @@ export default function GuestRegister() {
}
})
.catch((error) => {
+ // Something went wrong before/during the backend was called
+ setSubmitGuestDataError({
+ errorHeading: t('error.guestRegistrationFailed'),
+ statusCode: undefined,
+ statusText: undefined,
+ errorBodyText: undefined,
+ })
setSubmitState(SubmitState.SubmittedError)
console.error(error)
})
@@ -433,6 +442,15 @@ export default function GuestRegister() {
errorBodyText={fetchInvitationDataError?.errorBodyText}
/>
)}
+
+ {submitGuestDataError !== null && (
+ <ServerErrorReport
+ errorHeading={submitGuestDataError?.errorHeading}
+ statusCode={submitGuestDataError?.statusCode}
+ statusText={submitGuestDataError?.statusText}
+ errorBodyText={submitGuestDataError?.errorBodyText}
+ />
+ )}
</Page>
)
}
--
GitLab