From 7feb34cc668bfc05650ffb860baf39aabbcacdc5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 13 Jul 2020 14:11:22 +0200
Subject: [PATCH] live inline validation and error output for all fields

---
 src/components/atoms/Input/index.module.css  | 10 ++++++++++
 src/components/atoms/Input/index.tsx         | 21 +++++++-------------
 src/components/pages/Publish/PublishForm.tsx | 18 +++++++++++++----
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/components/atoms/Input/index.module.css b/src/components/atoms/Input/index.module.css
index 534f26f50..a7e4c5b1f 100644
--- a/src/components/atoms/Input/index.module.css
+++ b/src/components/atoms/Input/index.module.css
@@ -1,7 +1,17 @@
 .field {
   margin-bottom: var(--spacer);
+  position: relative;
 }
 
 .field .field {
   margin-bottom: calc(var(--spacer) / 2);
 }
+
+.error {
+  font-size: var(--font-size-small);
+  color: var(--brand-alert-red);
+  position: absolute;
+  text-align: right;
+  right: 0;
+  top: 0;
+}
diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx
index 53e6151f6..de90db895 100644
--- a/src/components/atoms/Input/index.tsx
+++ b/src/components/atoms/Input/index.tsx
@@ -3,6 +3,7 @@ import InputElement from './InputElement'
 import Help from './Help'
 import Label from './Label'
 import styles from './index.module.css'
+import { ErrorMessage } from 'formik'
 
 export interface InputProps {
   name: string
@@ -35,15 +36,8 @@ export interface InputProps {
   }
 }
 
-export default function Input(props: InputProps): ReactElement {
-  const {
-    required,
-    name,
-    label,
-    help,
-    additionalComponent,
-    field
-  } = props as Partial<InputProps>
+export default function Input(props: Partial<InputProps>): ReactElement {
+  const { required, name, label, help, additionalComponent, field } = props
 
   return (
     <div className={styles.field}>
@@ -52,13 +46,12 @@ export default function Input(props: InputProps): ReactElement {
       </Label>
       <InputElement {...field} {...props} />
 
+      <div className={styles.error}>
+        <ErrorMessage name={field.name} />
+      </div>
+
       {help && <Help>{help}</Help>}
       {additionalComponent && additionalComponent}
-
-      {/* TODO: Make field errors show up here */}
-      {/* {meta && meta.touched && meta.error ? (
-        <div className="error">{meta.error}</div>
-      ) : null} */}
     </div>
   )
 }
diff --git a/src/components/pages/Publish/PublishForm.tsx b/src/components/pages/Publish/PublishForm.tsx
index 5011474b3..0cee9dd2a 100644
--- a/src/components/pages/Publish/PublishForm.tsx
+++ b/src/components/pages/Publish/PublishForm.tsx
@@ -22,10 +22,10 @@ const validationSchema = Yup.object().shape<MetaDataPublishForm>({
   name: Yup.string().required('Required'),
   author: Yup.string().required('Required'),
   price: Yup.string().required('Required'),
-  files: Yup.array<File>().required('Required'),
+  files: Yup.array<File>().required('Required').nullable(),
   description: Yup.string().required('Required'),
   license: Yup.string().required('Required'),
-  access: Yup.string().required('Required'),
+  access: Yup.string().min(4).required('Required'),
   termsAndConditions: Yup.boolean().required('Required'),
 
   // ---- optional fields ----
@@ -58,9 +58,19 @@ export default function PublishForm({
   async function handleSubmit(values: MetaDataPublishForm) {
     const submittingToast = toast.info('submitting asset')
 
-    console.log(values)
+    console.log(`
+      Collected form values:
+      ----------------------
+      ${values}
+    `)
+
     const metadata = transformPublishFormToMetadata(values)
-    console.log(metadata)
+
+    console.log(`
+      Transformed metadata values:
+      ----------------------
+      ${metadata}
+    `)
 
     // if services array stays empty, the default access service
     // will be created by squid-js