refactor stringinput to store state in variable

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

@@ -68,8 +68,6 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
     variables: {},
   });
 
-  console.log(state.variables);
-
   return (
     <Provider
       value={{

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

@@ -15,18 +15,17 @@ const StringInput: React.FC<Props> = ({
   placeholder,
   info,
 }) => {
-  const {
-    state,
-    updateState,
-    mutateVars,
-  } = useFormField<StringInputFieldState>(id, {
-    initValue: {
-      value: "",
-    },
-    initValidation: {
-      validated: !required,
-    },
-  });
+  const { state, variables, mutateVars } = useFormField<StringInputFieldState>(
+    id,
+    {
+      initValue: {
+        value: "",
+      },
+      initValidation: {
+        validated: !required,
+      },
+    }
+  );
 
   // TODO: needs a loading wrapper
   if (state == undefined) {
@@ -37,14 +36,8 @@ const StringInput: React.FC<Props> = ({
     <InputRow
       width="100%"
       type="text"
-      value={state.value}
+      value={variables[variable] || ""}
       setValue={(x: string) => {
-        updateState((prev) => {
-          return {
-            ...prev,
-            value: x,
-          };
-        });
         mutateVars((vars) => {
           return {
             ...vars,

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

@@ -8,6 +8,7 @@ import {
 
 interface FormFieldData<T> {
   state: T;
+  variables: PorterFormVariableList;
   updateState: (updateFunc: (prev: T) => T) => void;
   mutateVars: (
     mutateFunc: (vars: PorterFormVariableList) => PorterFormVariableList
@@ -53,6 +54,7 @@ const useFormField = <T extends PorterFormFieldFieldState>(
 
   return {
     state: formState.components[fieldId] as T,
+    variables: formState.variables,
     updateState,
     mutateVars,
   };

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

@@ -46,7 +46,6 @@ export interface PorterFormData {
 // internal field state interfaces
 
 export interface StringInputFieldState {
-  value: string;
 }
 
 export type PorterFormFieldFieldState = StringInputFieldState;