@teselagen/ui 0.6.6 → 0.7.1

package/src/UploadCsvWizard.js

@@ -1,344 +1,252 @@
-import React, { useRef, useState } from "react";
+import React, { useState, useEffect, useMemo, useCallback } from "react";
 import { reduxForm, change, formValueSelector, destroy } from "redux-form";
 import { Callout, Icon, Intent, Tab, Tabs } from "@blueprintjs/core";
 import immer from "immer";
-import { observer } from "mobx-react";
 import "./UploadCsvWizard.css";
 import { isFunction } from "lodash-es";
 import { compose } from "recompose";
 import SimpleStepViz from "./SimpleStepViz";
 import { nanoid } from "nanoid";
-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 { useDeepEqualMemo } from "./utils/hooks";
+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";
 import { cloneDeep } from "lodash-es";
 import { InputField } from "./FormComponents";
 
+const asyncValidateHelper = async (
+  validateAgainstSchema,
+  currentEnts,
+  changeForm,
+  tableName
+) => {
+  if (!validateAgainstSchema.tableWideAsyncValidation) return;
+  const res = await validateAgainstSchema.tableWideAsyncValidation({
+    entities: currentEnts
+  });
+  if (!isEmpty(res)) {
+    changeForm(tableName, "reduxFormCellValidation", {
+      ...addSpecialPropToAsyncErrs(res)
+    });
+    return true;
+  }
+};
+
+const maybeStripIdFromEntities = (ents, validateAgainstSchema) => {
+  let toRet;
+  if (validateAgainstSchema?.fields?.some(({ path }) => path === "id")) {
+    toRet = ents;
+  } else {
+    // if the schema we're validating against itself didn't have an id field,
+    // we don't want to include it in the returned entities
+    toRet = ents?.map(e => omit(e, ["id"]));
+  }
+  return toRet?.map(e => omit(e, ["_isClean"]));
+};
+
+const exampleData = { userData: times(5).map(() => ({ _isClean: true })) };
+
 const getInitialSteps = csvValidationIssue => [
   { text: "Review Headers", active: csvValidationIssue },
   { text: "Review Data", active: !csvValidationIssue }
 ];
 
-const UploadCsvWizardDialog = compose(
+export const PreviewCsvData = props => {
+  const {
+    matchedHeaders,
+    isEditingExistingFile,
+    showDoesDataLookCorrectMsg,
+    headerMessage,
+    datatableFormName = "editableCellTable",
+    validateAgainstSchema,
+    userSchema = exampleData,
+    entities
+  } = props;
+
+  const data = useMemo(() => {
+    return (
+      userSchema.userData &&
+      userSchema.userData.length &&
+      userSchema.userData.map((row, i) => {
+        const toRet = {
+          _isClean: row._isClean
+        };
+        validateAgainstSchema.fields.forEach(({ path, defaultValue }) => {
+          const matchingKey = matchedHeaders?.[path];
+          if (!matchingKey) {
+            toRet[path] = defaultValue === undefined ? defaultValue : "";
+          } else {
+            toRet[path] = row[matchingKey];
+          }
+          if (toRet[path] === undefined || toRet[path] === "") {
+            if (defaultValue) {
+              if (isFunction(defaultValue)) {
+                toRet[path] = defaultValue(i, row);
+              } else toRet[path] = defaultValue;
+            } else {
+              // const exampleToUse = isArray(example) //this means that the row was not added by a user
+              //   ? example[i1]
+              //   : i1 === 0 && example;
+              toRet[path] = "";
+              // if (useExampleData && exampleToUse) {
+              //   toRet[path] = exampleToUse;
+              //   delete toRet._isClean;
+              // } else {
+              // }
+            }
+          }
+        });
+
+        if (row.id === undefined) {
+          toRet.id = nanoid();
+        } else {
+          toRet.id = row.id;
+        }
+        return toRet;
+      })
+    );
+  }, [matchedHeaders, userSchema, validateAgainstSchema.fields]);
+
+  return (
+    <div style={{ minWidth: 400 }}>
+      <Callout style={{ marginBottom: 5 }} intent="primary">
+        {headerMessage ||
+          (showDoesDataLookCorrectMsg
+            ? "Does this data look correct? Edit it as needed."
+            : `${
+                isEditingExistingFile ? "Edit" : "Input"
+              } your data here. Hover table headers for additional instructions.`)}
+      </Callout>
+      {validateAgainstSchema.description && (
+        <Callout>{validateAgainstSchema.description}</Callout>
+      )}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "flex-start"
+        }}
+      >
+        {validateAgainstSchema.HeaderComp && (
+          <validateAgainstSchema.HeaderComp {...props} />
+        )}
+      </div>
+      <DataTable
+        maxWidth={800}
+        maxHeight={500}
+        destroyOnUnmount={false}
+        doNotValidateUntouchedRows
+        formName={datatableFormName}
+        isSimple
+        isCellEditable
+        entities={(entities ? entities : data) || []}
+        schema={validateAgainstSchema}
+      />
+    </div>
+  );
+};
+
+export const SimpleInsertDataDialog = compose(
   wrapDialog({
     canEscapeKeyClose: false,
+    title: "Build CSV File",
     style: { width: "fit-content" }
   }),
-  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,
-  ignoredHeadersMsg,
-  searchResults,
+  reduxForm({ form: "SimpleInsertDataDialog" })
+)(({
+  dataTableForm = "simpleInsertEditableTable",
+  entities,
+  handleSubmit,
+  headerMessage,
+  isEditingExistingFile,
   matchedHeaders,
+  onSimpleInsertDialogFinish,
+  showDoesDataLookCorrectMsg,
+  submitting,
   userSchema,
-  flippedMatchedHeaders,
-  changeForm
-}) {
-  // will unmount state hook
-  React.useEffect(() => {
-    return () => {
-      destroyForms(
-        "editableCellTable",
-        ...times(_filesWIssues.length, i => `editableCellTable-${i}`)
-      );
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const [hasSubmittedOuter, setSubmittedOuter] = useState();
-  const [steps, setSteps] = useState(getInitialSteps(true));
-
-  const [focusedTab, setFocusedTab] = useState(0);
-  const [filesWIssues, setFilesWIssues] = useState(
-    _filesWIssues.map(cloneDeep) //do this little trick to stop immer from preventing the file from being modified
+  validateAgainstSchema,
+  initialValues
+}) => {
+  const dispatch = useDispatch();
+  const _reduxFormEntities = useSelector(
+    state => state.form?.[dataTableForm]?.values.reduxFormEntities
   );
-  if (filesWIssues.length > 1) {
-    const tabs = (
-      <>
-        <Callout style={{ marginBottom: 10, flexGrow: 0 }} intent="warning">
-          <div>
-            Please look over each of the following files and correct any issues.
-          </div>
-        </Callout>
-        <Tabs
-          // renderActiveTabPanelOnly
-          selectedTabId={focusedTab}
-          onChange={i => {
-            setFocusedTab(i);
-          }}
-          vertical
-        >
-          {filesWIssues.map((f, i) => {
-            const isGood = finishedFiles[i];
-
-            const isThisTheLastBadFile = finishedFiles.every((ff, j) => {
-              if (i === j) {
-                return true;
-              } else {
-                return !!ff;
-              }
-            });
-            return (
-              <Tab
-                key={i}
-                id={i}
-                title={
-                  <div>
-                    <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;
-                          }
-                        }
-
-                        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
+  const reduxFormEntities = useDeepEqualMemo(_reduxFormEntities);
+  useEffect(() => {
+    return () => dispatch(destroy(dataTableForm));
+  }, [dataTableForm, dispatch]);
 
-                          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
-                      })
-                    }}
-                  />
-                }
-              ></Tab>
-            );
-          })}
-        </Tabs>
-      </>
-    );
-    let comp = tabs;
-
-    if (doAllFilesHaveSameHeaders) {
-      comp = (
-        <>
-          {doAllFilesHaveSameHeaders && (
-            <SimpleStepViz
-              style={{ marginTop: 8 }}
-              steps={steps}
-            ></SimpleStepViz>
-          )}
+  const _reduxFormCellValidation = useSelector(
+    state => state.form?.[dataTableForm]?.values.reduxFormCellValidation
+  );
+  const reduxFormCellValidation = useDeepEqualMemo(_reduxFormCellValidation);
 
-          {!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]
-              }}
-            />
-          )}
-          {hasSubmittedOuter && tabs}
-          {!hasSubmittedOuter && (
-            <DialogFooter
-              style={{ marginTop: 20 }}
-              onClick={() => {
-                setSubmittedOuter(true);
-                setSteps(getInitialSteps(false));
-              }}
-              text="Review and Edit Data"
-            ></DialogFooter>
-          )}
-        </>
-      );
-    }
-    return (
-      <div
-        style={{
-          padding: 10
-        }}
-      >
-        {comp}
+  const { entsToUse, validationToUse } = useMemo(
+    () => removeCleanRows(reduxFormEntities, reduxFormCellValidation),
+    [reduxFormEntities, reduxFormCellValidation]
+  );
+  return (
+    <>
+      <div className="bp3-dialog-body">
+        <InputField
+          isRequired
+          rightElement={
+            <div style={{ paddingTop: 6, paddingRight: 5 }}>.csv</div>
+          }
+          inlineLabel
+          label="File Name:"
+          defaultValue={initialValues?.fileName ?? "manual_data_entry"}
+          name="fileName"
+        />
+        <PreviewCsvData
+          datatableFormName={dataTableForm}
+          entities={entities}
+          headerMessage={headerMessage}
+          isEditingExistingFile={isEditingExistingFile}
+          matchedHeaders={matchedHeaders}
+          showDoesDataLookCorrectMsg={showDoesDataLookCorrectMsg}
+          userSchema={userSchema}
+          validateAgainstSchema={validateAgainstSchema}
+        />
       </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]
-        }}
+      <DialogFooter
+        submitting={submitting}
+        onClick={handleSubmit(async ({ fileName }) => {
+          if (some(validationToUse, e => e)) return;
+          //do async validation here if needed
+          if (
+            await asyncValidateHelper(
+              validateAgainstSchema,
+              entsToUse,
+              (...args) => dispatch(change(...args)),
+              "simpleInsertEditableTable"
+            )
+          )
+            return;
+          onSimpleInsertDialogFinish({
+            fileName: fileName + ".csv",
+            newEntities: maybeStripIdFromEntities(
+              entsToUse,
+              validateAgainstSchema
+            )
+          });
+        })}
+        disabled={!entsToUse?.length || some(validationToUse, e => e)}
+        text={isEditingExistingFile ? "Edit Data" : "Add File"}
       />
-    );
-  }
+    </>
+  );
 });
 
-const UploadCsvWizardDialogInner = compose(
-  reduxForm(),
-  connect((state, props) => {
-    return formValueSelector(props.datatableFormName || "editableCellTable")(
-      state,
-      "reduxFormEntities",
-      "reduxFormCellValidation"
-    );
-  })
-)(function UploadCsvWizardDialogInner({
+const UploadCsvWizardDialogInner = reduxForm()(({
   validateAgainstSchema,
   userSchema,
   searchResults,
@@ -346,12 +254,9 @@ const UploadCsvWizardDialogInner = compose(
   csvValidationIssue,
   ignoredHeadersMsg,
   matchedHeaders,
-  //fromRedux:
   handleSubmit,
   fileIndex,
-  reduxFormEntities,
   onBackClick,
-  reduxFormCellValidation,
   changeForm,
   setFilesWIssues,
   doAllFilesHaveSameHeaders,
@@ -360,42 +265,51 @@ const UploadCsvWizardDialogInner = compose(
   onMultiFileUploadSubmit,
   isThisTheLastBadFile,
   submitting
-}) {
+}) => {
   const [hasSubmitted, setSubmitted] = useState(!csvValidationIssue);
   const [steps, setSteps] = useState(getInitialSteps(csvValidationIssue));
 
+  const {
+    reduxFormEntities: _reduxFormEntities,
+    reduxFormCellValidation: _reduxFormCellValidation
+  } = useSelector(state =>
+    formValueSelector(datatableFormName)(
+      state,
+      "reduxFormEntities",
+      "reduxFormCellValidation"
+    )
+  );
+
+  const reduxFormEntities = useDeepEqualMemo(_reduxFormEntities);
+  const reduxFormCellValidation = useDeepEqualMemo(_reduxFormCellValidation);
+
   let inner;
   if (hasSubmitted) {
     inner = (
       <PreviewCsvData
-        {...{
-          datatableFormName,
-          showDoesDataLookCorrectMsg: true,
-          initialEntities: reduxFormEntities || null,
-          matchedHeaders,
-          validateAgainstSchema,
-          userSchema
-        }}
-      ></PreviewCsvData>
+        datatableFormName={datatableFormName}
+        showDoesDataLookCorrectMsg
+        entities={reduxFormEntities || null}
+        matchedHeaders={matchedHeaders}
+        validateAgainstSchema={validateAgainstSchema}
+        userSchema={userSchema}
+      />
     );
   } else {
     inner = (
       <MatchHeaders
-        {...{
-          onMultiFileUploadSubmit,
-          csvValidationIssue,
-          ignoredHeadersMsg,
-          searchResults,
-          matchedHeaders,
-          userSchema,
-          reduxFormEntitiesArray: [reduxFormEntities],
-          changeForm,
-          datatableFormName,
-          setFilesWIssues,
-          filesWIssues,
-          fileIndex
-        }}
-      ></MatchHeaders>
+        onMultiFileUploadSubmit={onMultiFileUploadSubmit}
+        csvValidationIssue={csvValidationIssue}
+        ignoredHeadersMsg={ignoredHeadersMsg}
+        searchResults={searchResults}
+        matchedHeaders={matchedHeaders}
+        userSchema={userSchema}
+        reduxFormEntitiesArray={reduxFormEntities ? [reduxFormEntities] : []}
+        datatableFormName={datatableFormName}
+        setFilesWIssues={setFilesWIssues}
+        filesWIssues={filesWIssues}
+        fileIndex={fileIndex}
+      />
     );
   }
   const { entsToUse, validationToUse } = removeCleanRows(
@@ -406,7 +320,7 @@ const UploadCsvWizardDialogInner = compose(
   return (
     <div>
       {!doAllFilesHaveSameHeaders && (
-        <SimpleStepViz style={{ marginTop: 8 }} steps={steps}></SimpleStepViz>
+        <SimpleStepViz style={{ marginTop: 8 }} steps={steps} />
       )}
       <div className="bp3-dialog-body">{inner}</div>
       <DialogFooter
@@ -443,7 +357,7 @@ const UploadCsvWizardDialogInner = compose(
               setSubmitted(false);
             })
         })}
-        onClick={handleSubmit(async function () {
+        onClick={handleSubmit(async () => {
           if (!hasSubmitted) {
             //step 1 submit
             setSteps(
@@ -454,272 +368,352 @@ const UploadCsvWizardDialogInner = compose(
               })
             );
             setSubmitted(true);
-          } else {
-            if (!onMultiFileUploadSubmit) {
-              //do async validation here if needed
-              if (
-                await asyncValidateHelper(
-                  validateAgainstSchema,
-                  entsToUse,
-                  changeForm,
-                  `editableCellTable`
-                )
+            return;
+          }
+          if (!onMultiFileUploadSubmit) {
+            //do async validation here if needed
+            if (
+              await asyncValidateHelper(
+                validateAgainstSchema,
+                entsToUse,
+                changeForm,
+                datatableFormName
               )
-                return;
-            }
-            //step 2 submit
-            const payload = maybeStripIdFromEntities(
-              entsToUse,
-              validateAgainstSchema
-            );
-            return onMultiFileUploadSubmit
-              ? await onMultiFileUploadSubmit()
-              : onUploadWizardFinish({ res: [payload] });
+            )
+              return;
           }
+          //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(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 &&
-    userSchema.userData.map((row, i) => {
-      const toRet = {
-        _isClean: row._isClean
-      };
-      validateAgainstSchema.fields.forEach(({ path, defaultValue }) => {
-        const matchingKey = matchedHeaders?.[path];
-        if (!matchingKey) {
-          toRet[path] = defaultValue === undefined ? defaultValue : "";
-        } else {
-          toRet[path] = row[matchingKey];
-        }
-        if (toRet[path] === undefined || toRet[path] === "") {
-          if (defaultValue) {
-            if (isFunction(defaultValue)) {
-              toRet[path] = defaultValue(i, row);
-            } else toRet[path] = defaultValue;
-          } else {
-            // const exampleToUse = isArray(example) //this means that the row was not added by a user
-            //   ? example[i1]
-            //   : i1 === 0 && example;
-            toRet[path] = "";
-            // if (useExampleData && exampleToUse) {
-            //   toRet[path] = exampleToUse;
-            //   delete toRet._isClean;
-            // } else {
-            // }
-          }
-        }
-      });
-
-      if (row.id === undefined) {
-        toRet.id = nanoid();
-      } else {
-        toRet.id = row.id;
-      }
-      return toRet;
-    });
-  return (
-    <div style={{ minWidth: 400 }}>
-      <Callout style={{ marginBottom: 5 }} intent="primary">
-        {headerMessage ||
-          (showDoesDataLookCorrectMsg
-            ? "Does this data look correct? Edit it as needed."
-            : `${
-                isEditingExistingFile ? "Edit" : "Input"
-              } your data here. Hover table headers for additional instructions.`)}
+const MultipleFileDialog = ({
+  focusedTab,
+  setFocusedTab,
+  filesWIssues,
+  finishedFiles,
+  doAllFilesHaveSameHeaders,
+  setSubmittedOuter,
+  setSteps,
+  reduxFormEntitiesArray,
+  validateAgainstSchema,
+  changeForm,
+  onUploadWizardFinish,
+  setFilesWIssues,
+  csvValidationIssue,
+  ignoredHeadersMsg,
+  searchResults,
+  matchedHeaders,
+  userSchema,
+  flippedMatchedHeaders,
+  steps,
+  hasSubmittedOuter
+}) => {
+  const tabs = (
+    <>
+      <Callout style={{ marginBottom: 10, flexGrow: 0 }} intent="warning">
+        <div>
+          Please look over each of the following files and correct any issues.
+        </div>
       </Callout>
-      {validateAgainstSchema.description && (
-        <Callout>{validateAgainstSchema.description}</Callout>
-      )}
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "flex-start"
+      <Tabs
+        // renderActiveTabPanelOnly
+        selectedTabId={focusedTab}
+        onChange={i => {
+          setFocusedTab(i);
         }}
+        vertical
       >
-        {validateAgainstSchema.HeaderComp && (
-          <validateAgainstSchema.HeaderComp
-            {...props}
-            // {...{ forceUpdate }}
-          ></validateAgainstSchema.HeaderComp>
-        )}
-      </div>
-      <DataTable
-        maxWidth={800}
-        maxHeight={500}
-        rerenderKey={rerenderKey.current} //pass this since to force rerenders since validateAgainstSchema changing doesn't always trigger a rerender
-        destroyOnUnmount={false}
-        doNotValidateUntouchedRows
-        formName={datatableFormName || "editableCellTable"}
-        isSimple
-        keepDirtyOnReinitialize
-        isCellEditable
-        initialEntities={(initialEntities ? initialEntities : data) || []}
-        entities={(initialEntities ? initialEntities : data) || []}
-        schema={validateAgainstSchema}
-      ></DataTable>
-    </div>
+        {filesWIssues.map((f, i) => {
+          const isGood = finishedFiles[i];
+          const isThisTheLastBadFile = finishedFiles.every((ff, j) => {
+            if (i === j) {
+              return true;
+            } else {
+              return !!ff;
+            }
+          });
+          return (
+            <Tab
+              key={i}
+              id={i}
+              title={
+                <div>
+                  <Icon
+                    intent={isGood ? "success" : "warning"}
+                    icon={isGood ? "tick-circle" : "warning-sign"}
+                  />{" "}
+                  {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;
+                      }
+                    }
+                    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,
+                            ents,
+                            changeForm,
+                            `editableCellTable-${i}`
+                          )
+                        )
+                          return;
+                      }
+                      //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
+                  })}
+                />
+              }
+            />
+          );
+        })}
+      </Tabs>
+    </>
   );
-});
+  const comp = doAllFilesHaveSameHeaders ? (
+    <>
+      {doAllFilesHaveSameHeaders && (
+        <SimpleStepViz style={{ marginTop: 8 }} steps={steps} />
+      )}
 
-export const SimpleInsertDataDialog = compose(
+      {!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}
+          setFilesWIssues={setFilesWIssues}
+          filesWIssues={filesWIssues}
+          fileIndex={0}
+          {...filesWIssues[0]}
+        />
+      )}
+      {hasSubmittedOuter && tabs}
+      {!hasSubmittedOuter && (
+        <DialogFooter
+          style={{ marginTop: 20 }}
+          onClick={() => {
+            setSubmittedOuter(true);
+            setSteps(getInitialSteps(false));
+          }}
+          text="Review and Edit Data"
+        />
+      )}
+    </>
+  ) : (
+    tabs
+  );
+
+  return <div style={{ padding: 10 }}>{comp}</div>;
+};
+
+const UploadCsvWizardDialog = compose(
   wrapDialog({
     canEscapeKeyClose: false,
-    title: "Build CSV File",
     style: { width: "fit-content" }
   }),
-  reduxForm({ form: "SimpleInsertDataDialog" }),
-  tgFormValueSelector(
-    "simpleInsertEditableTable",
-    "reduxFormEntities",
-    "reduxFormCellValidation"
-  ),
-  connect(undefined, { changeForm: change }),
-  observer
-)(function SimpleInsertDataDialog({
-  onSimpleInsertDialogFinish,
-  reduxFormEntities,
-  reduxFormCellValidation,
-  validateAgainstSchema,
-  changeForm,
-  submitting,
-  isEditingExistingFile,
+  reduxForm({
+    form: "UploadCsvWizardDialog"
+  })
+)(({
+  csvValidationIssue,
+  doAllFilesHaveSameHeaders,
+  filesWIssues: _filesWIssues,
+  flippedMatchedHeaders,
+  ignoredHeadersMsg,
   matchedHeaders,
-  showDoesDataLookCorrectMsg,
-  headerMessage,
-  handleSubmit,
+  onUploadWizardFinish,
+  searchResults,
   userSchema,
-  initialEntities
-}) {
-  const { entsToUse, validationToUse } = removeCleanRows(
-    reduxFormEntities,
-    reduxFormCellValidation
-  );
-
-  return (
-    <>
-      <div className="bp3-dialog-body">
-        <InputField
-          isRequired
-          rightElement={
-            <div style={{ paddingTop: 6, paddingRight: 5 }}>.csv</div>
-          }
-          inlineLabel
-          label="File Name:"
-          defaultValue={"manual_data_entry"}
-          name="fileName"
-        ></InputField>
-        <PreviewCsvData
-          {...{
-            matchedHeaders,
-            isEditingExistingFile,
-            showDoesDataLookCorrectMsg,
-            headerMessage,
-            // onlyShowRowsWErrors,
-            validateAgainstSchema,
-            userSchema,
-            initialEntities,
-            datatableFormName: "simpleInsertEditableTable"
-          }}
-        ></PreviewCsvData>
-      </div>
-      <DialogFooter
-        submitting={submitting}
-        onClick={handleSubmit(async ({ fileName }) => {
-          if (some(validationToUse, e => e)) return;
-          //do async validation here if needed
-          if (
-            await asyncValidateHelper(
-              validateAgainstSchema,
-              entsToUse,
-              changeForm,
-              "simpleInsertEditableTable"
-            )
-          )
-            return;
-          onSimpleInsertDialogFinish({
-            fileName: fileName + ".csv",
-            newEntities: maybeStripIdFromEntities(
-              entsToUse,
-              validateAgainstSchema
-            )
-          });
-        })}
-        disabled={!entsToUse?.length || some(validationToUse, e => e)}
-        text={isEditingExistingFile ? "Edit Data" : "Add File"}
-      ></DialogFooter>
-    </>
+  validateAgainstSchema
+}) => {
+  const dispatch = useDispatch();
+  const changeForm = useCallback(
+    (...args) => dispatch(change(...args)),
+    [dispatch]
   );
-});
+  // will unmount state hook
+  useEffect(() => {
+    return () => {
+      dispatch(
+        destroy(
+          "editableCellTable",
+          ...times(_filesWIssues.length, i => `editableCellTable-${i}`)
+        )
+      );
+    };
+  }, [_filesWIssues.length, dispatch]);
 
-async function asyncValidateHelper(
-  validateAgainstSchema,
-  currentEnts,
-  changeForm,
-  tableName
-) {
-  if (!validateAgainstSchema.tableWideAsyncValidation) return;
-  const res = await validateAgainstSchema.tableWideAsyncValidation({
-    entities: currentEnts
+  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: reduxFormEntitiesArray,
+        _finishedFiles: finishedFiles
+      };
+    }
   });
-  if (!isEmpty(res)) {
-    changeForm(tableName, "reduxFormCellValidation", {
-      ...addSpecialPropToAsyncErrs(res)
-    });
-    return true;
-  }
-}
+  const reduxFormEntitiesArray = useDeepEqualMemo(_reduxFormEntitiesArray);
+  const finishedFiles = useDeepEqualMemo(_finishedFiles);
 
-function maybeStripIdFromEntities(ents, validateAgainstSchema) {
-  let toRet;
-  if (validateAgainstSchema?.fields?.some(({ path }) => path === "id")) {
-    toRet = ents;
+  const [hasSubmittedOuter, setSubmittedOuter] = useState();
+  const [steps, setSteps] = useState(getInitialSteps(true));
+
+  const [focusedTab, setFocusedTab] = useState(0);
+  const [filesWIssues, setFilesWIssues] = useState(
+    _filesWIssues.map(cloneDeep) //do this little trick to stop immer from preventing the file from being modified
+  );
+
+  if (filesWIssues.length > 1) {
+    return (
+      <MultipleFileDialog
+        focusedTab={focusedTab}
+        setFocusedTab={setFocusedTab}
+        filesWIssues={filesWIssues}
+        finishedFiles={finishedFiles}
+        doAllFilesHaveSameHeaders={doAllFilesHaveSameHeaders}
+        setSubmittedOuter={setSubmittedOuter}
+        setSteps={setSteps}
+        reduxFormEntitiesArray={reduxFormEntitiesArray}
+        validateAgainstSchema={validateAgainstSchema}
+        changeForm={changeForm}
+        onUploadWizardFinish={onUploadWizardFinish}
+        setFilesWIssues={setFilesWIssues}
+        csvValidationIssue={csvValidationIssue}
+        ignoredHeadersMsg={ignoredHeadersMsg}
+        searchResults={searchResults}
+        matchedHeaders={matchedHeaders}
+        userSchema={userSchema}
+        flippedMatchedHeaders={flippedMatchedHeaders}
+        steps={steps}
+        hasSubmittedOuter={hasSubmittedOuter}
+      />
+    );
   } else {
-    // if the schema we're validating against itself didn't have an id field,
-    // we don't want to include it in the returned entities
-    toRet = ents?.map(e => omit(e, ["id"]));
+    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]}
+      />
+    );
   }
-  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)`
-// }
+export default UploadCsvWizardDialog;