@teselagen/ui 0.5.19 → 0.5.20

package/src/UploadCsvWizard.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState } from "react";
 import { reduxForm, change, formValueSelector, destroy } from "redux-form";
 import { Callout, Icon, Intent, Tab, Tabs } from "@blueprintjs/core";
 import immer from "immer";
@@ -12,11 +12,10 @@ import { tgFormValueSelector } from "./utils/tgFormValues";
 import { some } from "lodash-es";
 import { times } from "lodash-es";
 import DialogFooter from "./DialogFooter";
-import DataTable from "./DataTable";
-import { removeCleanRows } from "./DataTable/utils";
+import DataTable, { removeCleanRows } from "./DataTable";
 import wrapDialog from "./wrapDialog";
 import { omit } from "lodash-es";
-import { useDispatch, useSelector } from "react-redux";
+import { connect } from "react-redux";
 import { MatchHeaders } from "./MatchHeaders";
 import { isEmpty } from "lodash-es";
 import { addSpecialPropToAsyncErrs } from "./FormComponents/tryToMatchSchemas";
@@ -36,62 +35,64 @@ 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({
-  csvValidationIssue,
-  doAllFilesHaveSameHeaders,
+  validateAgainstSchema,
+  reduxFormEntitiesArray,
   filesWIssues: _filesWIssues,
-  flippedMatchedHeaders,
-  ignoredHeadersMsg,
-  matchedHeaders,
+  finishedFiles,
   onUploadWizardFinish,
+  doAllFilesHaveSameHeaders,
+  destroyForms,
+  csvValidationIssue,
+  ignoredHeadersMsg,
   searchResults,
+  matchedHeaders,
   userSchema,
-  validateAgainstSchema
+  flippedMatchedHeaders,
+  changeForm
 }) {
-  const dispatch = useDispatch();
   // will unmount state hook
-  useEffect(() => {
+  React.useEffect(() => {
     return () => {
-      dispatch(
-        destroy(
-          "editableCellTable",
-          ...times(_filesWIssues.length, i => `editableCellTable-${i}`)
-        )
+      destroyForms(
+        "editableCellTable",
+        ...times(_filesWIssues.length, i => `editableCellTable-${i}`)
       );
     };
-  }, [_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
-      };
-    }
-  });
-
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const [hasSubmittedOuter, setSubmittedOuter] = useState();
   const [steps, setSteps] = useState(getInitialSteps(true));
 
@@ -117,6 +118,7 @@ const UploadCsvWizardDialog = compose(
         >
           {filesWIssues.map((f, i) => {
             const isGood = finishedFiles[i];
+
             const isThisTheLastBadFile = finishedFiles.every((ff, j) => {
               if (i === j) {
                 return true;
@@ -133,98 +135,108 @@ const UploadCsvWizardDialog = compose(
                     <Icon
                       intent={isGood ? "success" : "warning"}
                       icon={isGood ? "tick-circle" : "warning-sign"}
-                    />{" "}
+                    ></Icon>{" "}
                     {f.file.name}
                   </div>
                 }
                 panel={
                   <UploadCsvWizardDialogInner
-                    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;
+                    {...{
+                      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 (
-                          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 (nextUnfinishedFile !== undefined) {
+                          //do async validation here if needed
+
+                          const currentEnts =
+                            reduxFormEntitiesArray[focusedTab];
+
                           if (
                             await asyncValidateHelper(
                               validateAgainstSchema,
-                              ents,
+                              currentEnts,
                               changeForm,
-                              `editableCellTable-${i}`
+                              `editableCellTable-${focusedTab}`
                             )
                           )
                             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
+                              );
+                            })
+                          });
                         }
-                        //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
+                      })
                     }}
-                    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>
@@ -236,27 +248,34 @@ const UploadCsvWizardDialog = compose(
       comp = (
         <>
           {doAllFilesHaveSameHeaders && (
-            <SimpleStepViz style={{ marginTop: 8 }} steps={steps} />
+            <SimpleStepViz
+              style={{ marginTop: 8 }}
+              steps={steps}
+            ></SimpleStepViz>
           )}
 
           {!hasSubmittedOuter && (
             <MatchHeaders
-              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]}
+              {...{
+                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]
+              }}
             />
           )}
           {hasSubmittedOuter && tabs}
@@ -268,200 +287,230 @@ 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={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]}
+        {...{
+          validateAgainstSchema,
+          userSchema,
+          searchResults,
+          onUploadWizardFinish,
+          csvValidationIssue,
+          ignoredHeadersMsg,
+          matchedHeaders,
+          //fromRedux:
+          changeForm,
+          setFilesWIssues,
+          // doAllFilesHaveSameHeaders,
+          filesWIssues,
+          flippedMatchedHeaders,
+          // reduxFormEntities,
+          // datatableFormNames
+          fileIndex: 0,
+          ...filesWIssues[0]
+        }}
       />
     );
   }
 });
 
-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));
-
-    const { reduxFormEntities, reduxFormCellValidation } = useSelector(state =>
-      formValueSelector(datatableFormName)(
-        state,
-        "reduxFormEntities",
-        "reduxFormCellValidation"
-      )
+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));
 
-    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
+  let inner;
+  if (hasSubmitted) {
+    inner = (
+      <PreviewCsvData
+        {...{
+          datatableFormName,
+          showDoesDataLookCorrectMsg: true,
+          initialEntities: reduxFormEntities || null,
+          matchedHeaders,
+          validateAgainstSchema,
+          userSchema
+        }}
+      ></PreviewCsvData>
     );
+  } else {
+    inner = (
+      <MatchHeaders
+        {...{
+          onMultiFileUploadSubmit,
+          csvValidationIssue,
+          ignoredHeadersMsg,
+          searchResults,
+          matchedHeaders,
+          userSchema,
+          reduxFormEntitiesArray: [reduxFormEntities],
+          changeForm,
+          datatableFormName,
+          setFilesWIssues,
+          filesWIssues,
+          fileIndex
+        }}
+      ></MatchHeaders>
+    );
+  }
+  const { entsToUse, validationToUse } = removeCleanRows(
+    reduxFormEntities,
+    reduxFormCellValidation
+  );
 
-    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
+  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 ||
+            (() => {
               setSteps(
                 immer(steps, draft => {
-                  draft[0].active = false;
-                  draft[0].completed = true;
-                  draft[1].active = true;
+                  draft[0].active = true;
+                  draft[0].completed = false;
+                  draft[1].active = false;
                 })
               );
-              setSubmitted(true);
-            } else {
-              if (!onMultiFileUploadSubmit) {
-                //do async validation here if needed
-                if (
-                  await asyncValidateHelper(
-                    validateAgainstSchema,
-                    entsToUse,
-                    changeForm,
-                    `editableCellTable`
-                  )
+              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`
                 )
-                  return;
-              }
-              //step 2 submit
-              const payload = maybeStripIdFromEntities(
-                entsToUse,
-                validateAgainstSchema
-              );
-              return onMultiFileUploadSubmit
-                ? await onMultiFileUploadSubmit()
-                : onUploadWizardFinish({ res: [payload] });
+              )
+                return;
             }
-          })}
-          style={{ alignSelf: "end" }}
-        />
-      </div>
-    );
-  }
-);
+            //step 2 submit
+            const payload = maybeStripIdFromEntities(
+              entsToUse,
+              validateAgainstSchema
+            );
+            return onMultiFileUploadSubmit
+              ? await onMultiFileUploadSubmit()
+              : onUploadWizardFinish({ res: [payload] });
+          }
+        })}
+        style={{ alignSelf: "end" }}
+      ></DialogFooter>
+    </div>
+  );
+});
 
 export default UploadCsvWizardDialog;
 
 const exampleData = { userData: times(5).map(() => ({ _isClean: true })) };
-
-export const PreviewCsvData = observer(props => {
+export const PreviewCsvData = observer(function (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 &&
@@ -526,7 +575,7 @@ export const PreviewCsvData = observer(props => {
           <validateAgainstSchema.HeaderComp
             {...props}
             // {...{ forceUpdate }}
-          />
+          ></validateAgainstSchema.HeaderComp>
         )}
       </div>
       <DataTable
@@ -542,7 +591,7 @@ export const PreviewCsvData = observer(props => {
         initialEntities={(initialEntities ? initialEntities : data) || []}
         entities={(initialEntities ? initialEntities : data) || []}
         schema={validateAgainstSchema}
-      />
+      ></DataTable>
     </div>
   );
 });
@@ -559,12 +608,14 @@ export const SimpleInsertDataDialog = compose(
     "reduxFormEntities",
     "reduxFormCellValidation"
   ),
+  connect(undefined, { changeForm: change }),
   observer
 )(function SimpleInsertDataDialog({
   onSimpleInsertDialogFinish,
   reduxFormEntities,
   reduxFormCellValidation,
   validateAgainstSchema,
+  changeForm,
   submitting,
   isEditingExistingFile,
   matchedHeaders,
@@ -574,14 +625,11 @@ 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">
@@ -594,17 +642,20 @@ export const SimpleInsertDataDialog = compose(
           label="File Name:"
           defaultValue={"manual_data_entry"}
           name="fileName"
-        />
+        ></InputField>
         <PreviewCsvData
-          matchedHeaders={matchedHeaders}
-          isEditingExistingFile={isEditingExistingFile}
-          showDoesDataLookCorrectMsg={showDoesDataLookCorrectMsg}
-          headerMessage={headerMessage}
-          validateAgainstSchema={validateAgainstSchema}
-          userSchema={userSchema}
-          initialEntities={initialEntities}
-          datatableFormName={"simpleInsertEditableTable"}
-        />
+          {...{
+            matchedHeaders,
+            isEditingExistingFile,
+            showDoesDataLookCorrectMsg,
+            headerMessage,
+            // onlyShowRowsWErrors,
+            validateAgainstSchema,
+            userSchema,
+            initialEntities,
+            datatableFormName: "simpleInsertEditableTable"
+          }}
+        ></PreviewCsvData>
       </div>
       <DialogFooter
         submitting={submitting}
@@ -630,7 +681,7 @@ export const SimpleInsertDataDialog = compose(
         })}
         disabled={!entsToUse?.length || some(validationToUse, e => e)}
         text={isEditingExistingFile ? "Edit Data" : "Add File"}
-      />
+      ></DialogFooter>
     </>
   );
 });
@@ -664,3 +715,11 @@ 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)`
+// }