Added error reporting

zefhub · May 25, 2022 · f892866 · f892866 · vercel · May 25, 2022
1 parent fb4493a
commit f892866
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 75 deletions.
diff --git a/components/FormError.tsx b/components/FormError.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { FormikErrors, FormikTouched } from "formik";
+
+export interface FormErrorProps {
+  errors: FormikErrors<any>;
+  touched: FormikTouched<any>;
+  name: string;
+  className?: string;
+}
+
+const FormError: React.FC<FormErrorProps> = (props) => {
+  if (props.errors[props.name]) {
+    return (
+      <span
+        className={`invalid-feedback text-sm text-red-500 ${props.className}`}
+      >
+        {props.errors[props.name]}
+      </span>
+    );
+  }
+
+  return null;
+};
+
+export default FormError;
diff --git a/components/Input.tsx b/components/Input.tsx
@@ -36,13 +36,15 @@ const Input: React.FC<InputProps & FieldInputProps<any>> = (props) => {
   return (
     <Fragment>
       {props.label && (
-        <label className="" htmlFor={`input-${props.name}`}>
+        <label className="mt-4" htmlFor={`input-${props.name}`}>
           {props.label}
         </label>
       )}
       <input
         className={classNames(
-          `mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ${
+          `${
+            props.label ? "mt-1" : "mt-4"
+          } block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ${
             props.className || ""
           }`,
           fieldHasError(props) ? "is-invalid" : ""
@@ -60,7 +62,9 @@ const Input: React.FC<InputProps & FieldInputProps<any>> = (props) => {
         readOnly={props.readOnly}
       />
       {fieldHasError(props) && (
-        <div className="invalid-feedback">{props.errors[props.name]}</div>
+        <div className="invalid-feedback" style={{ display: "block" }}>
+          {props.errors[props.name]}
+        </div>
       )}
     </Fragment>
   );

diff --git a/forms/AccountDetails.tsx b/forms/AccountDetails.tsx
@@ -17,12 +17,13 @@
 import { Formik, Form, Field } from "formik";
 import { useIntl } from "react-intl";
 import * as Yup from "yup";
+import FormError from "components/FormError";
 import Button from "components/Button";
 import Input from "components/Input";
 
 const validationSchema = Yup.object().shape({
-  givenName: Yup.string().required("Required"),
-  familyName: Yup.string().required("Required"),
+  givenName: Yup.string().required("Required").nullable(),
+  familyName: Yup.string().required("Required").nullable(),
 });
 
 export interface AccountDetailsFormProps {
@@ -44,30 +45,22 @@ const AccountDetails: React.FC<AccountDetailsFormProps> = (props) => {
       onSubmit={props.onSubmit}
       validationSchema={validationSchema}
     >
-      <Form className="w-full flex flex-col items-start p-5">
-        <Field
-          as={Input}
-          name="givenName"
-          type="text"
-          label="First name"
-          className="mb-4"
-        />
-        <Field
-          as={Input}
-          name="familyName"
-          type="text"
-          label="Last name"
-          className="mb-4"
-        />
-        <div className="flex flex-row justify-center w-full">
-          <Button
-            type="submit"
-            className="bg-gradient-to-br from-ikura-light to-ikura-dark text-white mt-2"
-          >
-            {intl.formatMessage({ defaultMessage: "Save" })}
-          </Button>
-        </div>
-      </Form>
+      {({ errors, touched }) => (
+        <Form className="w-full flex flex-col items-start p-5">
+          <Field as={Input} name="givenName" type="text" label="First name" />
+          <FormError name="givenName" errors={errors} touched={touched} />
+          <Field as={Input} name="familyName" type="text" label="Last name" />
+          <FormError name="familyName" errors={errors} touched={touched} />
+          <div className="flex flex-row justify-center w-full">
+            <Button
+              type="submit"
+              className="bg-gradient-to-br from-ikura-light to-ikura-dark text-white mt-6"
+            >
+              {intl.formatMessage({ defaultMessage: "Save" })}
+            </Button>
+          </div>
+        </Form>
+      )}
     </Formik>
   );
 };

diff --git a/forms/CategoryForm.tsx b/forms/CategoryForm.tsx
@@ -17,13 +17,14 @@
 import { Formik, Form, Field } from "formik";
 import { useIntl } from "react-intl";
 import * as Yup from "yup";
+import FormError from "components/FormError";
 import Input from "components/Input";
 import EmojiPicker from "components/EmojiPicker";
 import Button from "components/Button";
 
 const validationSchema = Yup.object().shape({
-  name: Yup.string().required("Required"),
-  icon: Yup.string().required("Required"),
+  name: Yup.string().required("Required").nullable(),
+  icon: Yup.string().required("Required").nullable(),
 });
 
 export interface CategoryFormProps {
@@ -45,22 +46,22 @@ const CategoryForm: React.FC<CategoryFormProps> = (props) => {
       onSubmit={props.onSubmit}
       validationSchema={validationSchema}
     >
-      <Form className="w-full flex flex-col items-start">
-        <Field
-          as={Input}
-          name="name"
-          type="text"
-          label="Name"
-          className="mb-4"
-        />
-        <Field as={EmojiPicker} name="icon" />
-        <Button
-          type="submit"
-          className="bg-gradient-to-br from-ikura-light to-ikura-dark text-white mt-2"
-        >
-          {intl.formatMessage({ defaultMessage: "Save" })}
-        </Button>
-      </Form>
+      {({ errors, touched }) => (
+        <Form className="w-full flex flex-col items-start">
+          <Field as={Input} name="name" type="text" label="Name" />
+          <FormError name="name" errors={errors} touched={touched} />
+          <div className="w-full mt-4 flex flex-col items-center">
+            <Field as={EmojiPicker} name="icon" />
+            <FormError name="icon" errors={errors} touched={touched} />
+          </div>
+          <Button
+            type="submit"
+            className="bg-gradient-to-br from-ikura-light to-ikura-dark text-white mt-2"
+          >
+            {intl.formatMessage({ defaultMessage: "Save" })}
+          </Button>
+        </Form>
+      )}
     </Formik>
   );
 };

diff --git a/forms/TransactionForm.tsx b/forms/TransactionForm.tsx
@@ -21,14 +21,15 @@ import Link from "next/link";
 import { useQuery } from "@apollo/client";
 import * as Yup from "yup";
 import { GET_CATEGORIES } from "constants/queries";
+import FormError from "components/FormError";
 import Input from "components/Input";
 import Button from "components/Button";
 import Loading from "components/Loading";
 
 const validationSchema = Yup.object().shape({
-  amount: Yup.number().required("Required"),
-  date: Yup.date().required("Required"),
-  category: Yup.string().required("Required"),
+  amount: Yup.number().required("Required").nullable(),
+  date: Yup.date().required("Required").nullable(),
+  category: Yup.string().required("Required").nullable(),
 });
 
 export interface TransactionFormProps {
@@ -68,15 +69,14 @@ const TransactionForm: React.FC<TransactionFormProps> = (props) => {
             type="number"
             placeholder="1,000"
             label="Amount"
-            className="mb-4"
           />
-          <Field
-            as={Input}
-            name="date"
-            type="date"
-            label="Date"
-            className="mb-4"
+          <FormError
+            name="amount"
+            errors={form.errors}
+            touched={form.touched}
           />
+          <Field as={Input} name="date" type="date" label="Date" />
+          <FormError name="date" errors={form.errors} touched={form.touched} />
           {!data.queryCategory.length ? (
             <div className="flex flex-row justify-center w-full">
               <Link href="/account/categories">
@@ -86,7 +86,7 @@ const TransactionForm: React.FC<TransactionFormProps> = (props) => {
               </Link>
             </div>
           ) : (
-            <div className="mb-4 w-full flex flex-col items-start">
+            <div className="mb-4 w-full flex flex-col items-start mt-4">
               <h3 className="font-semibold">Select category</h3>
               {data.queryCategory.map((category: any) => (
                 <label
@@ -102,6 +102,11 @@ const TransactionForm: React.FC<TransactionFormProps> = (props) => {
                   {category.name}
                 </label>
               ))}
+              <FormError
+                name="category"
+                errors={form.errors}
+                touched={form.touched}
+              />
             </div>
           )}
           <div className="flex flex-row justify-between w-full">

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,19 +1,3 @@
-/**
- * Copyright 2022 Synchronous Technologies Pte Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />

diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "i18n:extract": "formatjs extract 'pages/**/*.ts*' 'components/**/*.ts*' --out-file lang/en.json",
     "i18n:compile": "formatjs compile-folder lang compiled-lang",
     "cdk": "cdk",
-    "addlicense": "addlicense -c 'Synchronous Technologies Pte Ltd' -l apache -ignore 'node_modules/**' -ignore '.next/**' -ignore 'compiled-lang/**' -ignore 'lang/**' ."
+    "addlicense": "addlicense -c 'Synchronous Technologies Pte Ltd' -l apache -ignore 'node_modules/**' -ignore '.next/**' -ignore 'compiled-lang/**' -ignore 'lang/**' -ingore 'next-env.d.ts' ."
   },
   "dependencies": {
     "@apollo/client": "^3.5.10",