@@ -12,7 +12,7 @@ import type { themeOverrides } from "../../theme"
12
12
import type { RowsChangeData } from "react-data-grid"
13
13
14
14
type Props < T extends string > = {
15
- initialData : Data < T > [ ]
15
+ initialData : ( Data < T > & Meta ) [ ]
16
16
file : File
17
17
}
18
18
@@ -22,22 +22,21 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
22
22
"ValidationStep" ,
23
23
) as ( typeof themeOverrides ) [ "components" ] [ "ValidationStep" ] [ "baseStyle" ]
24
24
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
+
32
27
const [ selectedRows , setSelectedRows ] = useState < ReadonlySet < number | string > > ( new Set ( ) )
33
28
const [ filterByErrors , setFilterByErrors ] = useState ( false )
34
29
const [ showSubmitAlert , setShowSubmitAlert ] = useState ( false )
35
30
36
31
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 ) )
39
38
} ,
40
- [ setData , rowHook , tableHook , fields ] ,
39
+ [ rowHook , tableHook , fields ] ,
41
40
)
42
41
43
42
const deleteSelectedRows = ( ) => {
@@ -48,16 +47,17 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
48
47
}
49
48
}
50
49
51
- const updateRow = useCallback (
50
+ const updateRows = useCallback (
52
51
( rows : typeof data , changedData ?: RowsChangeData < ( typeof data ) [ number ] > ) => {
53
52
const changes = changedData ?. indexes . reduce ( ( acc , index ) => {
54
53
// when data is filtered val !== actual index in data
55
54
const realIndex = data . findIndex ( ( value ) => value . __index === rows [ index ] . __index )
56
55
acc [ realIndex ] = rows [ index ]
57
56
return acc
58
57
} , { } as Record < number , ( typeof data ) [ number ] > )
58
+ const realIndexes = changes && Object . keys ( changes ) . map ( ( index ) => Number ( index ) )
59
59
const newData = Object . assign ( [ ] , data , changes )
60
- updateData ( newData )
60
+ updateData ( newData , realIndexes )
61
61
} ,
62
62
[ data , updateData ] ,
63
63
)
@@ -136,7 +136,7 @@ export const ValidationStep = <T extends string>({ initialData, file }: Props<T>
136
136
< Table
137
137
rowKeyGetter = { rowKeyGetter }
138
138
rows = { tableData }
139
- onRowsChange = { updateRow }
139
+ onRowsChange = { updateRows }
140
140
columns = { columns }
141
141
selectedRows = { selectedRows }
142
142
onSelectedRowsChange = { setSelectedRows }
0 commit comments