Skip to content

Commit 09dd8be

Browse files
authored
Merge pull request #212 from UgnisSoftware/UGN-409
Test #197 - validation step hooks
2 parents 08ed7a3 + 93f82cf commit 09dd8be

File tree

7 files changed

+421
-296
lines changed

7 files changed

+421
-296
lines changed

src/steps/UploadFlow.tsx

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { SelectHeaderStep } from "./SelectHeaderStep/SelectHeaderStep"
66
import { SelectSheetStep } from "./SelectSheetStep/SelectSheetStep"
77
import { mapWorkbook } from "../utils/mapWorkbook"
88
import { ValidationStep } from "./ValidationStep/ValidationStep"
9+
import { addErrorsAndRunHooks } from "./ValidationStep/utils/dataMutations"
910
import { MatchColumnsStep } from "./MatchColumnsStep/MatchColumnsStep"
1011
import { exceedsMaxRecords } from "../utils/exceedsMaxRecords"
1112
import { useRsi } from "../hooks/useRsi"
@@ -45,10 +46,19 @@ interface Props {
4546
}
4647

4748
export const UploadFlow = ({ nextStep }: Props) => {
48-
const { initialStepState } = useRsi()
49+
const {
50+
initialStepState,
51+
maxRecords,
52+
translations,
53+
uploadStepHook,
54+
selectHeaderStepHook,
55+
matchColumnsStepHook,
56+
fields,
57+
rowHook,
58+
tableHook,
59+
} = useRsi()
4960
const [state, setState] = useState<StepState>(initialStepState || { type: StepType.upload })
5061
const [uploadedFile, setUploadedFile] = useState<File | null>(null)
51-
const { maxRecords, translations, uploadStepHook, selectHeaderStepHook, matchColumnsStepHook } = useRsi()
5262
const toast = useToast()
5363
const errorToast = useCallback(
5464
(description: string) => {
@@ -141,9 +151,10 @@ export const UploadFlow = ({ nextStep }: Props) => {
141151
onContinue={async (values, rawData, columns) => {
142152
try {
143153
const data = await matchColumnsStepHook(values, rawData, columns)
154+
const dataWithMeta = await addErrorsAndRunHooks(data, fields, rowHook, tableHook)
144155
setState({
145156
type: StepType.validateData,
146-
data,
157+
data: dataWithMeta,
147158
})
148159
nextStep()
149160
} catch (e) {

src/steps/ValidationStep/ValidationStep.tsx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import type { themeOverrides } from "../../theme"
1212
import type { RowsChangeData } from "react-data-grid"
1313

1414
type Props<T extends string> = {
15-
initialData: Data<T>[]
15+
initialData: (Data<T> & Meta)[]
1616
file: File
1717
}
1818

@@ -22,22 +22,21 @@ 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)
26+
3227
const [selectedRows, setSelectedRows] = useState<ReadonlySet<number | string>>(new Set())
3328
const [filterByErrors, setFilterByErrors] = useState(false)
3429
const [showSubmitAlert, setShowSubmitAlert] = useState(false)
3530

3631
const updateData = useCallback(
37-
(rows: typeof data) => {
38-
setData(addErrorsAndRunHooks<T>(rows, fields, rowHook, tableHook))
32+
async (rows: typeof data, indexes?: number[]) => {
33+
// Check if hooks are async - if they are we want to apply changes optimistically for better UX
34+
if (rowHook?.constructor.name === "AsyncFunction" || tableHook?.constructor.name === "AsyncFunction") {
35+
setData(rows)
36+
}
37+
addErrorsAndRunHooks<T>(rows, fields, rowHook, tableHook, indexes).then((data) => setData(data))
3938
},
40-
[setData, rowHook, tableHook, fields],
39+
[rowHook, tableHook, fields],
4140
)
4241

4342
const deleteSelectedRows = () => {
@@ -48,16 +47,17 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
4847
}
4948
}
5049

51-
const updateRow = useCallback(
50+
const updateRows = useCallback(
5251
(rows: typeof data, changedData?: RowsChangeData<(typeof data)[number]>) => {
5352
const changes = changedData?.indexes.reduce((acc, index) => {
5453
// when data is filtered val !== actual index in data
5554
const realIndex = data.findIndex((value) => value.__index === rows[index].__index)
5655
acc[realIndex] = rows[index]
5756
return acc
5857
}, {} as Record<number, (typeof data)[number]>)
58+
const realIndexes = changes && Object.keys(changes).map((index) => Number(index))
5959
const newData = Object.assign([], data, changes)
60-
updateData(newData)
60+
updateData(newData, realIndexes)
6161
},
6262
[data, updateData],
6363
)
@@ -136,7 +136,7 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
136136
<Table
137137
rowKeyGetter={rowKeyGetter}
138138
rows={tableData}
139-
onRowsChange={updateRow}
139+
onRowsChange={updateRows}
140140
columns={columns}
141141
selectedRows={selectedRows}
142142
onSelectedRowsChange={setSelectedRows}

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ValidationStep } from "../ValidationStep"
33
import { Providers } from "../../../components/Providers"
44
import { defaultTheme } from "../../../ReactSpreadsheetImport"
55
import { ModalWrapper } from "../../../components/ModalWrapper"
6+
import { addErrorsAndRunHooks } from "../utils/dataMutations"
67

78
export default {
89
title: "Validation Step",
@@ -12,11 +13,14 @@ export default {
1213
}
1314

1415
const file = new File([""], "file.csv")
16+
const data = await addErrorsAndRunHooks(editableTableInitialData, mockRsiValues.fields)
1517

16-
export const Basic = () => (
17-
<Providers theme={defaultTheme} rsiValues={mockRsiValues}>
18-
<ModalWrapper isOpen={true} onClose={() => {}}>
19-
<ValidationStep initialData={editableTableInitialData} file={file} />
20-
</ModalWrapper>
21-
</Providers>
22-
)
18+
export const Basic = () => {
19+
return (
20+
<Providers theme={defaultTheme} rsiValues={mockRsiValues}>
21+
<ModalWrapper isOpen={true} onClose={() => {}}>
22+
<ValidationStep initialData={data} file={file} />
23+
</ModalWrapper>
24+
</Providers>
25+
)
26+
}

0 commit comments

Comments
 (0)