Move initial validation to happen before opening validation step

Author: masiulis

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState, useEffect } from "react"
+import { useCallback, useMemo, useState } from "react"
 import { Box, Button, Heading, ModalBody, Switch, useStyleConfig } from "@chakra-ui/react"
 import { ContinueButton } from "../../components/ContinueButton"
 import { useRsi } from "../../hooks/useRsi"
@@ -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,20 +22,17 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
     "ValidationStep",
   ) as (typeof themeOverrides)["components"]["ValidationStep"]["baseStyle"]
 
-  const [data, setData] = useState<(Data<T> & Meta)[]>(initialData as (Data<T> & Meta)[])
-  useEffect(() => {
-    addErrorsAndRunHooks<T>(initialData, fields, rowHook, tableHook).then((data) => setData(data))
-  }, [initialData, fields, rowHook, tableHook])
+  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(
     async (rows: typeof data, indexes?: number[]) => {
-      setData(await addErrorsAndRunHooks<T>(rows, fields, rowHook, tableHook, indexes))
+      addErrorsAndRunHooks<T>(rows, fields, rowHook, tableHook, indexes).then((data) => setData(data))
     },
-    [setData, rowHook, tableHook, fields],
+    [rowHook, tableHook, fields],
   )
 
   const deleteSelectedRows = () => {