From e4724decb136305c998fe78cbe81cc0b752eb076 Mon Sep 17 00:00:00 2001 From: Justine Date: Wed, 3 Feb 2021 14:55:40 +0100 Subject: [PATCH 01/10] removed useless import in Show --- templates/next/components/foo/Show.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/templates/next/components/foo/Show.tsx b/templates/next/components/foo/Show.tsx index a7259124..33c6cf44 100644 --- a/templates/next/components/foo/Show.tsx +++ b/templates/next/components/foo/Show.tsx @@ -3,7 +3,6 @@ import Link from 'next/link'; import Head from "next/head"; import { useRouter } from "next/router"; import { fetch } from "../../utils/dataAccess"; -import { ReferenceLinks } from '../common/ReferenceLinks'; import { {{{ucf}}} } from '../../types/{{{ucf}}}'; interface Props { From 9d25c681cf95264e4f0fe8b0849c959205227743 Mon Sep 17 00:00:00 2001 From: Justine Date: Tue, 9 Feb 2021 10:13:28 +0100 Subject: [PATCH 02/10] display api error for each fields --- templates/next/components/foo/Form.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/templates/next/components/foo/Form.tsx b/templates/next/components/foo/Form.tsx index 40945da0..4f687e2b 100644 --- a/templates/next/components/foo/Form.tsx +++ b/templates/next/components/foo/Form.tsx @@ -59,6 +59,13 @@ export const Form: FunctionComponent = ({ {{{lc}}} }) => { isValid: false, msg: `Error when ${isCreation ? 'creating': 'updating'} the resource.`, }); + const fieldErrors = Object.keys(error.errors).filter( + (key) => key !== "_error"); + const apiErrorsMsg = {}; + fieldErrors.forEach((key) => { + apiErrorsMsg[key] = error.errors[key]; + }); + setErrors(apiErrorsMsg); } setSubmitting(false); }} @@ -91,7 +98,7 @@ export const Form: FunctionComponent = ({ {{{lc}}} }) => { onBlur={handleBlur} /> - { errors.{{name}} && touched.{{name}} &&
{ errors.{{name}} }
} + { errors.{{name}} && touched.{{name}} &&
{ errors.{{name}} }
} {{/each}} {status && status.msg && ( From a97b277990fbd99bd8184cce8d6a9bd547caaf67 Mon Sep 17 00:00:00 2001 From: Justine Date: Tue, 9 Feb 2021 15:15:48 +0100 Subject: [PATCH 03/10] refacto with reduce --- templates/next/components/foo/Form.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/templates/next/components/foo/Form.tsx b/templates/next/components/foo/Form.tsx index 4f687e2b..68402448 100644 --- a/templates/next/components/foo/Form.tsx +++ b/templates/next/components/foo/Form.tsx @@ -59,12 +59,12 @@ export const Form: FunctionComponent = ({ {{{lc}}} }) => { isValid: false, msg: `Error when ${isCreation ? 'creating': 'updating'} the resource.`, }); - const fieldErrors = Object.keys(error.errors).filter( - (key) => key !== "_error"); - const apiErrorsMsg = {}; - fieldErrors.forEach((key) => { - apiErrorsMsg[key] = error.errors[key]; - }); + const apiErrorsMsg = Object.keys(error.errors) + .filter((key) => key !== "_error") + .reduce((errors, errorKey) => { + errors[errorKey] = error.errors[errorKey]; + return errors; + }, {}); setErrors(apiErrorsMsg); } setSubmitting(false); From ca2d6a243421a8104f465126ee241f988770cf89 Mon Sep 17 00:00:00 2001 From: Justine Date: Thu, 18 Feb 2021 09:40:39 +0100 Subject: [PATCH 04/10] reverted ReferenceLinks import suppression --- templates/next/components/foo/Show.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/templates/next/components/foo/Show.tsx b/templates/next/components/foo/Show.tsx index 33c6cf44..a7259124 100644 --- a/templates/next/components/foo/Show.tsx +++ b/templates/next/components/foo/Show.tsx @@ -3,6 +3,7 @@ import Link from 'next/link'; import Head from "next/head"; import { useRouter } from "next/router"; import { fetch } from "../../utils/dataAccess"; +import { ReferenceLinks } from '../common/ReferenceLinks'; import { {{{ucf}}} } from '../../types/{{{ucf}}}'; interface Props { From 54f3ef572748ac95a119eefe6f2dcf5899e51d20 Mon Sep 17 00:00:00 2001 From: Justine Date: Thu, 18 Feb 2021 17:41:45 +0100 Subject: [PATCH 05/10] removed useless SubmissionError class, set errors Formik compatible in dataAccess.ts --- templates/next/components/foo/Form.tsx | 8 +------- templates/next/error/SubmissionError.ts | 16 ---------------- templates/next/utils/dataAccess.ts | 9 ++++++--- 3 files changed, 7 insertions(+), 26 deletions(-) delete mode 100644 templates/next/error/SubmissionError.ts diff --git a/templates/next/components/foo/Form.tsx b/templates/next/components/foo/Form.tsx index 68402448..af1d9537 100644 --- a/templates/next/components/foo/Form.tsx +++ b/templates/next/components/foo/Form.tsx @@ -59,13 +59,7 @@ export const Form: FunctionComponent = ({ {{{lc}}} }) => { isValid: false, msg: `Error when ${isCreation ? 'creating': 'updating'} the resource.`, }); - const apiErrorsMsg = Object.keys(error.errors) - .filter((key) => key !== "_error") - .reduce((errors, errorKey) => { - errors[errorKey] = error.errors[errorKey]; - return errors; - }, {}); - setErrors(apiErrorsMsg); + setErrors(error); } setSubmitting(false); }} diff --git a/templates/next/error/SubmissionError.ts b/templates/next/error/SubmissionError.ts deleted file mode 100644 index c84e3381..00000000 --- a/templates/next/error/SubmissionError.ts +++ /dev/null @@ -1,16 +0,0 @@ -export interface SubmissionErrorList { - [key: string]: string; -} - -export class SubmissionError extends Error { - public errors: SubmissionErrorList; - - constructor(errors: SubmissionErrorList) { - super("Submit Validation Failed"); - this.errors = errors; - Error.captureStackTrace(this, this.constructor); - this.name = this.constructor.name; - - return this; - } -} diff --git a/templates/next/utils/dataAccess.ts b/templates/next/utils/dataAccess.ts index 9f43e851..f81b71c0 100644 --- a/templates/next/utils/dataAccess.ts +++ b/templates/next/utils/dataAccess.ts @@ -3,7 +3,6 @@ import has from "lodash/has"; import mapValues from "lodash/mapValues"; import isomorphicFetch from "isomorphic-unfetch"; import { ENTRYPOINT } from "../config/entrypoint"; -import { SubmissionError, SubmissionErrorList } from "../error/SubmissionError"; const MIME_TYPE = "application/ld+json"; @@ -12,6 +11,10 @@ interface Violation { propertyPath: string; } +interface SubmissionErrorList { + [key: string]: string; +} + export const fetch = async (id: string, init: RequestInit = {}) => { if (typeof init.headers === "undefined") init.headers = {}; if (!init.headers.hasOwnProperty("Accept")) @@ -32,13 +35,13 @@ export const fetch = async (id: string, init: RequestInit = {}) => { const error = json["{{{hydraPrefix}}}description"] || resp.statusText; if (!json.violations) throw Error(error); - const errors: SubmissionErrorList = { _error: error }; + const errors: SubmissionErrorList = { error }; json.violations.map( (violation: Violation) => (errors[violation.propertyPath] = violation.message) ); - throw new SubmissionError(errors); + throw errors; }; export const normalize = (data: any) => { From 2b6b05b760c199fd4ceaa6d3658c8a78b82681b0 Mon Sep 17 00:00:00 2001 From: Justine Date: Thu, 11 Mar 2021 10:39:25 +0100 Subject: [PATCH 06/10] tests passed --- src/generators/NextGenerator.js | 6 ------ src/generators/NextGenerator.test.js | 1 - 2 files changed, 7 deletions(-) diff --git a/src/generators/NextGenerator.js b/src/generators/NextGenerator.js index 49f078d4..588853e9 100644 --- a/src/generators/NextGenerator.js +++ b/src/generators/NextGenerator.js @@ -13,9 +13,6 @@ export default class NextGenerator extends BaseGenerator { "components/foo/Show.tsx", "components/foo/Form.tsx", - // interfaces - "error/SubmissionError.ts", - // types "types/Collection.ts", "types/foo.ts", @@ -92,9 +89,6 @@ export default class NextGenerator extends BaseGenerator { // components "components/common/ReferenceLinks.tsx", - // error - "error/SubmissionError.ts", - // types "types/Collection.ts", diff --git a/src/generators/NextGenerator.test.js b/src/generators/NextGenerator.test.js index 4bdaae67..474feb78 100644 --- a/src/generators/NextGenerator.test.js +++ b/src/generators/NextGenerator.test.js @@ -44,7 +44,6 @@ describe("generate", () => { "/components/abc/Show.tsx", "/components/abc/Form.tsx", "/components/common/ReferenceLinks.tsx", - "/error/SubmissionError.ts", "/types/Abc.ts", "/types/Collection.ts", "/pages/abcs/[id]/index.tsx", From e0aaab32f8594e65c363f081b3ec007730f611b0 Mon Sep 17 00:00:00 2001 From: Justine Date: Thu, 11 Mar 2021 15:30:01 +0100 Subject: [PATCH 07/10] simplified errors --- templates/next/components/foo/Form.tsx | 8 ++++---- templates/next/utils/dataAccess.ts | 21 +++++---------------- 2 files changed, 9 insertions(+), 20 deletions(-) diff --git a/templates/next/components/foo/Form.tsx b/templates/next/components/foo/Form.tsx index af1d9537..de80e629 100644 --- a/templates/next/components/foo/Form.tsx +++ b/templates/next/components/foo/Form.tsx @@ -21,7 +21,7 @@ export const Form: FunctionComponent = ({ {{{lc}}} }) => { await fetch({{{lc}}}['@id'], { method: "DELETE" }); router.push("/{{{name}}}"); } catch (error) { - setError("Error when deleting the resource."); + setError(`Error when deleting the resource: ${error}`); console.error(error); } }; @@ -42,7 +42,7 @@ export const Form: FunctionComponent = ({ {{{lc}}} }) => { // add your validation logic here return errors; }} - onSubmit={async (values, { setSubmitting, setStatus }) => { + onSubmit={async (values, { setSubmitting, setStatus, setErrors }) => { const isCreation = !values["@id"]; try { await fetch(isCreation ? "/{{{name}}}" : values["@id"], { @@ -57,9 +57,9 @@ export const Form: FunctionComponent = ({ {{{lc}}} }) => { } catch (error) { setStatus({ isValid: false, - msg: `Error when ${isCreation ? 'creating': 'updating'} the resource.`, + msg: `Error when ${isCreation ? 'creating': 'updating'} the resource: ${error.status}`, }); - setErrors(error); + setErrors(error.fields); } setSubmitting(false); }} diff --git a/templates/next/utils/dataAccess.ts b/templates/next/utils/dataAccess.ts index f81b71c0..767e18c5 100644 --- a/templates/next/utils/dataAccess.ts +++ b/templates/next/utils/dataAccess.ts @@ -6,15 +6,6 @@ import { ENTRYPOINT } from "../config/entrypoint"; const MIME_TYPE = "application/ld+json"; -interface Violation { - message: string; - propertyPath: string; -} - -interface SubmissionErrorList { - [key: string]: string; -} - export const fetch = async (id: string, init: RequestInit = {}) => { if (typeof init.headers === "undefined") init.headers = {}; if (!init.headers.hasOwnProperty("Accept")) @@ -32,16 +23,14 @@ export const fetch = async (id: string, init: RequestInit = {}) => { const json = await resp.json(); if (resp.ok) return normalize(json); - const error = json["{{{hydraPrefix}}}description"] || resp.statusText; - if (!json.violations) throw Error(error); - - const errors: SubmissionErrorList = { error }; + const status = json["hydra:description"] || resp.statusText; + if (!json.violations) throw Error(status); + const fields = {}; json.violations.map( - (violation: Violation) => - (errors[violation.propertyPath] = violation.message) + (violation) => (fields[violation.propertyPath] = violation.message) ); - throw errors; + throw { status, fields }; }; export const normalize = (data: any) => { From db59938e6e02bb846cb9790f0e2e8b93ba1bb9e8 Mon Sep 17 00:00:00 2001 From: Justine Date: Fri, 12 Mar 2021 14:02:51 +0100 Subject: [PATCH 08/10] added ErrorMessage component --- templates/next/components/foo/Form.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/templates/next/components/foo/Form.tsx b/templates/next/components/foo/Form.tsx index de80e629..42fd1c01 100644 --- a/templates/next/components/foo/Form.tsx +++ b/templates/next/components/foo/Form.tsx @@ -2,7 +2,7 @@ import { FunctionComponent, useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import Head from "next/head"; -import { Formik } from "formik"; +import { ErrorMessage, Formik } from "formik"; import { fetch } from "../../utils/dataAccess"; import { {{{ucf}}} } from '../../types/{{{ucf}}}'; @@ -92,7 +92,11 @@ export const Form: FunctionComponent = ({ {{{lc}}} }) => { onBlur={handleBlur} /> - { errors.{{name}} && touched.{{name}} &&
{ errors.{{name}} }
} + {{/each}} {status && status.msg && ( @@ -106,12 +110,6 @@ export const Form: FunctionComponent = ({ {{{lc}}} }) => { )} - {error && ( -
- {error} -
- )} -