@teselagen/ui 0.4.14 → 0.4.15

package/src/UploadCsvWizard.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { reduxForm, change, formValueSelector, destroy } from "redux-form";
 import { Callout, Icon, Intent, Tab, Tabs } from "@blueprintjs/core";
 import immer from "immer";
@@ -12,10 +12,11 @@ import { tgFormValueSelector } from "./utils/tgFormValues";
 import { some } from "lodash-es";
 import { times } from "lodash-es";
 import DialogFooter from "./DialogFooter";
-import DataTable, { removeCleanRows } from "./DataTable";
+import DataTable from "./DataTable";
+import { removeCleanRows } from "./DataTable/utils";
 import wrapDialog from "./wrapDialog";
 import { omit } from "lodash-es";
-import { connect } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { MatchHeaders } from "./MatchHeaders";
 import { isEmpty } from "lodash-es";
 import { addSpecialPropToAsyncErrs } from "./FormComponents/tryToMatchSchemas";
@@ -35,64 +36,62 @@ const UploadCsvWizardDialog = compose(
   reduxForm({
     form: "UploadCsvWizardDialog"
   }),
-  connect(
-    (state, props) => {
-      if (props.filesWIssues.length > 0) {
-        const reduxFormEntitiesArray = [];
-        const finishedFiles = props.filesWIssues.map((f, i) => {
-          const { reduxFormEntities, reduxFormCellValidation } =
-            formValueSelector(`editableCellTable-${i}`)(
-              state,
-              "reduxFormEntities",
-              "reduxFormCellValidation"
-            );
-          reduxFormEntitiesArray.push(reduxFormEntities);
-          const { entsToUse, validationToUse } = removeCleanRows(
-            reduxFormEntities,
-            reduxFormCellValidation
-          );
-          return (
-            entsToUse &&
-            entsToUse.length &&
-            !some(validationToUse, v => v) &&
-            entsToUse
-          );
-        });
-        return {
-          reduxFormEntitiesArray,
-          finishedFiles
-        };
-      }
-    },
-    { changeForm: change, destroyForms: destroy }
-  ),
   observer
 )(function UploadCsvWizardDialogOuter({
-  validateAgainstSchema,
-  reduxFormEntitiesArray,
-  filesWIssues: _filesWIssues,
-  finishedFiles,
-  onUploadWizardFinish,
-  doAllFilesHaveSameHeaders,
-  destroyForms,
   csvValidationIssue,
+  doAllFilesHaveSameHeaders,
+  filesWIssues: _filesWIssues,
+  flippedMatchedHeaders,
   ignoredHeadersMsg,
-  searchResults,
   matchedHeaders,
+  onUploadWizardFinish,
+  searchResults,
   userSchema,
-  flippedMatchedHeaders,
-  changeForm
+  validateAgainstSchema
 }) {
+  const dispatch = useDispatch();
   // will unmount state hook
-  React.useEffect(() => {
+  useEffect(() => {
     return () => {
-      destroyForms(
-        "editableCellTable",
-        ...times(_filesWIssues.length, i => `editableCellTable-${i}`)
+      dispatch(
+        destroy(
+          "editableCellTable",
+          ...times(_filesWIssues.length, i => `editableCellTable-${i}`)
+        )
       );
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [_filesWIssues.length, dispatch]);
+
+  const changeForm = (...args) => dispatch(change(...args));
+  const { reduxFormEntitiesArray, finishedFiles } = useSelector(state => {
+    if (_filesWIssues.length > 0) {
+      const reduxFormEntitiesArray = [];
+      const finishedFiles = _filesWIssues.map((f, i) => {
+        const { reduxFormEntities, reduxFormCellValidation } =
+          formValueSelector(`editableCellTable-${i}`)(
+            state,
+            "reduxFormEntities",
+            "reduxFormCellValidation"
+          );
+        reduxFormEntitiesArray.push(reduxFormEntities);
+        const { entsToUse, validationToUse } = removeCleanRows(
+          reduxFormEntities,
+          reduxFormCellValidation
+        );
+        return (
+          entsToUse &&
+          entsToUse.length &&
+          !some(validationToUse, v => v) &&
+          entsToUse
+        );
+      });
+      return {
+        reduxFormEntitiesArray,
+        finishedFiles
+      };
+    }
+  });
+
   const [hasSubmittedOuter, setSubmittedOuter] = useState();
   const [steps, setSteps] = useState(getInitialSteps(true));
 
@@ -118,7 +117,6 @@ const UploadCsvWizardDialog = compose(
         >
           {filesWIssues.map((f, i) => {
             const isGood = finishedFiles[i];
-
             const isThisTheLastBadFile = finishedFiles.every((ff, j) => {
               if (i === j) {
                 return true;
@@ -135,108 +133,98 @@ const UploadCsvWizardDialog = compose(
                     <Icon
                       intent={isGood ? "success" : "warning"}
                       icon={isGood ? "tick-circle" : "warning-sign"}
-                    ></Icon>{" "}
+                    />{" "}
                     {f.file.name}
                   </div>
                 }
                 panel={
                   <UploadCsvWizardDialogInner
-                    {...{
-                      isThisTheLastBadFile,
-                      onBackClick:
-                        doAllFilesHaveSameHeaders &&
-                        (() => {
-                          setSubmittedOuter(false);
-                          setSteps(getInitialSteps(true));
-                        }),
-                      onMultiFileUploadSubmit: async () => {
-                        let nextUnfinishedFile;
-                        //find the next unfinished file
-                        for (
-                          let j = (i + 1) % finishedFiles.length;
-                          j < finishedFiles.length;
-                          j++
-                        ) {
-                          if (j === i) {
-                            break;
-                          } else if (!finishedFiles[j]) {
-                            nextUnfinishedFile = j;
-                            break;
-                          } else if (j === finishedFiles.length - 1) {
-                            j = -1;
-                          }
+                    isThisTheLastBadFile={isThisTheLastBadFile}
+                    onBackClick={
+                      doAllFilesHaveSameHeaders &&
+                      (() => {
+                        setSubmittedOuter(false);
+                        setSteps(getInitialSteps(true));
+                      })
+                    }
+                    onMultiFileUploadSubmit={async () => {
+                      let nextUnfinishedFile;
+                      //find the next unfinished file
+                      for (
+                        let j = (i + 1) % finishedFiles.length;
+                        j < finishedFiles.length;
+                        j++
+                      ) {
+                        if (j === i) {
+                          break;
+                        } else if (!finishedFiles[j]) {
+                          nextUnfinishedFile = j;
+                          break;
+                        } else if (j === finishedFiles.length - 1) {
+                          j = -1;
                         }
-
-                        if (nextUnfinishedFile !== undefined) {
-                          //do async validation here if needed
-
-                          const currentEnts =
-                            reduxFormEntitiesArray[focusedTab];
-
+                      }
+                      if (nextUnfinishedFile !== undefined) {
+                        //do async validation here if needed
+                        const currentEnts = reduxFormEntitiesArray[focusedTab];
+                        if (
+                          await asyncValidateHelper(
+                            validateAgainstSchema,
+                            currentEnts,
+                            changeForm,
+                            `editableCellTable-${focusedTab}`
+                          )
+                        )
+                          return;
+                        setFocusedTab(nextUnfinishedFile);
+                      } else {
+                        //do async validation here if needed
+                        for (const [i, ents] of finishedFiles.entries()) {
                           if (
                             await asyncValidateHelper(
                               validateAgainstSchema,
-                              currentEnts,
+                              ents,
                               changeForm,
-                              `editableCellTable-${focusedTab}`
+                              `editableCellTable-${i}`
                             )
                           )
                             return;
-
-                          setFocusedTab(nextUnfinishedFile);
-                        } else {
-                          //do async validation here if needed
-
-                          for (const [i, ents] of finishedFiles.entries()) {
-                            if (
-                              await asyncValidateHelper(
-                                validateAgainstSchema,
-                                ents,
-                                changeForm,
-                                `editableCellTable-${i}`
-                              )
-                            )
-                              return;
-                          }
-
-                          //we are done
-                          onUploadWizardFinish({
-                            res: finishedFiles.map(ents => {
-                              return maybeStripIdFromEntities(
-                                ents,
-                                f.validateAgainstSchema
-                              );
-                            })
-                          });
                         }
-                      },
-                      validateAgainstSchema,
-                      reduxFormEntitiesArray,
-                      filesWIssues,
-                      finishedFiles,
-                      onUploadWizardFinish,
-                      doAllFilesHaveSameHeaders,
-                      destroyForms,
-                      setFilesWIssues,
-                      csvValidationIssue,
-                      ignoredHeadersMsg,
-                      searchResults,
-                      matchedHeaders,
-                      userSchema,
-                      flippedMatchedHeaders,
-                      // reduxFormEntities,
-                      changeForm,
-                      fileIndex: i,
-                      form: `correctCSVHeadersForm-${i}`,
-                      datatableFormName: `editableCellTable-${i}`,
-                      ...f,
-                      ...(doAllFilesHaveSameHeaders && {
-                        csvValidationIssue: false
-                      })
+                        //we are done
+                        onUploadWizardFinish({
+                          res: finishedFiles.map(ents => {
+                            return maybeStripIdFromEntities(
+                              ents,
+                              f.validateAgainstSchema
+                            );
+                          })
+                        });
+                      }
                     }}
+                    validateAgainstSchema={validateAgainstSchema}
+                    reduxFormEntitiesArray={reduxFormEntitiesArray}
+                    filesWIssues={filesWIssues}
+                    finishedFiles={finishedFiles}
+                    onUploadWizardFinish={onUploadWizardFinish}
+                    doAllFilesHaveSameHeaders={doAllFilesHaveSameHeaders}
+                    setFilesWIssues={setFilesWIssues}
+                    csvValidationIssue={csvValidationIssue}
+                    ignoredHeadersMsg={ignoredHeadersMsg}
+                    searchResults={searchResults}
+                    matchedHeader={matchedHeaders}
+                    userSchema={userSchema}
+                    flippedMatchedHeaders={flippedMatchedHeaders}
+                    changeForm={changeForm}
+                    fileIndex={i}
+                    form={`correctCSVHeadersForm-${i}`}
+                    datatableFormName={`editableCellTable-${i}`}
+                    {...f}
+                    {...(doAllFilesHaveSameHeaders && {
+                      csvValidationIssue: false
+                    })}
                   />
                 }
-              ></Tab>
+              />
             );
           })}
         </Tabs>
@@ -248,34 +236,27 @@ const UploadCsvWizardDialog = compose(
       comp = (
         <>
           {doAllFilesHaveSameHeaders && (
-            <SimpleStepViz
-              style={{ marginTop: 8 }}
-              steps={steps}
-            ></SimpleStepViz>
+            <SimpleStepViz style={{ marginTop: 8 }} steps={steps} />
           )}
 
           {!hasSubmittedOuter && (
             <MatchHeaders
-              {...{
-                doAllFilesHaveSameHeaders,
-                datatableFormNames: filesWIssues.map((f, i) => {
-                  return `editableCellTable-${i}`;
-                }),
-                reduxFormEntitiesArray,
-                // onMultiFileUploadSubmit,
-                csvValidationIssue,
-                ignoredHeadersMsg,
-                searchResults,
-                matchedHeaders,
-                userSchema,
-                flippedMatchedHeaders,
-                // reduxFormEntities,
-                changeForm,
-                setFilesWIssues,
-                filesWIssues,
-                fileIndex: 0,
-                ...filesWIssues[0]
-              }}
+              doAllFilesHaveSameHeaders={doAllFilesHaveSameHeaders}
+              datatableFormNames={filesWIssues.map((f, i) => {
+                return `editableCellTable-${i}`;
+              })}
+              reduxFormEntitiesArray={reduxFormEntitiesArray}
+              csvValidationIssue={csvValidationIssue}
+              ignoredHeadersMsg={ignoredHeadersMsg}
+              searchResults={searchResults}
+              matchedHeaders={matchedHeaders}
+              userSchema={userSchema}
+              flippedMatchedHeaders={flippedMatchedHeaders}
+              changeForm={changeForm}
+              setFilesWIssues={setFilesWIssues}
+              filesWIssues={filesWIssues}
+              fileIndex={0}
+              {...filesWIssues[0]}
             />
           )}
           {hasSubmittedOuter && tabs}
@@ -287,230 +268,200 @@ const UploadCsvWizardDialog = compose(
                 setSteps(getInitialSteps(false));
               }}
               text="Review and Edit Data"
-            ></DialogFooter>
+            />
           )}
         </>
       );
     }
-    return (
-      <div
-        style={{
-          padding: 10
-        }}
-      >
-        {comp}
-      </div>
-    );
+    return <div style={{ padding: 10 }}>{comp}</div>;
   } else {
     return (
       <UploadCsvWizardDialogInner
         form="correctCSVHeadersForm"
-        {...{
-          validateAgainstSchema,
-          userSchema,
-          searchResults,
-          onUploadWizardFinish,
-          csvValidationIssue,
-          ignoredHeadersMsg,
-          matchedHeaders,
-          //fromRedux:
-          changeForm,
-          setFilesWIssues,
-          // doAllFilesHaveSameHeaders,
-          filesWIssues,
-          flippedMatchedHeaders,
-          // reduxFormEntities,
-          // datatableFormNames
-          fileIndex: 0,
-          ...filesWIssues[0]
-        }}
+        validateAgainstSchema={validateAgainstSchema}
+        userSchema={userSchema}
+        searchResults={searchResults}
+        onUploadWizardFinish={onUploadWizardFinish}
+        csvValidationIssue={csvValidationIssue}
+        ignoredHeadersMsg={ignoredHeadersMsg}
+        matchedHeaders={matchedHeaders}
+        changeForm={changeForm}
+        setFilesWIssues={setFilesWIssues}
+        filesWIssues={filesWIssues}
+        flippedMatchedHeaders={flippedMatchedHeaders}
+        fileIndex={0}
+        {...filesWIssues[0]}
       />
     );
   }
 });
 
-const UploadCsvWizardDialogInner = compose(
-  reduxForm(),
-  connect((state, props) => {
-    return formValueSelector(props.datatableFormName || "editableCellTable")(
-      state,
-      "reduxFormEntities",
-      "reduxFormCellValidation"
-    );
-  })
-)(function UploadCsvWizardDialogInner({
-  validateAgainstSchema,
-  userSchema,
-  searchResults,
-  onUploadWizardFinish,
-  csvValidationIssue,
-  ignoredHeadersMsg,
-  matchedHeaders,
-  //fromRedux:
-  handleSubmit,
-  fileIndex,
-  reduxFormEntities,
-  onBackClick,
-  reduxFormCellValidation,
-  changeForm,
-  setFilesWIssues,
-  doAllFilesHaveSameHeaders,
-  filesWIssues,
-  datatableFormName = "editableCellTable",
-  onMultiFileUploadSubmit,
-  isThisTheLastBadFile,
-  submitting
-}) {
-  const [hasSubmitted, setSubmitted] = useState(!csvValidationIssue);
-  const [steps, setSteps] = useState(getInitialSteps(csvValidationIssue));
+const UploadCsvWizardDialogInner = reduxForm()(
+  function UploadCsvWizardDialogInner({
+    validateAgainstSchema,
+    userSchema,
+    searchResults,
+    onUploadWizardFinish,
+    csvValidationIssue,
+    ignoredHeadersMsg,
+    matchedHeaders,
+    handleSubmit,
+    fileIndex,
+    onBackClick,
+    changeForm,
+    setFilesWIssues,
+    doAllFilesHaveSameHeaders,
+    filesWIssues,
+    datatableFormName = "editableCellTable",
+    onMultiFileUploadSubmit,
+    isThisTheLastBadFile,
+    submitting
+  }) {
+    const [hasSubmitted, setSubmitted] = useState(!csvValidationIssue);
+    const [steps, setSteps] = useState(getInitialSteps(csvValidationIssue));
 
-  let inner;
-  if (hasSubmitted) {
-    inner = (
-      <PreviewCsvData
-        {...{
-          datatableFormName,
-          showDoesDataLookCorrectMsg: true,
-          initialEntities: reduxFormEntities || null,
-          matchedHeaders,
-          validateAgainstSchema,
-          userSchema
-        }}
-      ></PreviewCsvData>
+    const { reduxFormEntities, reduxFormCellValidation } = useSelector(state =>
+      formValueSelector(datatableFormName)(
+        state,
+        "reduxFormEntities",
+        "reduxFormCellValidation"
+      )
     );
-  } else {
-    inner = (
-      <MatchHeaders
-        {...{
-          onMultiFileUploadSubmit,
-          csvValidationIssue,
-          ignoredHeadersMsg,
-          searchResults,
-          matchedHeaders,
-          userSchema,
-          reduxFormEntitiesArray: [reduxFormEntities],
-          changeForm,
-          datatableFormName,
-          setFilesWIssues,
-          filesWIssues,
-          fileIndex
-        }}
-      ></MatchHeaders>
+
+    let inner;
+    if (hasSubmitted) {
+      inner = (
+        <PreviewCsvData
+          datatableFormName={datatableFormName}
+          showDoesDataLookCorrectMsg
+          initialEntities={reduxFormEntities || null}
+          matchedHeaders={matchedHeaders}
+          validateAgainstSchema={validateAgainstSchema}
+          userSchema={userSchema}
+        />
+      );
+    } else {
+      inner = (
+        <MatchHeaders
+          onMultiFileUploadSubmit={onMultiFileUploadSubmit}
+          csvValidationIssue={csvValidationIssue}
+          ignoredHeadersMsg={ignoredHeadersMsg}
+          searchResults={searchResults}
+          matchedHeaders={matchedHeaders}
+          userSchema={userSchema}
+          reduxFormEntitiesArray={[reduxFormEntities]}
+          changeForm={changeForm}
+          datatableFormName={datatableFormName}
+          setFilesWIssues={setFilesWIssues}
+          filesWIssues={filesWIssues}
+          fileIndex={fileIndex}
+        />
+      );
+    }
+    const { entsToUse, validationToUse } = removeCleanRows(
+      reduxFormEntities,
+      reduxFormCellValidation
     );
-  }
-  const { entsToUse, validationToUse } = removeCleanRows(
-    reduxFormEntities,
-    reduxFormCellValidation
-  );
 
-  return (
-    <div>
-      {!doAllFilesHaveSameHeaders && (
-        <SimpleStepViz style={{ marginTop: 8 }} steps={steps}></SimpleStepViz>
-      )}
-      <div className="bp3-dialog-body">{inner}</div>
-      <DialogFooter
-        text={
-          !hasSubmitted
-            ? "Review and Edit Data"
-            : onMultiFileUploadSubmit
-              ? isThisTheLastBadFile
-                ? "Finalize Files"
-                : "Next File"
-              : "Add File"
-        }
-        submitting={submitting}
-        disabled={
-          hasSubmitted && (!entsToUse?.length || some(validationToUse, v => v))
-        }
-        intent={
-          hasSubmitted && onMultiFileUploadSubmit && isThisTheLastBadFile
-            ? Intent.SUCCESS
-            : Intent.PRIMARY
-        }
-        noCancel={onMultiFileUploadSubmit}
-        {...(hasSubmitted && {
-          onBackClick:
-            onBackClick ||
-            (() => {
+    return (
+      <div>
+        {!doAllFilesHaveSameHeaders && (
+          <SimpleStepViz style={{ marginTop: 8 }} steps={steps} />
+        )}
+        <div className="bp3-dialog-body">{inner}</div>
+        <DialogFooter
+          text={
+            !hasSubmitted
+              ? "Review and Edit Data"
+              : onMultiFileUploadSubmit
+                ? isThisTheLastBadFile
+                  ? "Finalize Files"
+                  : "Next File"
+                : "Add File"
+          }
+          submitting={submitting}
+          disabled={
+            hasSubmitted &&
+            (!entsToUse?.length || some(validationToUse, v => v))
+          }
+          intent={
+            hasSubmitted && onMultiFileUploadSubmit && isThisTheLastBadFile
+              ? Intent.SUCCESS
+              : Intent.PRIMARY
+          }
+          noCancel={onMultiFileUploadSubmit}
+          {...(hasSubmitted && {
+            onBackClick:
+              onBackClick ||
+              (() => {
+                setSteps(
+                  immer(steps, draft => {
+                    draft[0].active = true;
+                    draft[0].completed = false;
+                    draft[1].active = false;
+                  })
+                );
+                setSubmitted(false);
+              })
+          })}
+          onClick={handleSubmit(async function () {
+            if (!hasSubmitted) {
+              //step 1 submit
               setSteps(
                 immer(steps, draft => {
-                  draft[0].active = true;
-                  draft[0].completed = false;
-                  draft[1].active = false;
+                  draft[0].active = false;
+                  draft[0].completed = true;
+                  draft[1].active = true;
                 })
               );
-              setSubmitted(false);
-            })
-        })}
-        onClick={handleSubmit(async function () {
-          if (!hasSubmitted) {
-            //step 1 submit
-            setSteps(
-              immer(steps, draft => {
-                draft[0].active = false;
-                draft[0].completed = true;
-                draft[1].active = true;
-              })
-            );
-            setSubmitted(true);
-          } else {
-            if (!onMultiFileUploadSubmit) {
-              //do async validation here if needed
-              if (
-                await asyncValidateHelper(
-                  validateAgainstSchema,
-                  entsToUse,
-                  changeForm,
-                  `editableCellTable`
+              setSubmitted(true);
+            } else {
+              if (!onMultiFileUploadSubmit) {
+                //do async validation here if needed
+                if (
+                  await asyncValidateHelper(
+                    validateAgainstSchema,
+                    entsToUse,
+                    changeForm,
+                    `editableCellTable`
+                  )
                 )
-              )
-                return;
+                  return;
+              }
+              //step 2 submit
+              const payload = maybeStripIdFromEntities(
+                entsToUse,
+                validateAgainstSchema
+              );
+              return onMultiFileUploadSubmit
+                ? await onMultiFileUploadSubmit()
+                : onUploadWizardFinish({ res: [payload] });
             }
-            //step 2 submit
-            const payload = maybeStripIdFromEntities(
-              entsToUse,
-              validateAgainstSchema
-            );
-            return onMultiFileUploadSubmit
-              ? await onMultiFileUploadSubmit()
-              : onUploadWizardFinish({ res: [payload] });
-          }
-        })}
-        style={{ alignSelf: "end" }}
-      ></DialogFooter>
-    </div>
-  );
-});
+          })}
+          style={{ alignSelf: "end" }}
+        />
+      </div>
+    );
+  }
+);
 
 export default UploadCsvWizardDialog;
 
 const exampleData = { userData: times(5).map(() => ({ _isClean: true })) };
-export const PreviewCsvData = observer(function (props) {
+
+export const PreviewCsvData = observer(props => {
   const {
     matchedHeaders,
     isEditingExistingFile,
     showDoesDataLookCorrectMsg,
     headerMessage,
     datatableFormName,
-    // onlyShowRowsWErrors,
     validateAgainstSchema,
     userSchema = exampleData,
     initialEntities
   } = props;
   const rerenderKey = useRef(0);
   rerenderKey.current = rerenderKey.current + 1;
-  // const useExampleData = userSchema === exampleData;
-  // const [loading, setLoading] = useState(true);
-  // useEffect(() => {
-  //   // simulate layout change outside of React lifecycle
-  //   setTimeout(() => {
-  //     setLoading(false);
-  //   }, 400);
-  // }, []);
-
-  // const [val, forceUpdate] = useForceUpdate();
-
   const data =
     userSchema.userData &&
     userSchema.userData.length &&
@@ -575,7 +526,7 @@ export const PreviewCsvData = observer(function (props) {
           <validateAgainstSchema.HeaderComp
             {...props}
             // {...{ forceUpdate }}
-          ></validateAgainstSchema.HeaderComp>
+          />
         )}
       </div>
       <DataTable
@@ -591,7 +542,7 @@ export const PreviewCsvData = observer(function (props) {
         initialEntities={(initialEntities ? initialEntities : data) || []}
         entities={(initialEntities ? initialEntities : data) || []}
         schema={validateAgainstSchema}
-      ></DataTable>
+      />
     </div>
   );
 });
@@ -608,14 +559,12 @@ export const SimpleInsertDataDialog = compose(
     "reduxFormEntities",
     "reduxFormCellValidation"
   ),
-  connect(undefined, { changeForm: change }),
   observer
 )(function SimpleInsertDataDialog({
   onSimpleInsertDialogFinish,
   reduxFormEntities,
   reduxFormCellValidation,
   validateAgainstSchema,
-  changeForm,
   submitting,
   isEditingExistingFile,
   matchedHeaders,
@@ -625,11 +574,14 @@ export const SimpleInsertDataDialog = compose(
   userSchema,
   initialEntities
 }) {
+  const dispatch = useDispatch();
   const { entsToUse, validationToUse } = removeCleanRows(
     reduxFormEntities,
     reduxFormCellValidation
   );
 
+  const changeForm = (...args) => dispatch(change(...args));
+
   return (
     <>
       <div className="bp3-dialog-body">
@@ -642,20 +594,17 @@ export const SimpleInsertDataDialog = compose(
           label="File Name:"
           defaultValue={"manual_data_entry"}
           name="fileName"
-        ></InputField>
+        />
         <PreviewCsvData
-          {...{
-            matchedHeaders,
-            isEditingExistingFile,
-            showDoesDataLookCorrectMsg,
-            headerMessage,
-            // onlyShowRowsWErrors,
-            validateAgainstSchema,
-            userSchema,
-            initialEntities,
-            datatableFormName: "simpleInsertEditableTable"
-          }}
-        ></PreviewCsvData>
+          matchedHeaders={matchedHeaders}
+          isEditingExistingFile={isEditingExistingFile}
+          showDoesDataLookCorrectMsg={showDoesDataLookCorrectMsg}
+          headerMessage={headerMessage}
+          validateAgainstSchema={validateAgainstSchema}
+          userSchema={userSchema}
+          initialEntities={initialEntities}
+          datatableFormName={"simpleInsertEditableTable"}
+        />
       </div>
       <DialogFooter
         submitting={submitting}
@@ -681,7 +630,7 @@ export const SimpleInsertDataDialog = compose(
         })}
         disabled={!entsToUse?.length || some(validationToUse, e => e)}
         text={isEditingExistingFile ? "Edit Data" : "Add File"}
-      ></DialogFooter>
+      />
     </>
   );
 });
@@ -715,11 +664,3 @@ function maybeStripIdFromEntities(ents, validateAgainstSchema) {
   }
   return toRet?.map(e => omit(e, ["_isClean"]));
 }
-
-//create your forceUpdate hook
-// function useForceUpdate() {
-//   const [val, setValue] = useState(0); // integer state
-//   return [val, () => setValue(value => value + 1)]; // update state to force render
-//   // A function that increment 👆🏻 the previous state like here
-//   // is better than directly setting `setValue(value + 1)`
-// }