Fix error validation when validating only changed rows

Author: masiulis

src/steps/ValidationStep/ValidationStep.tsx

@@ -30,6 +30,10 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
 
   const updateData = useCallback(
     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))
     },
     [rowHook, tableHook, fields],

src/steps/ValidationStep/types.ts

@@ -1,5 +1,5 @@
-import type { Info } from "../../types"
+import { InfoWithSource } from "../../types"
 
 export type Meta = { __index: string; __errors?: Error | null }
-export type Error = { [key: string]: Info }
+export type Error = { [key: string]: InfoWithSource }
 export type Errors = { [id: string]: Error }

src/steps/ValidationStep/utils/dataMutations.ts

@@ -1,6 +1,7 @@
 import type { Data, Fields, Info, RowHook, TableHook } from "../../../types"
-import type { Meta, Errors } from "../types"
+import type { Meta, Error, Errors } from "../types"
 import { v4 } from "uuid"
+import { ErrorSources } from "../../../types"
 
 export const addErrorsAndRunHooks = async <T extends string>(
   data: (Data<T> & Partial<Meta>)[],
@@ -11,25 +12,27 @@ export const addErrorsAndRunHooks = async <T extends string>(
 ): Promise<(Data<T> & Meta)[]> => {
   const errors: Errors = {}
 
-  const addHookError = (rowIndex: number, fieldKey: T, error: Info) => {
+  const addError = (source: ErrorSources, rowIndex: number, fieldKey: T, error: Info) => {
     errors[rowIndex] = {
       ...errors[rowIndex],
-      [fieldKey]: error,
+      [fieldKey]: { ...error, source },
     }
   }
 
   if (tableHook) {
-    data = await tableHook(data, addHookError)
+    data = await tableHook(data, (...props) => addError(ErrorSources.Table, ...props))
   }
 
   if (rowHook) {
-    if (changedRowIndexes != null) {
+    if (changedRowIndexes) {
       for (const index of changedRowIndexes) {
-        data[index] = await rowHook(data[index], (...props) => addHookError(index, ...props), data)
+        data[index] = await rowHook(data[index], (...props) => addError(ErrorSources.Row, index, ...props), data)
       }
     } else {
       data = await Promise.all(
-        data.map(async (value, index) => rowHook(value, (...props) => addHookError(index, ...props), data)),
+        data.map(async (value, index) =>
+          rowHook(value, (...props) => addError(ErrorSources.Row, index, ...props), data),
+        ),
       )
     }
   }
@@ -58,47 +61,43 @@ export const addErrorsAndRunHooks = async <T extends string>(
 
           values.forEach((value, index) => {
             if (duplicates.has(value)) {
-              errors[index] = {
-                ...errors[index],
-                [field.key]: {
-                  level: validation.level || "error",
-                  message: validation.errorMessage || "Field must be unique",
-                },
-              }
+              addError(ErrorSources.Table, index, field.key as T, {
+                level: validation.level || "error",
+                message: validation.errorMessage || "Field must be unique",
+              })
             }
           })
           break
         }
         case "required": {
-          data.forEach((entry, index) => {
+          const dataToValidate = changedRowIndexes ? changedRowIndexes.map((index) => data[index]) : data
+          dataToValidate.forEach((entry, index) => {
+            const realIndex = changedRowIndexes ? changedRowIndexes[index] : index
             if (entry[field.key as T] === null || entry[field.key as T] === undefined || entry[field.key as T] === "") {
-              errors[index] = {
-                ...errors[index],
-                [field.key]: {
-                  level: validation.level || "error",
-                  message: validation.errorMessage || "Field is required",
-                },
-              }
+              addError(ErrorSources.Row, realIndex, field.key as T, {
+                level: validation.level || "error",
+                message: validation.errorMessage || "Field is required",
+              })
             }
           })
+
           break
         }
         case "regex": {
+          const dataToValidate = changedRowIndexes ? changedRowIndexes.map((index) => data[index]) : data
           const regex = new RegExp(validation.value, validation.flags)
-          data.forEach((entry, index) => {
+          dataToValidate.forEach((entry, index) => {
+            const realIndex = changedRowIndexes ? changedRowIndexes[index] : index
             const value = entry[field.key]?.toString() ?? ""
             if (!value.match(regex)) {
-              errors[index] = {
-                ...errors[index],
-                [field.key]: {
-                  level: validation.level || "error",
-                  message:
-                    validation.errorMessage ||
-                    `Field did not match the regex /${validation.value}/${validation.flags} `,
-                },
-              }
+              addError(ErrorSources.Row, realIndex, field.key as T, {
+                level: validation.level || "error",
+                message:
+                  validation.errorMessage || `Field did not match the regex /${validation.value}/${validation.flags} `,
+              })
             }
           })
+
           break
         }
       }
@@ -112,12 +111,41 @@ export const addErrorsAndRunHooks = async <T extends string>(
     }
     const newValue = value as Data<T> & Meta
 
-    if (errors[index]) {
-      return { ...newValue, __errors: errors[index] }
+    // If we are validating all indexes, or we did full validation on this row - apply all errors
+    if (!changedRowIndexes || changedRowIndexes.includes(index)) {
+      if (errors[index]) {
+        return { ...newValue, __errors: errors[index] }
+      }
+
+      if (!errors[index] && value?.__errors) {
+        return { ...newValue, __errors: null }
+      }
     }
-    if (!errors[index] && value?.__errors) {
-      return { ...newValue, __errors: null }
+    // if we have not validated this row, keep it's row errors but apply global error changes
+    else {
+      // at this point errors[index] contains only table source errors, previous row and table errors are in value.__errors
+      const hasRowErrors =
+        value.__errors && Object.values(value.__errors).some((error) => error.source === ErrorSources.Row)
+
+      if (!hasRowErrors) {
+        if (errors[index]) {
+          return { ...newValue, __errors: errors[index] }
+        }
+        return newValue
+      }
+
+      const errorsWithoutTableError = Object.entries(value.__errors!).reduce((acc, [key, value]) => {
+        if (value.source === ErrorSources.Row) {
+          acc[key] = value
+        }
+        return acc
+      }, {} as Error)
+
+      const newErrors = { ...errorsWithoutTableError, ...errors[index] }
+
+      return { ...newValue, __errors: newErrors }
     }
+
     return newValue
   })
 }

src/types.ts

@@ -134,6 +134,21 @@ export type Info = {
   level: ErrorLevel
 }
 
+export enum ErrorSources {
+  Table = "table",
+  Row = "row",
+}
+
+/*
+   Source determines whether the error is from the full table or row validation
+   Table validation is tableHook and "unique" validation
+   Row validation is rowHook and all other validations
+   it is used to determine if row.__errors should be updated or not depending on different validations
+*/
+export type InfoWithSource = Info & {
+  source: ErrorSources
+}
+
 export type Result<T extends string> = {
   validData: Data<T>[]
   invalidData: Data<T>[]