interface for validation

dashboard/src/components/form-refactor/PorterFormContextProvider.tsx

@@ -30,6 +30,18 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
               ...state.components,
               [action.id]: action.initValue,
             },
+            validation: {
+              ...state.validation,
+              [action.id]: {
+                ...{
+                  error: false,
+                  loading: false,
+                  validated: false,
+                  touched: false,
+                },
+                ...action.initValidation,
+              },
+            },
           };
         }
         break;
@@ -47,6 +59,7 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
 
   const [state, dispatch] = useReducer(handleAction, {
     components: {},
+    validation: {},
   });
 
   return (

dashboard/src/components/form-refactor/field-components/StringInput.tsx

@@ -15,7 +15,12 @@ const StringInput: React.FC<Props> = ({
   info,
 }) => {
   const { state, updateState } = useFormField<StringInputFieldState>(id, {
-    value: "",
+    initValue: {
+      value: "",
+    },
+    initValidation: {
+      validated: !required,
+    },
   });
 
   // TODO: needs a loading wrapper

dashboard/src/components/form-refactor/hooks/useFormField.tsx

@@ -1,15 +1,23 @@
 import { useContext, useEffect } from "react";
 import { PorterFormContext } from "../PorterFormContextProvider";
-import { PorterFormFieldFieldState } from "../types";
+import {
+  PorterFormFieldFieldState,
+  PorterFormFieldValidationState,
+} from "../types";
 
 interface FormFieldData<T> {
   state: T;
   updateState: (updateFunc: (prev: T) => T) => void;
 }
 
+interface Options<T> {
+  initValue: T;
+  initValidation?: Partial<PorterFormFieldValidationState>;
+}
+
 const useFormField = <T extends PorterFormFieldFieldState>(
   fieldId: string,
-  initValue: T
+  { initValue, initValidation }: Options<T>
 ): FormFieldData<T> => {
   const { dispatchAction, formState } = useContext(PorterFormContext);
 
@@ -18,6 +26,7 @@ const useFormField = <T extends PorterFormFieldFieldState>(
       type: "init-field",
       id: fieldId,
       initValue,
+      initValidation,
     });
   }, []);
 

dashboard/src/components/form-refactor/types.ts

@@ -52,16 +52,27 @@ export type PorterFormFieldFieldState = StringInputFieldState;
 
 // reducer interfaces
 
+export interface PorterFormFieldValidationState {
+  loading: boolean;
+  error: boolean;
+  validated: boolean;
+  touched: boolean;
+}
+
 export interface PorterFormState {
   components: {
     [key: string]: PorterFormFieldFieldState
   }
+  validation: {
+    [key: string]: PorterFormFieldValidationState
+  }
 }
 
 export interface PorterFormInitFieldAction {
   type: "init-field",
   id: string;
   initValue: PorterFormFieldFieldState;
+  initValidation?: Partial<PorterFormFieldValidationState>
 }
 
 export interface PorterFormUpdateFieldAction {