more error validation tweaks, reset form

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'}
         />
       )
   }

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);
+}

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 { ErrorMessage } from 'formik'
-import { MetadataPublishForm } from '../../../@types/Metadata'
+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}>

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);
 }

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;
+}

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
+        <footer className={styles.actions}>
-          style="primary"
+          <Button
-          type="submit"
+            style="primary"
-          disabled={!ocean || !account || !isValid || status === 'empty'}
+            type="submit"
-        >
+            disabled={!ocean || !account || !isValid || status === 'empty'}
-          Submit
+          >
-        </Button>
+            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>

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)

src/components/pages/Publish/validation.ts

@@ -22,15 +22,15 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
 })
 
 export const initialValues: MetadataPublishForm = {
-  name: undefined,
+  name: '',
-  author: undefined,
+  author: '',
-  cost: undefined,
+  cost: '',
-  files: undefined,
+  files: '',
-  description: undefined,
+  description: '',
-  license: undefined,
+  license: '',
-  access: undefined,
+  access: '',
-  termsAndConditions: undefined,
+  termsAndConditions: false,
-  copyrightHolder: undefined,
+  copyrightHolder: '',
-  tags: undefined,
+  tags: '',
-  links: undefined
+  links: ''
 }