move validation data to be part of field state

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

@@ -28,18 +28,17 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
             ...state,
             components: {
               ...state.components,
-              [action.id]: action.initValue,
-            },
-            validation: {
-              ...state.validation,
               [action.id]: {
-                ...{
-                  error: false,
-                  loading: false,
-                  validated: false,
-                  touched: false,
+                state: action.initValue,
+                validation: {
+                  ...{
+                    error: false,
+                    loading: false,
+                    validated: false,
+                    touched: false,
+                  },
+                  ...action.initValidation,
                 },
-                ...action.initValidation,
               },
             },
           };
@@ -50,7 +49,10 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
           ...state,
           components: {
             ...state.components,
-            [action.id]: action.updateFunc(state.components[action.id]),
+            [action.id]: {
+              ...state.components[action.id],
+              state: action.updateFunc(state.components[action.id]),
+            },
           },
         };
       case "mutate-vars":
@@ -64,7 +66,6 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
 
   const [state, dispatch] = useReducer(handleAction, {
     components: {},
-    validation: {},
     variables: {},
   });
 

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

@@ -53,7 +53,7 @@ const useFormField = <T extends PorterFormFieldFieldState>(
   };
 
   return {
-    state: formState.components[fieldId] as T,
+    state: formState.components[fieldId]?.state as T,
     variables: formState.variables,
     updateState,
     mutateVars,

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

@@ -45,8 +45,7 @@ export interface PorterFormData {
 
 // internal field state interfaces
 
-export interface StringInputFieldState {
-}
+export interface StringInputFieldState {}
 
 export type PorterFormFieldFieldState = StringInputFieldState;
 
@@ -65,12 +64,12 @@ export interface PorterFormVariableList {
 
 export interface PorterFormState {
   components: {
-    [key: string]: PorterFormFieldFieldState
+    [key: string]: {
+      state: PorterFormFieldFieldState
+      validation: PorterFormFieldValidationState
+    }
   }
   variables: PorterFormVariableList
-  validation: {
-    [key: string]: PorterFormFieldValidationState
-  }
 }
 
 export interface PorterFormInitFieldAction {