From f440e178dd423632bffe840dbdb4a841e888a139 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 17 Jul 2020 21:21:27 +0200
Subject: [PATCH] more error validation tweaks, reset form

---
 src/components/atoms/Input/InputElement.tsx   |  5 +-
 src/components/atoms/Input/index.module.css   | 10 ++++
 src/components/atoms/Input/index.tsx          | 17 +++++--
 .../pages/Publish/Preview.module.css          |  6 +--
 .../pages/Publish/PublishForm.module.css      |  6 +++
 src/components/pages/Publish/PublishForm.tsx  | 51 +++++++++++++++----
 src/components/pages/Publish/index.tsx        |  5 +-
 src/components/pages/Publish/validation.ts    | 22 ++++----
 8 files changed, 90 insertions(+), 32 deletions(-)

diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx
index 429db7c5a..ec780206d 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/src/components/atoms/Input/InputElement.tsx
@@ -6,7 +6,7 @@ import FilesInput from '../../molecules/FormFields/FilesInput'
 import Terms from '../../molecules/FormFields/Terms'
 
 export default function InputElement(props: InputProps): ReactElement {
-  const { type, options, rows, name } = props
+  const { type, options, rows, name, value } = props
 
   switch (type) {
     case 'select':
@@ -62,10 +62,11 @@ export default function InputElement(props: InputProps): ReactElement {
       return (
         <input
           id={name}
-          type={type || 'text'}
           className={styles.input}
           name={name}
           {...props}
+          value={value || ''}
+          type={type || 'text'}
         />
       )
   }
diff --git a/src/components/atoms/Input/index.module.css b/src/components/atoms/Input/index.module.css
index e56057d0f..10cb7a97d 100644
--- a/src/components/atoms/Input/index.module.css
+++ b/src/components/atoms/Input/index.module.css
@@ -20,3 +20,13 @@
   right: 0;
   top: 0;
 }
+
+.hasError label {
+  color: var(--brand-alert-red);
+}
+
+.hasError input,
+.hasError select,
+.hasError textarea {
+  border-color: var(--brand-alert-red);
+}
diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx
index f01255416..72378b87a 100644
--- a/src/components/atoms/Input/index.tsx
+++ b/src/components/atoms/Input/index.tsx
@@ -3,8 +3,10 @@ import InputElement from './InputElement'
 import Help from './Help'
 import Label from './Label'
 import styles from './index.module.css'
-import { ErrorMessage, FormikState, FieldProps, FieldInputProps } from 'formik'
-import { MetadataPublishForm } from '../../../@types/Metadata'
+import { ErrorMessage } from 'formik'
+import classNames from 'classnames/bind'
+
+const cx = classNames.bind(styles)
 
 export interface InputProps {
   name: string
@@ -36,9 +38,18 @@ export interface InputProps {
 export default function Input(props: Partial<InputProps>): ReactElement {
   const { required, name, label, help, additionalComponent, field } = props
 
+  const hasError =
+    props.form.touched[field.name] &&
+    typeof props.form.errors[field.name] === 'string'
+
+  const styleClasses = cx({
+    field: true,
+    hasError: hasError
+  })
+
   return (
     <div
-      className={styles.field}
+      className={styleClasses}
       data-is-submitting={props.form && props.form.isSubmitting ? true : null}
     >
       <Label htmlFor={name} required={required}>
diff --git a/src/components/pages/Publish/Preview.module.css b/src/components/pages/Publish/Preview.module.css
index 8153ccc72..64c4be9e7 100644
--- a/src/components/pages/Publish/Preview.module.css
+++ b/src/components/pages/Publish/Preview.module.css
@@ -14,7 +14,7 @@
 }
 
 .previewTitle {
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-small);
   text-transform: uppercase;
   color: var(--color-secondary);
   margin-bottom: calc(var(--spacer) / 2);
@@ -24,10 +24,6 @@
   margin-bottom: calc(var(--spacer) / 2);
 }
 
-.preview [class*='MetaItem-module--metaItem'] {
-  margin-bottom: calc(var(--spacer) / 2);
-}
-
 .preview [class*='MetaItem-module--metaItem'] h3 {
   margin-bottom: calc(var(--spacer) / 12);
 }
diff --git a/src/components/pages/Publish/PublishForm.module.css b/src/components/pages/Publish/PublishForm.module.css
index 0c3b33ffe..24cff9a69 100644
--- a/src/components/pages/Publish/PublishForm.module.css
+++ b/src/components/pages/Publish/PublishForm.module.css
@@ -1,3 +1,9 @@
 .form {
   composes: box from '../../atoms/Box.module.css';
 }
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
diff --git a/src/components/pages/Publish/PublishForm.tsx b/src/components/pages/Publish/PublishForm.tsx
index bb3547c5c..96a3180da 100644
--- a/src/components/pages/Publish/PublishForm.tsx
+++ b/src/components/pages/Publish/PublishForm.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect } from 'react'
 import styles from './PublishForm.module.css'
 import { useOcean, usePublish } from '@oceanprotocol/react'
 import { useFormikContext, Form, Field } from 'formik'
@@ -15,11 +15,28 @@ export default function PublishForm({
 }): ReactElement {
   const { ocean, account } = useOcean()
   const { publishStepText, isLoading } = usePublish()
-  const { status, setStatus, isValid } = useFormikContext()
+  const {
+    status,
+    setStatus,
+    isValid,
+    touched,
+    setErrors,
+    setTouched,
+    resetForm,
+    initialValues
+  } = useFormikContext()
+
+  // reset form validation on every mount
+  useEffect(() => {
+    setErrors({})
+    setTouched({})
+    // setSubmitting(false)
+  }, [])
 
   return (
     <Form
       className={styles.form}
+      // do we need this?
       onChange={() => status === 'empty' && setStatus(null)}
     >
       {content.data.map((field: FormFieldProps) => (
@@ -29,13 +46,29 @@ export default function PublishForm({
       {isLoading ? (
         <Loader message={publishStepText} />
       ) : (
-        <Button
-          style="primary"
-          type="submit"
-          disabled={!ocean || !account || !isValid || status === 'empty'}
-        >
-          Submit
-        </Button>
+        <footer className={styles.actions}>
+          <Button
+            style="primary"
+            type="submit"
+            disabled={!ocean || !account || !isValid || status === 'empty'}
+          >
+            Submit
+          </Button>
+
+          {status !== 'empty' && (
+            <Button
+              style="text"
+              size="small"
+              onClick={(e) => {
+                e.preventDefault()
+                resetForm(initialValues)
+                setStatus('empty')
+              }}
+            >
+              Reset Form
+            </Button>
+          )}
+        </footer>
       )}
       <Persist name="ocean-publish-form" />
     </Form>
diff --git a/src/components/pages/Publish/index.tsx b/src/components/pages/Publish/index.tsx
index 737f386f0..a21ef4cd1 100644
--- a/src/components/pages/Publish/index.tsx
+++ b/src/components/pages/Publish/index.tsx
@@ -26,7 +26,7 @@ export default function PublishPage({
     console.log(`
       Collected form values:
       ----------------------
-      ${JSON.stringify(values)}
+      ${JSON.stringify(values, null, 2)}
     `)
 
     const metadata = transformPublishFormToMetadata(values)
@@ -36,7 +36,7 @@ export default function PublishPage({
     console.log(`
       Transformed metadata values:
       ----------------------
-      ${JSON.stringify(metadata)}
+      ${JSON.stringify(metadata, null, 2)}
       Cost: 1
       Tokens to mint: ${tokensToMint}
     `)
@@ -56,6 +56,7 @@ export default function PublishPage({
 
       // TODO: reset form state and make sure persistant form in localStorage is cleared
 
+      // Go to new asset detail page
       navigate(`/asset/${ddo.id}`)
     } catch (error) {
       console.error(error.message)
diff --git a/src/components/pages/Publish/validation.ts b/src/components/pages/Publish/validation.ts
index baa17d03c..fc9508826 100644
--- a/src/components/pages/Publish/validation.ts
+++ b/src/components/pages/Publish/validation.ts
@@ -22,15 +22,15 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
 })
 
 export const initialValues: MetadataPublishForm = {
-  name: undefined,
-  author: undefined,
-  cost: undefined,
-  files: undefined,
-  description: undefined,
-  license: undefined,
-  access: undefined,
-  termsAndConditions: undefined,
-  copyrightHolder: undefined,
-  tags: undefined,
-  links: undefined
+  name: '',
+  author: '',
+  cost: '',
+  files: '',
+  description: '',
+  license: '',
+  access: '',
+  termsAndConditions: false,
+  copyrightHolder: '',
+  tags: '',
+  links: ''
 }