basic variable framework

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

@@ -53,6 +53,11 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
             [action.id]: action.updateFunc(state.components[action.id]),
           },
         };
+      case "mutate-vars":
+        return {
+          ...state,
+          variables: action.mutateFunc(state.variables),
+        };
     }
     return state;
   };
@@ -60,8 +65,11 @@ export const PorterFormContextProvider: React.FC<Props> = (props) => {
   const [state, dispatch] = useReducer(handleAction, {
     components: {},
     validation: {},
+    variables: {},
   });
 
+  console.log(state.variables);
+
   return (
     <Provider
       value={{

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React from "react";
 import InputRow from "../../values-form/InputRow";
 import useFormField from "../hooks/useFormField";
 import { StringInputField, StringInputFieldState } from "../types";
@@ -9,12 +9,17 @@ interface Props extends StringInputField {
 
 const StringInput: React.FC<Props> = ({
   id,
+  variable,
   label,
   required,
   placeholder,
   info,
 }) => {
-  const { state, updateState } = useFormField<StringInputFieldState>(id, {
+  const {
+    state,
+    updateState,
+    mutateVars,
+  } = useFormField<StringInputFieldState>(id, {
     initValue: {
       value: "",
     },
@@ -40,6 +45,12 @@ const StringInput: React.FC<Props> = ({
             value: x,
           };
         });
+        mutateVars((vars) => {
+          return {
+            ...vars,
+            [variable]: x,
+          };
+        });
       }}
       label={label}
       isRequired={required}

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

@@ -3,11 +3,15 @@ import { PorterFormContext } from "../PorterFormContextProvider";
 import {
   PorterFormFieldFieldState,
   PorterFormFieldValidationState,
+  PorterFormVariableList,
 } from "../types";
 
 interface FormFieldData<T> {
   state: T;
   updateState: (updateFunc: (prev: T) => T) => void;
+  mutateVars: (
+    mutateFunc: (vars: PorterFormVariableList) => PorterFormVariableList
+  ) => void;
 }
 
 interface Options<T> {
@@ -38,9 +42,19 @@ const useFormField = <T extends PorterFormFieldFieldState>(
     });
   };
 
+  const mutateVars = (
+    mutateFunc: (vars: PorterFormVariableList) => PorterFormVariableList
+  ) => {
+    dispatchAction({
+      type: "mutate-vars",
+      mutateFunc,
+    });
+  };
+
   return {
     state: formState.components[fieldId] as T,
     updateState,
+    mutateVars,
   };
 };
 

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

@@ -17,6 +17,7 @@ export interface SubtitleField {
 
 export interface StringInputField {
   type: "string-input";
+  variable: string;
   label?: string;
   required?: boolean;
   placeholder?: string;
@@ -59,10 +60,15 @@ export interface PorterFormFieldValidationState {
   touched: boolean;
 }
 
+export interface PorterFormVariableList {
+  [key: string]: any
+}
+
 export interface PorterFormState {
   components: {
     [key: string]: PorterFormFieldFieldState
   }
+  variables: PorterFormVariableList
   validation: {
     [key: string]: PorterFormFieldValidationState
   }
@@ -81,4 +87,9 @@ export interface PorterFormUpdateFieldAction {
   updateFunc: (prev: PorterFormFieldFieldState) => PorterFormFieldFieldState;
 }
 
-export type PorterFormAction = PorterFormInitFieldAction|PorterFormUpdateFieldAction;
+export interface PorterFormMutateVariablesAction {
+  type: "mutate-vars",
+  mutateFunc: (prev: PorterFormVariableList) => PorterFormVariableList;
+}
+
+export type PorterFormAction = PorterFormInitFieldAction|PorterFormUpdateFieldAction|PorterFormMutateVariablesAction;