1
1
import block from 'bem-cn-lite' ;
2
- import { useCallback , useEffect , useMemo , useState } from 'react' ;
2
+ import { useCallback , useEffect , useMemo , useRef , useState } from 'react' ;
3
3
import { useDispatch } from 'react-redux' ;
4
4
import { escapeRegExp } from 'lodash/fp' ;
5
5
@@ -17,6 +17,7 @@ import {
17
17
getConsumer ,
18
18
selectPreparedPartitionsData ,
19
19
setDataWasNotLoaded ,
20
+ setSelectedConsumer ,
20
21
} from '../../../../store/reducers/consumer' ;
21
22
22
23
import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton' ;
@@ -52,14 +53,17 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
52
53
53
54
const dispatch = useDispatch ( ) ;
54
55
55
- const [ selectedConsumer , setSelectedConsumer ] = useState < string [ ] > ( ) ;
56
+ const isFirstRenderRef = useRef ( true ) ;
57
+
56
58
const [ generalSearchValue , setGeneralSearchValue ] = useState ( '' ) ;
57
59
const [ partitionIdSearchValue , setPartitionIdSearchValue ] = useState ( '' ) ;
58
60
59
61
const [ componentCurrentPath , setComponentCurrentPath ] = useState ( path ) ;
60
62
61
63
const { autorefresh} = useTypedSelector ( ( state ) => state . schema ) ;
62
- const { loading, wasLoaded, error} = useTypedSelector ( ( state ) => state . consumer ) ;
64
+ const { loading, wasLoaded, error, selectedConsumer} = useTypedSelector (
65
+ ( state ) => state . consumer ,
66
+ ) ;
63
67
64
68
const partitions = useTypedSelector ( ( state ) => selectPreparedPartitionsData ( state ) ) ;
65
69
@@ -70,16 +74,24 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
70
74
useEffect ( ( ) => {
71
75
// Manual path control to ensure it updates with other values so no request with wrong params will be sent
72
76
setComponentCurrentPath ( path ) ;
73
- } , [ path ] ) ;
77
+
78
+ // Do not reset selected consumer on first effect call
79
+ // To enable navigating to specific consumer
80
+ if ( isFirstRenderRef . current ) {
81
+ isFirstRenderRef . current = false ;
82
+ } else {
83
+ dispatch ( setSelectedConsumer ( undefined ) ) ;
84
+ }
85
+ } , [ dispatch , path ] ) ;
74
86
75
87
const fetchConsumerData = useCallback (
76
88
( isBackground : boolean ) => {
77
89
if ( ! isBackground ) {
78
90
dispatch ( setDataWasNotLoaded ( ) ) ;
79
91
}
80
92
81
- if ( selectedConsumer && selectedConsumer . length ) {
82
- dispatch ( getConsumer ( componentCurrentPath , selectedConsumer [ 0 ] ) ) ;
93
+ if ( selectedConsumer ) {
94
+ dispatch ( getConsumer ( componentCurrentPath , selectedConsumer ) ) ;
83
95
}
84
96
} ,
85
97
[ dispatch , selectedConsumer , componentCurrentPath ] ,
@@ -99,12 +111,10 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
99
111
) ;
100
112
101
113
useEffect ( ( ) => {
102
- if ( consumersToSelect && consumersToSelect . length ) {
103
- setSelectedConsumer ( [ consumersToSelect [ 0 ] . value ] ) ;
104
- } else {
105
- setSelectedConsumer ( undefined ) ;
114
+ if ( consumersToSelect && consumersToSelect . length && ! selectedConsumer ) {
115
+ dispatch ( setSelectedConsumer ( consumersToSelect [ 0 ] . value ) ) ;
106
116
}
107
- } , [ consumersToSelect ] ) ;
117
+ } , [ dispatch , consumersToSelect , selectedConsumer ] ) ;
108
118
109
119
const selectedColumns : string [ ] = useMemo (
110
120
( ) =>
@@ -183,7 +193,7 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
183
193
} ;
184
194
185
195
const handleConsumerSelectChange = ( value : string [ ] ) => {
186
- setSelectedConsumer ( value ) ;
196
+ dispatch ( setSelectedConsumer ( value [ 0 ] ) ) ;
187
197
} ;
188
198
189
199
const handlePartitionIdSearchChange = ( value : string ) => {
@@ -210,7 +220,7 @@ export const Partitions = ({path, type, nodes, consumers}: PartitionsProps) => {
210
220
placeholder = { i18n ( 'controls.consumerSelector.placeholder' ) }
211
221
label = { i18n ( 'controls.consumerSelector' ) }
212
222
options = { consumersToSelect }
213
- value = { selectedConsumer }
223
+ value = { [ selectedConsumer || '' ] }
214
224
onUpdate = { handleConsumerSelectChange }
215
225
/>
216
226
< Search
0 commit comments