hack in success state for first steps

src/components/Publish/Navigation/index.tsx

@@ -5,28 +5,39 @@ import { wizardSteps } from '../_constants'
 import styles from './index.module.css'
 
 export default function Navigation(): ReactElement {
-  const { values, setFieldValue }: FormikContextType<FormPublishData> =
+  const { values, errors, setFieldValue }: FormikContextType<FormPublishData> =
     useFormikContext()
 
   function handleStepClick(step: number) {
-    setFieldValue('stepCurrent', step)
+    setFieldValue('user.stepCurrent', step)
   }
 
+  console.log(errors)
+
   return (
     <nav className={styles.navigation}>
       <ol>
-        {wizardSteps.map((step) => (
-          <li
-            key={step.title}
-            onClick={() => handleStepClick(step.step)}
-            // TODO: add success class
-            className={
-              values.user.stepCurrent === step.step ? styles.current : null
-            }
-          >
-            {step.title}
-          </li>
-        ))}
+        {wizardSteps.map((step) => {
+          const isSuccessMetadata = errors.metadata === undefined
+          const isSuccessServices = errors.services === undefined
+
+          return (
+            <li
+              key={step.title}
+              onClick={() => handleStepClick(step.step)}
+              // TODO: add success class for all steps
+              className={`${
+                values.user.stepCurrent === step.step ? styles.current : null
+              } ${
+                step.step === 1 && isSuccessMetadata ? styles.success : null
+              } ${
+                step.step === 2 && isSuccessServices ? styles.success : null
+              }`}
+            >
+              {step.title}
+            </li>
+          )
+        })}
       </ol>
     </nav>
   )

src/components/Publish/_constants.tsx

@@ -53,7 +53,7 @@ export const initialValues: FormPublishData = {
   },
   services: [
     {
-      files: [],
+      files: undefined,
       dataTokenOptions: { name: '', symbol: '' },
       timeout: '',
       access: '',
@@ -88,7 +88,7 @@ const validationMetadata = {
     .required('Required'),
   author: Yup.string().required('Required'),
   tags: Yup.string().nullable(),
-  termsAndConditions: Yup.boolean().required('Required')
+  termsAndConditions: Yup.boolean().required('Required').isTrue()
 }
 
 const validationService = {
@@ -102,7 +102,7 @@ const validationService = {
   }),
   timeout: Yup.string().required('Required'),
   access: Yup.string()
-    .matches(/compute|download/g, { excludeEmptyString: true })
+    .matches(/compute|download/g)
     .required('Required'),
   providerUrl: Yup.string().url().nullable()
 }