Allow row and table hooks to be async

src/steps/UploadFlow.tsx

@@ -6,6 +6,7 @@ import { SelectHeaderStep } from "./SelectHeaderStep/SelectHeaderStep"
 import { SelectSheetStep } from "./SelectSheetStep/SelectSheetStep"
 import { mapWorkbook } from "../utils/mapWorkbook"
 import { ValidationStep } from "./ValidationStep/ValidationStep"
+import { addErrorsAndRunHooks } from "./ValidationStep/utils/dataMutations"
 import { MatchColumnsStep } from "./MatchColumnsStep/MatchColumnsStep"
 import { exceedsMaxRecords } from "../utils/exceedsMaxRecords"
 import { useRsi } from "../hooks/useRsi"
@@ -45,10 +46,19 @@ interface Props {
 }
 
 export const UploadFlow = ({ nextStep }: Props) => {
-  const { initialStepState } = useRsi()
+  const {
+    initialStepState,
+    maxRecords,
+    translations,
+    uploadStepHook,
+    selectHeaderStepHook,
+    matchColumnsStepHook,
+    fields,
+    rowHook,
+    tableHook,
+  } = useRsi()
   const [state, setState] = useState<StepState>(initialStepState || { type: StepType.upload })
   const [uploadedFile, setUploadedFile] = useState<File | null>(null)
-  const { maxRecords, translations, uploadStepHook, selectHeaderStepHook, matchColumnsStepHook } = useRsi()
   const toast = useToast()
   const errorToast = useCallback(
     (description: string) => {
@@ -141,9 +151,10 @@ export const UploadFlow = ({ nextStep }: Props) => {
           onContinue={async (values, rawData, columns) => {
             try {
               const data = await matchColumnsStepHook(values, rawData, columns)
+              const dataWithMeta = await addErrorsAndRunHooks(data, fields, rowHook, tableHook)
               setState({
                 type: StepType.validateData,
-                data,
+                data: dataWithMeta,
               })
               nextStep()
             } catch (e) {

src/steps/ValidationStep/ValidationStep.tsx

@@ -12,7 +12,7 @@ import type { themeOverrides } from "../../theme"
 import type { RowsChangeData } from "react-data-grid"
 
 type Props<T extends string> = {
-  initialData: Data<T>[]
+  initialData: (Data<T> & Meta)[]
   file: File
 }
 
@@ -22,22 +22,21 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
     "ValidationStep",
   ) as (typeof themeOverrides)["components"]["ValidationStep"]["baseStyle"]
 
-  const [data, setData] = useState<(Data<T> & Meta)[]>(
-    useMemo(
-      () => addErrorsAndRunHooks<T>(initialData, fields, rowHook, tableHook),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [],
-    ),
-  )
+  const [data, setData] = useState<(Data<T> & Meta)[]>(initialData)
+
   const [selectedRows, setSelectedRows] = useState<ReadonlySet<number | string>>(new Set())
   const [filterByErrors, setFilterByErrors] = useState(false)
   const [showSubmitAlert, setShowSubmitAlert] = useState(false)
 
   const updateData = useCallback(
-    (rows: typeof data) => {
-      setData(addErrorsAndRunHooks<T>(rows, fields, rowHook, tableHook))
+    async (rows: typeof data, indexes?: number[]) => {
+      // Check if hooks are async - if they are we want to apply changes optimistically for better UX
+      if (rowHook?.constructor.name === "AsyncFunction" || tableHook?.constructor.name === "AsyncFunction") {
+        setData(rows)
+      }
+      addErrorsAndRunHooks<T>(rows, fields, rowHook, tableHook, indexes).then((data) => setData(data))
     },
-    [setData, rowHook, tableHook, fields],
+    [rowHook, tableHook, fields],
   )
 
   const deleteSelectedRows = () => {
@@ -48,16 +47,17 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
     }
   }
 
-  const updateRow = useCallback(
+  const updateRows = useCallback(
     (rows: typeof data, changedData?: RowsChangeData<(typeof data)[number]>) => {
       const changes = changedData?.indexes.reduce((acc, index) => {
         // when data is filtered val !== actual index in data
         const realIndex = data.findIndex((value) => value.__index === rows[index].__index)
         acc[realIndex] = rows[index]
         return acc
       }, {} as Record<number, (typeof data)[number]>)
+      const realIndexes = changes == null ? undefined : Object.keys(changes).map((index) => Number(index))
       const newData = Object.assign([], data, changes)
-      updateData(newData)
+      updateData(newData, realIndexes)
     },
     [data, updateData],
   )
@@ -136,7 +136,7 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
         <Table
           rowKeyGetter={rowKeyGetter}
           rows={tableData}
-          onRowsChange={updateRow}
+          onRowsChange={updateRows}
           columns={columns}
           selectedRows={selectedRows}
           onSelectedRowsChange={setSelectedRows}

src/steps/ValidationStep/stories/Validation.stories.tsx

@@ -3,6 +3,7 @@ import { ValidationStep } from "../ValidationStep"
 import { Providers } from "../../../components/Providers"
 import { defaultTheme } from "../../../ReactSpreadsheetImport"
 import { ModalWrapper } from "../../../components/ModalWrapper"
+import { addErrorsAndRunHooks } from "../utils/dataMutations"
 
 export default {
   title: "Validation Step",
@@ -12,11 +13,14 @@ export default {
 }
 
 const file = new File([""], "file.csv")
+const data = await addErrorsAndRunHooks(editableTableInitialData, mockRsiValues.fields)
 
-export const Basic = () => (
-  <Providers theme={defaultTheme} rsiValues={mockRsiValues}>
-    <ModalWrapper isOpen={true} onClose={() => {}}>
-      <ValidationStep initialData={editableTableInitialData} file={file} />
-    </ModalWrapper>
-  </Providers>
-)
+export const Basic = () => {
+  return (
+    <Providers theme={defaultTheme} rsiValues={mockRsiValues}>
+      <ModalWrapper isOpen={true} onClose={() => {}}>
+        <ValidationStep initialData={data} file={file} />
+      </ModalWrapper>
+    </Providers>
+  )
+}