Skip to content

Commit ea427a4

Browse files
trevorloflintrevorloflin
committed
Added async to validation hooks and fixed rowHook indexes.
1 parent 662aa1e commit ea427a4

4 files changed

Lines changed: 89 additions & 74 deletions

File tree

‎src/steps/ValidationStep/ValidationStep.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useCallback, useMemo, useState } from "react"
1+
import { useCallback, useMemo, useState, useEffect } from "react"
22
import { Box, Button, Heading, ModalBody, Switch, useStyleConfig } from "@chakra-ui/react"
33
import { ContinueButton } from "../../components/ContinueButton"
44
import { useRsi } from "../../hooks/useRsi"
@@ -22,20 +22,18 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
2222
"ValidationStep",
2323
) as (typeof themeOverrides)["components"]["ValidationStep"]["baseStyle"]
2424

25-
const [data, setData] = useState<(Data<T> & Meta)[]>(
26-
useMemo(
27-
() => addErrorsAndRunHooks<T>(initialData, fields, rowHook, tableHook),
28-
// eslint-disable-next-line react-hooks/exhaustive-deps
29-
[],
30-
),
31-
)
25+
const [data, setData] = useState<(Data<T> & Meta)[]>(initialData as (Data<T> & Meta)[])
26+
useEffect(() => {
27+
addErrorsAndRunHooks<T>(initialData, fields, rowHook, tableHook).then((data) => setData(data))
28+
}, [initialData, fields, rowHook, tableHook])
29+
3230
const [selectedRows, setSelectedRows] = useState<ReadonlySet<number | string>>(new Set())
3331
const [filterByErrors, setFilterByErrors] = useState(false)
3432
const [showSubmitAlert, setShowSubmitAlert] = useState(false)
3533

3634
const updateData = useCallback(
37-
(rows: typeof data) => {
38-
setData(addErrorsAndRunHooks<T>(rows, fields, rowHook, tableHook))
35+
async (rows: typeof data, indexes?: number[]) => {
36+
setData(await addErrorsAndRunHooks<T>(rows, fields, rowHook, tableHook, indexes))
3937
},
4038
[setData, rowHook, tableHook, fields],
4139
)
@@ -48,16 +46,17 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
4846
}
4947
}
5048

51-
const updateRow = useCallback(
49+
const updateRows = useCallback(
5250
(rows: typeof data, changedData?: RowsChangeData<(typeof data)[number]>) => {
5351
const changes = changedData?.indexes.reduce((acc, index) => {
5452
// when data is filtered val !== actual index in data
5553
const realIndex = data.findIndex((value) => value.__index === rows[index].__index)
5654
acc[realIndex] = rows[index]
5755
return acc
5856
}, {} as Record<number, (typeof data)[number]>)
57+
const realIndexes = changes == null ? undefined : Object.keys(changes).map((index) => Number(index))
5958
const newData = Object.assign([], data, changes)
60-
updateData(newData)
59+
updateData(newData, realIndexes)
6160
},
6261
[data, updateData],
6362
)
@@ -137,7 +136,7 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
137136
<Table
138137
rowKeyGetter={rowKeyGetter}
139138
rows={tableData}
140-
onRowsChange={updateRow}
139+
onRowsChange={updateRows}
141140
columns={columns}
142141
selectedRows={selectedRows}
143142
onSelectedRowsChange={setSelectedRows}

‎src/steps/ValidationStep/tests/ValidationStep.test.tsx‎

Lines changed: 64 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import "@testing-library/jest-dom"
2-
import { render, waitFor, screen } from "@testing-library/react"
2+
import { render, waitFor, screen, act } from "@testing-library/react"
33
import { ValidationStep } from "../ValidationStep"
44
import { defaultRSIProps, defaultTheme } from "../../../ReactSpreadsheetImport"
55
import { Providers } from "../../../components/Providers"
@@ -579,23 +579,25 @@ describe("Validation step tests", () => {
579579
},
580580
] as const
581581

582-
render(
583-
<Providers
584-
theme={defaultTheme}
585-
rsiValues={{
586-
...mockValues,
587-
fields,
588-
rowHook: (value) => ({
589-
name: value.name?.toString()?.split(/(\s+)/)[0],
590-
lastName: value.name?.toString()?.split(/(\s+)/)[2],
591-
}),
592-
}}
593-
>
594-
<ModalWrapper isOpen={true} onClose={() => {}}>
595-
<ValidationStep initialData={initialData} file={file} />
596-
</ModalWrapper>
597-
</Providers>,
598-
)
582+
await act(async () => {
583+
render(
584+
<Providers
585+
theme={defaultTheme}
586+
rsiValues={{
587+
...mockValues,
588+
fields,
589+
rowHook: (value) => ({
590+
name: value.name?.toString()?.split(/(\s+)/)[0],
591+
lastName: value.name?.toString()?.split(/(\s+)/)[2],
592+
}),
593+
}}
594+
>
595+
<ModalWrapper isOpen={true} onClose={() => {}}>
596+
<ValidationStep initialData={initialData} file={file} />
597+
</ModalWrapper>
598+
</Providers>,
599+
)
600+
})
599601

600602
const nameCell = screen.getByRole("gridcell", {
601603
name: NAME,
@@ -607,9 +609,11 @@ describe("Validation step tests", () => {
607609
expect(lastNameCell).toBeInTheDocument()
608610

609611
// activate input
610-
await userEvent.click(nameCell)
612+
await act(async () => {
613+
await userEvent.click(nameCell)
611614

612-
await userEvent.keyboard(NEW_NAME + " " + NEW_LASTNAME + "{enter}")
615+
await userEvent.keyboard(NEW_NAME + " " + NEW_LASTNAME + "{enter}")
616+
})
613617

614618
const newNameCell = screen.getByRole("gridcell", {
615619
name: NEW_NAME,
@@ -620,6 +624,7 @@ describe("Validation step tests", () => {
620624
})
621625
expect(newLastNameCell).toBeInTheDocument()
622626
})
627+
623628
test("Row hook raises error", async () => {
624629
const WRONG_NAME = "Johnny"
625630
const RIGHT_NAME = "Jonathan"
@@ -638,24 +643,26 @@ describe("Validation step tests", () => {
638643
},
639644
] as const
640645

641-
render(
642-
<Providers
643-
theme={defaultTheme}
644-
rsiValues={{
645-
...mockValues,
646-
fields,
647-
rowHook: (value, setError) => {
648-
if (value.name === WRONG_NAME) {
649-
setError(fields[0].key, { message: "Wrong name", level: "error" })
650-
}
651-
return value
652-
},
653-
}}
654-
>
655-
<ModalWrapper isOpen={true} onClose={() => {}}>
656-
<ValidationStep initialData={initialData} file={file} />
657-
</ModalWrapper>
658-
</Providers>,
646+
await act(async () =>
647+
render(
648+
<Providers
649+
theme={defaultTheme}
650+
rsiValues={{
651+
...mockValues,
652+
fields,
653+
rowHook: (value, setError) => {
654+
if (value.name === WRONG_NAME) {
655+
setError(fields[0].key, { message: "Wrong name", level: "error" })
656+
}
657+
return value
658+
},
659+
}}
660+
>
661+
<ModalWrapper isOpen={true} onClose={() => {}}>
662+
<ValidationStep initialData={initialData} file={file} />
663+
</ModalWrapper>
664+
</Providers>,
665+
),
659666
)
660667

661668
const switchFilter = getFilterSwitch()
@@ -702,23 +709,25 @@ describe("Validation step tests", () => {
702709
},
703710
] as const
704711

705-
render(
706-
<Providers
707-
theme={defaultTheme}
708-
rsiValues={{
709-
...mockValues,
710-
fields,
711-
tableHook: (data) =>
712-
data.map((value) => ({
713-
name: value.name + ADDITION,
714-
})),
715-
}}
716-
>
717-
<ModalWrapper isOpen={true} onClose={() => {}}>
718-
<ValidationStep initialData={initialData} file={file} />
719-
</ModalWrapper>
720-
</Providers>,
721-
)
712+
await act(async () => {
713+
render(
714+
<Providers
715+
theme={defaultTheme}
716+
rsiValues={{
717+
...mockValues,
718+
fields,
719+
tableHook: (data) =>
720+
data.map((value) => ({
721+
name: value.name + ADDITION,
722+
})),
723+
}}
724+
>
725+
<ModalWrapper isOpen={true} onClose={() => {}}>
726+
<ValidationStep initialData={initialData} file={file} />
727+
</ModalWrapper>
728+
</Providers>,
729+
)
730+
})
722731

723732
const nameCell = screen.getByRole("gridcell", {
724733
name: NAME + ADDITION,

‎src/steps/ValidationStep/utils/dataMutations.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import type { Data, Fields, Info, RowHook, TableHook } from "../../../types"
22
import type { Meta, Errors } from "../types"
33
import { v4 } from "uuid"
44

5-
export const addErrorsAndRunHooks = <T extends string>(
5+
export const addErrorsAndRunHooks = async <T extends string>(
66
data: (Data<T> & Partial<Meta>)[],
77
fields: Fields<T>,
88
rowHook?: RowHook<T>,
99
tableHook?: TableHook<T>,
10-
): (Data<T> & Meta)[] => {
10+
changedRowIndexes?: number[],
11+
): Promise<(Data<T> & Meta)[]> => {
1112
const errors: Errors = {}
1213

1314
const addHookError = (rowIndex: number, fieldKey: T, error: Info) => {
@@ -18,11 +19,17 @@ export const addErrorsAndRunHooks = <T extends string>(
1819
}
1920

2021
if (tableHook) {
21-
data = tableHook(data, addHookError)
22+
data = await tableHook(data, addHookError)
2223
}
2324

2425
if (rowHook) {
25-
data = data.map((value, index) => rowHook(value, (...props) => addHookError(index, ...props), data))
26+
if (changedRowIndexes != null) {
27+
changedRowIndexes.forEach((index) => rowHook(data[index], (...props) => addHookError(index, ...props), data))
28+
} else {
29+
data = await Promise.all(
30+
data.map(async (value, index) => rowHook(value, (...props) => addHookError(index, ...props), data)),
31+
)
32+
}
2633
}
2734

2835
fields.forEach((field) => {

‎src/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,11 +121,11 @@ export type RowHook<T extends string> = (
121121
row: Data<T>,
122122
addError: (fieldKey: T, error: Info) => void,
123123
table: Data<T>[],
124-
) => Data<T>
124+
) => Data<T> | Promise<Data<T>>
125125
export type TableHook<T extends string> = (
126126
table: Data<T>[],
127127
addError: (rowIndex: number, fieldKey: T, error: Info) => void,
128-
) => Data<T>[]
128+
) => Data<T>[] | Promise<Data<T>[]>
129129

130130
export type ErrorLevel = "info" | "warning" | "error"
131131

0 commit comments

Comments
 (0)