From a318ba74cef455956e5aeff69b3cd06061b929e7 Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <rayarvin@gmail.com>
Date: Thu, 13 May 2021 19:45:32 +0800
Subject: [PATCH 1/2] ZI-8112 nested form/ buggy deletes

---
 package.json                                |   2 +-
 src/components/FormBuilder/FormBuilder.js   | 181 ++++++++-----
 src/components/FormBuilder/index.js         |   4 +-
 src/components/FormBuilder/index.stories.js | 272 +++++++++++++++++---
 yarn.lock                                   |  19 +-
 5 files changed, 360 insertions(+), 118 deletions(-)

diff --git a/package.json b/package.json
index 168ad3c..c7293d4 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
   "version": "0.6.8",
   "private": false,
   "dependencies": {
-    
     "@date-io/moment": "1.x",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
@@ -20,6 +19,7 @@
     "formik-material-ui": "^3.0.1",
     "formik-material-ui-lab": "^0.0.8",
     "formik-material-ui-pickers": "^0.0.12",
+    "lodash.get": "^4.4.2",
     "lodash.isempty": "^4.4.0",
     "luxon": "^1.26.0",
     "moment": "^2.29.1",
diff --git a/src/components/FormBuilder/FormBuilder.js b/src/components/FormBuilder/FormBuilder.js
index 257e8d7..b5e1b94 100644
--- a/src/components/FormBuilder/FormBuilder.js
+++ b/src/components/FormBuilder/FormBuilder.js
@@ -34,10 +34,16 @@ import {
   KeyboardTimePicker,
   MuiPickersUtilsProvider,
 } from "@material-ui/pickers";
-import { useFormik } from "formik";
-import { isEmpty } from "lodash";
+import { ErrorMessage, FieldArray, Formik, useFormik } from "formik";
+import { isEmpty, get } from "lodash";
 import PropTypes from "prop-types";
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import * as Yup from "yup";
 
 const useStyles = makeStyles((theme) => ({
@@ -51,7 +57,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const FormBuilder = ({
+const FormFieldSet = ({
   form,
   formLayout = [],
   formFactor = "default",
@@ -60,46 +66,15 @@ const FormBuilder = ({
   submitLabel = "Submit",
   resetLabel = "Reset",
   columns = 1,
-  onSubmit = () => {},
-  readOnly,
   setValues = {},
-  additionalActions,
+  additionalActions = () => {},
   children,
+  isSubForm = true,
+  fieldArray,
 }) => {
   const classes = useStyles();
-  const validationSchema = useMemo(() => {
-    const validatorMap = Object.fromEntries(
-      Object.entries(form)
-        .filter(([k, v]) => !!v.validator)
-        .map(([k, v]) => {
-          return [k, v.validator()];
-        })
-    );
-    const validator = Yup.object().shape({
-      ...validatorMap,
-    });
-    return validator;
-  }, [form]);
 
-  const initialValues = useMemo(() => {
-    return Object.fromEntries(
-      Object.entries(form).map(([k, v]) => {
-        return [k, v.initialValues];
-      })
-    );
-  }, [form]);
-
-  const formik = useFormik({
-    initialValues: initialValues,
-    validationSchema: validationSchema,
-
-    onSubmit: (values) => {
-      setTimeout(() => {
-        formik.setSubmitting(false);
-        onSubmit(values);
-      }, 500);
-    },
-  });
+  const { formik, validationSchema, initialValues } = useContext(FormContext);
 
   useEffect(() => {
     if (!isEmpty(setValues)) {
@@ -130,11 +105,13 @@ const FormBuilder = ({
               name={fieldName}
               type={fieldParams.type}
               label={fieldParams.label}
-              value={formik.values[fieldName]}
+              value={get(formik.values, fieldName)}
               onChange={onChangeOverride}
               disabled={fieldParams.readOnly}
               error={
-                formik.touched[fieldName] && Boolean(formik.errors[fieldName])
+                get(formik.touched, fieldName) &&
+                Boolean(get(formik.errors, fieldName))
+                // formik.touched[fieldName] && Boolean(formik.errors[fieldName])
               }
               InputLabelProps={{
                 shrink: true,
@@ -151,7 +128,6 @@ const FormBuilder = ({
               label={fieldParams.label}
               name={fieldName}
               onChange={(evt, val) => {
-                console.log("📢[FormBuilder.js:152]:", evt);
                 if (fieldParams.onChange) {
                   fieldParams.onChange(
                     fieldName,
@@ -163,7 +139,7 @@ const FormBuilder = ({
                   fieldParams.useLocalTime ? evt.local(true) : evt.utc(true)
                 );
               }}
-              value={formik.values[fieldName]}
+              value={get(formik.values, fieldName)}
               disabled={fieldParams.readOnly}
               autoOk
               format="MM/DD/yyyy"
@@ -192,7 +168,7 @@ const FormBuilder = ({
                   fieldParams.useLocalTime ? evt.local(true) : evt.utc(true)
                 );
               }}
-              value={formik.values[fieldName]}
+              value={get(formik.values, fieldName)}
               disabled={fieldParams.readOnly}
               autoOk
               variant="inline"
@@ -209,7 +185,6 @@ const FormBuilder = ({
               label={fieldParams.label}
               name={fieldName}
               onChange={(evt, val) => {
-                console.log("📢[FormBuilder.js:181]:", evt, val);
                 if (fieldParams.onChange) {
                   fieldParams.onChange(
                     fieldName,
@@ -221,7 +196,7 @@ const FormBuilder = ({
                   fieldParams.useLocalTime ? evt.local(true) : evt.utc(true)
                 );
               }}
-              value={formik.values[fieldName]}
+              value={get(formik.values, fieldName)}
               disabled={fieldParams.readOnly}
               autoOk
               variant="inline"
@@ -239,7 +214,7 @@ const FormBuilder = ({
                 name={fieldName}
                 fullWidth
                 label={fieldParams.label}
-                value={formik.values[fieldName]}
+                value={get(formik.values, fieldName)}
                 onChange={onChangeOverride}
                 multiple={fieldParams.settings.multiple}
                 disabled={fieldParams.readOnly}
@@ -265,7 +240,7 @@ const FormBuilder = ({
             <>
               <FormControlLabel
                 name={fieldName}
-                checked={formik.values[fieldName]}
+                checked={get(formik.values, fieldName)}
                 control={
                   fieldParams.type === "switch" ? <Switch /> : <Checkbox />
                 }
@@ -289,7 +264,7 @@ const FormBuilder = ({
               <RadioGroup
                 row={fieldParams.settings.inline}
                 name={fieldName}
-                value={formik.values[fieldName]}
+                value={get(formik.values, fieldName)}
                 onChange={onChangeOverride}
                 {...fieldParams?.fieldProps}
               >
@@ -316,7 +291,7 @@ const FormBuilder = ({
               disableCloseOnSelect
               name={fieldName}
               label={fieldParams.label}
-              value={formik.values[fieldName]}
+              value={get(formik.values, fieldName)}
               onChange={(evt, val) => {
                 if (fieldParams.onChange) {
                   fieldParams.onChange(fieldName, val);
@@ -335,8 +310,8 @@ const FormBuilder = ({
                   label={fieldParams.label}
                   placeholder="type to search"
                   error={
-                    formik.touched[fieldName] &&
-                    Boolean(formik.errors[fieldName])
+                    get(formik.touched, fieldName) &&
+                    Boolean(get(formik.errors, fieldName))
                   }
                   fullWidth
                 />
@@ -381,11 +356,16 @@ const FormBuilder = ({
                 className={classes.controlContainer}
                 fullWidth
                 component="fieldset"
-                error={formik.touched[layout] && Boolean(formik.errors[layout])}
+                error={
+                  // formik.touched[layout] && Boolean(formik.errors[layout])
+                  get(formik.touched, layout) &&
+                  Boolean(get(formik.errors, layout))
+                }
               >
                 {renderField(layout, field)}
                 <FormHelperText>
-                  {formik.touched[layout] && formik.errors[layout]}
+                  {get(formik.touched, layout) && get(formik.errors, layout)}
+                  {/* {formik.touched[layout] && formik.errors[layout]} */}
                 </FormHelperText>
               </FormControl>
             </Grid>
@@ -414,7 +394,9 @@ const FormBuilder = ({
           variant = "contained";
           break;
       }
-      return (
+      return isSubForm ? (
+        <></>
+      ) : (
         <ButtonGroup variant={variant}>
           <Button
             color="secondary"
@@ -484,18 +466,97 @@ const FormBuilder = ({
           </>
         );
     }
-  }, [additionalActions, buildFields, children, classes.actionBar, formFactor, formLabel, formSubtitle, formik, resetLabel, submitLabel]);
+  }, [
+    additionalActions,
+    buildFields,
+    children,
+    classes.actionBar,
+    formFactor,
+    formLabel,
+    formSubtitle,
+    formik,
+    isSubForm,
+    resetLabel,
+    submitLabel,
+  ]);
 
+  if (!isEmpty(fieldArray)) {
+    return (
+      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+        <FieldArray
+          name={fieldArray}
+          render={(arrayHelpers) => {
+            return buildFormFactor;
+          }}
+        />
+      </MuiPickersUtilsProvider>
+    );
+  }
   return (
     <MuiPickersUtilsProvider utils={DateFnsUtils}>
-      <form onSubmit={formik.handleSubmit}>
-        {buildFormFactor}
-      </form>
+      {buildFormFactor}
     </MuiPickersUtilsProvider>
   );
 };
 
-export { FormBuilder };
+const FormContext = React.createContext();
+
+function generateValidation(form) {}
+
+const FormBuilder = (props) => {
+  const { onSubmit, form, additionalValidation, additionalInitial } = props;
+
+  const validationSchema = useMemo(() => {
+    const validatorSpread = Object.entries({ ...form })
+      .filter(([k, v]) => !!v.validator)
+      .map(([k, v]) => {
+        return [k, v.validator()];
+      });
+
+    const validatorMap = Object.fromEntries(validatorSpread);
+    const validator = Yup.object().shape({
+      ...validatorMap,
+      ...additionalValidation,
+    });
+    return validator;
+  }, [additionalValidation, form]);
+
+  const initialValues = useMemo(() => {
+    const mapped = Object.fromEntries(
+      Object.entries({ ...form }).map(([k, v]) => {
+        return [k, v.initialValues];
+      })
+    );
+    return { ...mapped, ...additionalInitial };
+  }, [additionalInitial, form]);
+
+  return (
+    <Formik
+      enableReinitialize
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={(values, { setSubmitting }) => {
+        setTimeout(() => {
+          onSubmit(values);
+          setSubmitting(false);
+        }, 400);
+      }}
+    >
+      {(formik) => {
+        console.log("📢[FormBuilder.js:545]:", formik);
+        return (
+          <FormContext.Provider
+            value={{ validationSchema, initialValues, formik }}
+          >
+            <FormFieldSet {...props} isSubForm={false} />
+          </FormContext.Provider>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export { FormBuilder, FormFieldSet, FormContext, generateValidation };
 
 FormBuilder.propTypes = {
   formLabel: PropTypes.string.isRequired,
diff --git a/src/components/FormBuilder/index.js b/src/components/FormBuilder/index.js
index 5017f85..b190e0d 100644
--- a/src/components/FormBuilder/index.js
+++ b/src/components/FormBuilder/index.js
@@ -1,2 +1,2 @@
-import { FormBuilder } from "./FormBuilder";
-export { FormBuilder };
+import { FormBuilder, FormFieldSet, FormContext, generateValidation } from "./FormBuilder";
+export { FormBuilder, FormFieldSet, FormContext, generateValidation };
diff --git a/src/components/FormBuilder/index.stories.js b/src/components/FormBuilder/index.stories.js
index f86ace0..34cec98 100644
--- a/src/components/FormBuilder/index.stories.js
+++ b/src/components/FormBuilder/index.stories.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import * as Yup from "yup";
 
 import { action, actions } from "@storybook/addon-actions";
@@ -13,6 +13,9 @@ import {
   ListItemText,
 } from "@material-ui/core";
 import { Close } from "@material-ui/icons";
+import { FormFieldSet } from "./FormBuilder";
+import { FormContext, generateValidation } from "./index";
+import { withReactContext } from "storybook-react-context";
 
 const FormBuilderStory = {
   component: FormBuilder,
@@ -32,6 +35,16 @@ const FormBuilderStory = {
       },
     },
   },
+  // decorators: [
+  //   withReactContext({
+  //     context: FormContext,
+  //   }),
+  //   (Story) => (
+  //     <FormContext.Provider>
+  //       <Story />
+  //     </FormContext.Provider>
+  //   ),
+  // ],
 };
 
 export default FormBuilderStory;
@@ -62,7 +75,7 @@ Default.args = {
     ["selection", "multipleSelection"],
     "autocomplete",
     ["radio", "checkbox", "switch"],
-    "multiLine"
+    "multiLine",
   ],
   form: {
     plainComponent: {
@@ -105,8 +118,8 @@ Default.args = {
       fieldProps: {
         multiline: true,
         rowsMax: 4,
-        variant:"standard"
-      }
+        variant: "standard",
+      },
     },
     email: {
       type: "email",
@@ -286,57 +299,206 @@ Modify.args = {
   ...Default.args,
 };
 
+export function useForceUpdate() {
+  const [, setTick] = useState(0);
+  const update = useCallback(() => {
+    setTick((tick) => tick + 1);
+  }, []);
+  return update;
+}
+
 const NestedStory = ({ ...args }) => {
+  const forceUpdate = useForceUpdate();
   const [formState, setFormState] = useState({});
 
+  const [additionalInitial, setAdditionalInitial] = useState();
+
+  const [subForm, setSubForm] = useState(args.subForm);
+  const [subformInitialValues, setSubformInitialValues] = useState(
+    args.subformInitialValues
+  );
+
+  const [subformValidator, setSubformValidator] = useState(
+    args.subformValidator
+  );
+
+  useEffect(() => {
+    setAdditionalInitial(subformInitialValues);
+  }, [subformInitialValues]);
+
+  function addSubForm() {
+    const subFormXField1 = `subform[${subForm.length}].formfield1`;
+    const subFormXField2 = `subform[${subForm.length}].formfield2`;
+
+    setSubForm([
+      ...subForm,
+      {
+        layout: [subFormXField1, subFormXField2],
+        form: {
+          [subFormXField1]: {
+            type: "text",
+            label: subFormXField1,
+            initialValues: "",
+          },
+          [subFormXField2]: {
+            type: "text",
+            label: subFormXField2,
+            initialValues: "",
+          },
+        },
+      },
+    ]);
+
+    setSubformInitialValues({
+      subform: [
+        ...subformInitialValues.subform,
+        { formfield1: "", formfield2: "" },
+      ],
+    });
+  }
+
+  function addSubSubForm(id) {
+    console.log("📢[index.stories.js:351]:addsubsubform", id, subForm);
+    const mappedForm = subForm.map((subform, idx) => {
+      if (!subform) return undefined;
+      const targetSubform = subform.form[`subform[${id}].formfield1`];
+      if (targetSubform) {
+        console.log("📢[index.stories.js:354]:newsubsubform", subform);
+        const subsubformlength = subform?.form?.subform?.length ?? 0;
+        const newSubSubform = {
+          form: {
+            [`subform[${id}].subsubform[${subsubformlength}].subsubform1`]: {
+              type: "text",
+              label: `subform[${id}].subsubform[${subsubformlength}].subsubform1`,
+              initialValues: "",
+            },
+            [`subform[${id}].subsubform[${subsubformlength}].subsubform2`]: {
+              type: "text",
+              label: `subform[${id}].subsubform[${subsubformlength}].subsubform2`,
+              initialValues: "",
+            },
+          },
+          layout: [
+            `subform[${id}].subsubform[${subsubformlength}].subsubform1`,
+            `subform[${id}].subsubform[${subsubformlength}].subsubform2`,
+          ],
+        };
+        const newSubform = {
+          ...subform,
+          form: {
+            ...(subform?.form ?? {}),
+            subform: [...(subform?.form?.subform ?? []), newSubSubform],
+          },
+        };
+        console.log("📢[index.stories.js:367]:", newSubform);
+        return newSubform;
+      }
+      console.log("returning base form", subform);
+      return {
+        ...subform,
+      };
+    });
+
+    console.log("📢[index.stories.js:391]:", mappedForm);
+    setSubForm(mappedForm);
+  }
+
+  function removeSubForm(id) {
+    let subFormSplice = subForm;
+    delete subFormSplice[id];
+    setSubForm(subFormSplice);
+    let subformInitialValuesSplice = subformInitialValues.subform;
+    delete subformInitialValues[id];
+    setSubformInitialValues({
+      subform: subformInitialValuesSplice,
+    });
+  }
+
+  function removeSubSubForm(parentId, id) {
+    console.log("📢[index.stories.js:408]:", subForm, parentId, id);
+    let newSubForm = subForm;
+    delete newSubForm[parentId].form.subform[id];
+    setSubForm(newSubForm);
+    forceUpdate();
+  }
+
+  console.log("📢[index.stories.js:329]:", subForm, subformValidator);
   return (
     <FormBuilder
       {...args}
+      additionalValidation={subformValidator}
+      additionalInitial={additionalInitial}
       setValues={formState}
+      onSubmit={(values) => {
+        //remove spliced subform elements from formik final value array
+        let filteredValues = values;
+        filteredValues.subform = filteredValues.subform.filter((sf, idx) => {
+          return subForm[idx] !== undefined;
+        });
+        alert(`${JSON.stringify(filteredValues, null, 2)}`);
+      }}
       additionalActions={() => (
         <ButtonGroup variant="text">
-          <Button
-            onClick={() =>
-              setFormState({
-                firstName: "STEEL RAIN",
-                autocomplete: [
-                  { id: 3, label: "three" },
-
-                  { id: 5, label: "five" },
-                ],
-              })
-            }
-          >
-            Nested
-          </Button>
+          <Button onClick={() => addSubForm()}>Add</Button>
         </ButtonGroup>
       )}
     >
       <Card>
-
-        <FormBuilder
-        {...args}
-        formFactor='toolbar'
-        setValues={formState}
-        additionalActions={() => (
-          <ButtonGroup variant="text">
-            <Button
-              onClick={() =>
-                setFormState({
-                  firstName: "STEEL RAIN",
-                  autocomplete: [
-                    { id: 3, label: "three" },
-
-                    { id: 5, label: "five" },
-                  ],
-                })
-              }
+        {subForm.map((i, idx) => {
+          if (!i) {
+            return <React.Fragment key={idx} />;
+          }
+          console.log("📢[index.stories.js:437]:", i);
+          const { subform, subformLayout, ...subformform } = i.form;
+          console.log(
+            "📢[index.stories.js:434]:",
+            subform,
+            subformLayout,
+            subformform
+          );
+          return !!subformform ? (
+            <FormFieldSet
+              formLabel="subform"
+              fieldArray="subform"
+              key={`subform-${idx}`}
+              formLayout={i.layout}
+              form={subformform}
+              formFactor="toolbar"
+              setValues={formState}
+              additionalActions={() => (
+                <ButtonGroup variant="text">
+                  <Button onClick={() => removeSubForm(idx)}>Remove</Button>
+                  <Button onClick={() => addSubSubForm(idx)}>Add</Button>
+                </ButtonGroup>
+              )}
             >
-              Nested
-            </Button>
-          </ButtonGroup>
-        )}
-      />
+              {(subform ?? []).map((x, subidx) => {
+                if (!x) {
+                  return <React.Fragment key={idx} />;
+                }
+                return (
+                  <FormFieldSet
+                    formLabel="subsubform"
+                    fieldArray={`subform[${idx}].subform`}
+                    key={`subform-${idx}-subsubform-${subidx}`}
+                    formLayout={x.layout}
+                    form={x.form}
+                    formFactor="toolbar"
+                    additionalActions={() => (
+                      <ButtonGroup variant="text">
+                        <Button onClick={() => removeSubSubForm(idx, subidx)}>
+                          Remove
+                        </Button>
+                      </ButtonGroup>
+                    )}
+                  />
+                );
+              })}
+            </FormFieldSet>
+          ) : (
+            <React.Fragment key={`subform-${idx}`} />
+          );
+        })}
       </Card>
     </FormBuilder>
   );
@@ -345,4 +507,32 @@ const NestedStory = ({ ...args }) => {
 export const Nested = NestedStory.bind({});
 Nested.args = {
   ...Default.args,
+
+  subformInitialValues: {
+    subform: [],
+  },
+  subformValidator: {
+    subform: Yup.array().of(
+      Yup.object().shape({
+        formfield1: Yup.string().nullable().required(),
+        formfield2: Yup.string().nullable().required(),
+      })
+    ),
+  },
+  subForm: [],
+  formLayout: ["form1", "form2"],
+  form: {
+    form1: {
+      type: "text",
+      label: "form 1",
+      initialValues: "a",
+      validator: () => Yup.string().nullable().required(),
+    },
+    form2: {
+      type: "text",
+      label: "form 2",
+      initialValues: "b",
+      validator: () => Yup.string().nullable().required(),
+    },
+  },
 };
diff --git a/yarn.lock b/yarn.lock
index 2e72d97..cb81660 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2172,20 +2172,6 @@
   resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa"
   integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==
 
-"@date-io/date-fns@1.x":
-  version "1.3.13"
-  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-1.3.13.tgz#7798844041640ab393f7e21a7769a65d672f4735"
-  integrity sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==
-  dependencies:
-    "@date-io/core" "^1.3.13"
-
-"@date-io/luxon@1.x":
-  version "1.3.13"
-  resolved "https://registry.yarnpkg.com/@date-io/luxon/-/luxon-1.3.13.tgz#68f0134bb38ef486b2ed6df01981f814c633e28a"
-  integrity sha512-9wUrJCNSMZJeYAiH+dbb45oGpnHeFP7TOH/Lt26If47gjFCkjvyINzWx+K5AGsnlP0Qosxc7hkF1yLi6ecutxw==
-  dependencies:
-    "@date-io/core" "^1.3.13"
-
 "@date-io/moment@1.x":
   version "1.3.13"
   resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-1.3.13.tgz#56c2772bc4f6675fc6970257e6033e7a7c2960f0"
@@ -11027,6 +11013,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
+
 lodash.isempty@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e"

From 10959bc09ea1157155ac725a4e66b8fd7d2bdbb2 Mon Sep 17 00:00:00 2001
From: Ray Arvin Rimorin <rayarvin@gmail.com>
Date: Thu, 13 May 2021 20:20:22 +0800
Subject: [PATCH 2/2] ZI-8112 nested form with fieldarray

---
 src/components/FormBuilder/FormBuilder.js   | 67 +++++++++++++++------
 src/components/FormBuilder/index.stories.js | 16 +----
 2 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/src/components/FormBuilder/FormBuilder.js b/src/components/FormBuilder/FormBuilder.js
index b5e1b94..44af633 100644
--- a/src/components/FormBuilder/FormBuilder.js
+++ b/src/components/FormBuilder/FormBuilder.js
@@ -14,6 +14,7 @@ import {
   FormHelperText,
   FormLabel,
   Grid,
+  IconButton,
   InputLabel,
   LinearProgress,
   ListItemText,
@@ -26,7 +27,7 @@ import {
   TextField,
   Toolbar,
 } from "@material-ui/core";
-import { Backspace } from "@material-ui/icons";
+import { Backspace, DeleteForever } from "@material-ui/icons";
 import { Autocomplete } from "@material-ui/lab";
 import {
   KeyboardDatePicker,
@@ -71,6 +72,7 @@ const FormFieldSet = ({
   children,
   isSubForm = true,
   fieldArray,
+  index
 }) => {
   const classes = useStyles();
 
@@ -382,7 +384,8 @@ const FormFieldSet = ({
     );
   }, [buildComponent, columns, form, formLayout]);
 
-  const buildFormFactor = useMemo(() => {
+  const buildFormFactor = (arrayHelpers) => {
+    console.log("📢[FormBuilder.js:385]:", arrayHelpers);
     const ActionButtons = () => {
       let variant = "";
       switch (formFactor) {
@@ -425,7 +428,20 @@ const FormFieldSet = ({
             <CardHeader
               title={formLabel}
               subheader={formSubtitle}
-              action={additionalActions()}
+              action={
+                <ButtonGroup>
+                  {additionalActions()}
+                  {!arrayHelpers || (
+                    <IconButton
+                      onClick={() => {
+                        debugger;
+                      }}
+                    >
+                      <DeleteForever />
+                    </IconButton>
+                  )}
+                </ButtonGroup>
+              }
             />
             <CardContent>
               {buildFields()}
@@ -443,7 +459,19 @@ const FormFieldSet = ({
             <Toolbar>
               <ListItemText primary={formLabel} secondary={formSubtitle} />
               <ActionButtons />
-              {additionalActions()}
+              <ButtonGroup>
+                  {additionalActions()}
+                  {!arrayHelpers || (
+                    <IconButton
+                      onClick={() => {
+                        arrayHelpers.replace(index, undefined)
+                        console.log("📢[FormBuilder.js:466]:", arrayHelpers, index);
+                      }}
+                    >
+                      <DeleteForever />
+                    </IconButton>
+                  )}
+                </ButtonGroup>
             </Toolbar>
             <Container>
               {buildFields()}
@@ -461,24 +489,23 @@ const FormFieldSet = ({
             {formik.isSubmitting && <LinearProgress />}
             <div className={classes.actionBar}>
               <ActionButtons />
-              {additionalActions()}
+              <ButtonGroup>
+                  {additionalActions()}
+                  {!arrayHelpers || (
+                    <IconButton
+                      onClick={() => {
+                        debugger;
+                      }}
+                    >
+                      <DeleteForever />
+                    </IconButton>
+                  )}
+                </ButtonGroup>
             </div>
           </>
         );
     }
-  }, [
-    additionalActions,
-    buildFields,
-    children,
-    classes.actionBar,
-    formFactor,
-    formLabel,
-    formSubtitle,
-    formik,
-    isSubForm,
-    resetLabel,
-    submitLabel,
-  ]);
+  };
 
   if (!isEmpty(fieldArray)) {
     return (
@@ -486,7 +513,7 @@ const FormFieldSet = ({
         <FieldArray
           name={fieldArray}
           render={(arrayHelpers) => {
-            return buildFormFactor;
+            return buildFormFactor(arrayHelpers);
           }}
         />
       </MuiPickersUtilsProvider>
@@ -494,7 +521,7 @@ const FormFieldSet = ({
   }
   return (
     <MuiPickersUtilsProvider utils={DateFnsUtils}>
-      {buildFormFactor}
+      {buildFormFactor()}
     </MuiPickersUtilsProvider>
   );
 };
diff --git a/src/components/FormBuilder/index.stories.js b/src/components/FormBuilder/index.stories.js
index 34cec98..ad2aa77 100644
--- a/src/components/FormBuilder/index.stories.js
+++ b/src/components/FormBuilder/index.stories.js
@@ -460,17 +460,12 @@ const NestedStory = ({ ...args }) => {
             <FormFieldSet
               formLabel="subform"
               fieldArray="subform"
+              index={idx}
               key={`subform-${idx}`}
               formLayout={i.layout}
               form={subformform}
               formFactor="toolbar"
               setValues={formState}
-              additionalActions={() => (
-                <ButtonGroup variant="text">
-                  <Button onClick={() => removeSubForm(idx)}>Remove</Button>
-                  <Button onClick={() => addSubSubForm(idx)}>Add</Button>
-                </ButtonGroup>
-              )}
             >
               {(subform ?? []).map((x, subidx) => {
                 if (!x) {
@@ -480,17 +475,12 @@ const NestedStory = ({ ...args }) => {
                   <FormFieldSet
                     formLabel="subsubform"
                     fieldArray={`subform[${idx}].subform`}
+                    index={subidx}
                     key={`subform-${idx}-subsubform-${subidx}`}
                     formLayout={x.layout}
                     form={x.form}
                     formFactor="toolbar"
-                    additionalActions={() => (
-                      <ButtonGroup variant="text">
-                        <Button onClick={() => removeSubSubForm(idx, subidx)}>
-                          Remove
-                        </Button>
-                      </ButtonGroup>
-                    )}
+                    
                   />
                 );
               })}