Total Complexity | 50 |
Complexity/F | 2.08 |
Lines of Code | 444 |
Function Count | 24 |
Duplicated Lines | 50 |
Ratio | 11.26 % |
Changes | 0 |
Duplicate code is one of the most pungent code smells. A rule that is often used is to re-structure code once it is duplicated in three or more places.
Common duplication problems, and corresponding solutions are:
Complex classes like src/actions/GridActions.js often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
1 | import { |
||
2 | ERROR_OCCURRED, |
||
3 | HIDE_HEADER, |
||
4 | MOVE_NODE, |
||
5 | RESIZE_COLUMNS, |
||
6 | SET_COLUMNS, |
||
7 | SET_DATA, |
||
8 | SET_SORT_DIRECTION, |
||
9 | SET_TREE_DATA_PARTIAL, |
||
10 | SET_TREE_NODE_VISIBILITY, |
||
11 | SORT_DATA, |
||
12 | INSERT_ROW |
||
13 | } from '../constants/ActionTypes'; |
||
14 | |||
15 | import { setLoaderState } from '../actions/plugins/loader/LoaderActions'; |
||
16 | |||
17 | import { dismissEditor } from '../actions/plugins/editor/EditorActions'; |
||
18 | |||
19 | import { keyGenerator } from '../util/keyGenerator'; |
||
20 | |||
21 | import { treeToFlatList } from '../util/treeToFlatList'; |
||
22 | |||
23 | import Api from '../util/api'; |
||
24 | |||
25 | export const getAsyncData = ({ |
||
26 | stateKey, dataSource, type, showTreeRootNode, extraParams = {} |
||
27 | }) => { |
||
28 | |||
29 | return (dispatch) => { |
||
30 | |||
31 | dispatch(dismissEditor({ stateKey })); |
||
32 | |||
33 | dispatch( |
||
34 | setLoaderState({state: true, stateKey }) |
||
35 | ); |
||
36 | |||
37 | if (typeof dataSource === 'function') { |
||
38 | |||
39 | // passing extraParams.parentId |
||
40 | // to custom func so they can do partial |
||
41 | // loading |
||
42 | dataSource(extraParams).then((response) => { |
||
43 | |||
44 | if (response && response.data) { |
||
45 | |||
46 | dispatch( |
||
47 | setLoaderState({ state: false, stateKey }) |
||
48 | ); |
||
49 | |||
50 | if (type !== 'tree') { |
||
51 | |||
52 | dispatch({ |
||
53 | type: SET_DATA, |
||
54 | data: response.data, |
||
55 | total: response.total, |
||
56 | currentRecords: response.data, |
||
57 | success: true, |
||
58 | stateKey, |
||
59 | editMode: extraParams.editMode |
||
60 | }); |
||
61 | } |
||
62 | |||
63 | else { |
||
64 | // upon the return of read |
||
65 | // response needs to clarify |
||
66 | // whether this is a partial update |
||
67 | dispatch(setTreeData({ |
||
68 | data: response.data, |
||
69 | stateKey, |
||
70 | showTreeRootNode, |
||
71 | parentId: extraParams.parentId, |
||
72 | partial: response.partial, |
||
73 | editMode: extraParams.editMode, |
||
74 | total: response.total |
||
75 | })); |
||
76 | } |
||
77 | |||
78 | return; |
||
79 | } |
||
80 | |||
81 | if (response && !response.data) { |
||
82 | /* eslint-disable no-console */ |
||
83 | console.warn( |
||
84 | `A response was recieved |
||
85 | but no data entry was found` |
||
86 | ); |
||
87 | console.warn( |
||
88 | `Please see |
||
89 | https://github.com/bencripps/react-redux-grid |
||
90 | for documentation` |
||
91 | ); |
||
92 | /* eslint-enable no-console */ |
||
93 | } |
||
94 | |||
95 | dispatch( |
||
96 | setLoaderState({ state: false, stateKey }) |
||
97 | ); |
||
98 | |||
99 | dispatch({ |
||
100 | type: ERROR_OCCURRED, |
||
101 | error: 'Unable to Retrieve Grid Data', |
||
102 | errorOccurred: true, |
||
103 | stateKey |
||
104 | }); |
||
105 | |||
106 | }); |
||
|
|||
107 | } |
||
108 | |||
109 | else if (typeof dataSource === 'string') { |
||
110 | |||
111 | if (type !== 'tree') { |
||
112 | |||
113 | return Api({ |
||
114 | route: dataSource, |
||
115 | method: 'GET' |
||
116 | }).then((response) => { |
||
117 | |||
118 | if (response && response.data) { |
||
119 | |||
120 | dispatch({ |
||
121 | type: SET_DATA, |
||
122 | data: response.data, |
||
123 | total: response.total, |
||
124 | currentRecords: response.data, |
||
125 | success: true, |
||
126 | stateKey, |
||
127 | editMode: extraParams.editMode |
||
128 | }); |
||
129 | |||
130 | } |
||
131 | |||
132 | else { |
||
133 | dispatch({ |
||
134 | type: ERROR_OCCURRED, |
||
135 | error: 'Unable to Retrieve Grid Data', |
||
136 | errorOccurred: true, |
||
137 | stateKey |
||
138 | }); |
||
139 | } |
||
140 | |||
141 | dispatch( |
||
142 | setLoaderState({state: false, stateKey }) |
||
143 | ); |
||
144 | }); |
||
145 | |||
146 | } |
||
147 | |||
148 | return Api({ |
||
149 | route: dataSource, |
||
150 | method: 'GET', |
||
151 | queryStringParams: { |
||
152 | parentId: extraParams.parentId |
||
153 | } |
||
154 | }).then((response) => { |
||
155 | |||
156 | if (response && response.data) { |
||
157 | |||
158 | // response needs to specify |
||
159 | // whether this is full or partial update |
||
160 | dispatch(setTreeData({ |
||
161 | data: response.data, |
||
162 | stateKey, |
||
163 | showTreeRootNode, |
||
164 | partial: response.partial, |
||
165 | parentId: extraParams.parentId |
||
166 | })); |
||
167 | |||
168 | } |
||
169 | |||
170 | else { |
||
171 | dispatch({ |
||
172 | type: ERROR_OCCURRED, |
||
173 | error: 'Unable to Retrieve Grid Data', |
||
174 | errorOccurred: true, |
||
175 | stateKey |
||
176 | }); |
||
177 | } |
||
178 | |||
179 | dispatch( |
||
180 | setLoaderState({state: false, stateKey }) |
||
181 | ); |
||
182 | }); |
||
183 | |||
184 | } |
||
185 | |||
186 | }; |
||
187 | }; |
||
188 | |||
189 | export const setColumns = ({ columns, stateKey, stateful }) => { |
||
190 | |||
191 | let cols = columns; |
||
192 | |||
193 | if (!cols[0].id) { |
||
194 | cols = columns.map((col) => { |
||
195 | col.id = keyGenerator(col.name, 'grid-column'); |
||
196 | return col; |
||
197 | }); |
||
198 | } |
||
199 | |||
200 | return { type: SET_COLUMNS, columns: cols, stateKey, stateful }; |
||
201 | }; |
||
202 | |||
203 | export const setSortDirection = ({ |
||
204 | columns, id, sortDirection, stateKey |
||
205 | }) => { |
||
206 | |||
207 | let cols = columns; |
||
208 | |||
209 | cols = columns.map((col) => { |
||
210 | |||
211 | if (col.id === id) { |
||
212 | col.sortDirection = sortDirection; |
||
213 | } |
||
214 | |||
215 | else { |
||
216 | // to do: remove this if we want to build |
||
217 | // up the sorts |
||
218 | col.sortDirection = null; |
||
219 | } |
||
220 | |||
221 | return col; |
||
222 | }); |
||
223 | |||
224 | return { type: SET_SORT_DIRECTION, columns: cols, stateKey }; |
||
225 | }; |
||
226 | |||
227 | export const doLocalSort = ({ data, stateKey }) => ({ |
||
228 | type: SORT_DATA, data, stateKey |
||
229 | }); |
||
230 | |||
231 | export const doRemoteSort = ({ |
||
232 | dataSource, filterFields, pageIndex, pageSize, sortParams, stateKey |
||
233 | }) => { |
||
234 | |||
235 | return (dispatch) => { |
||
236 | |||
237 | dispatch( |
||
238 | setLoaderState({state: true, stateKey }) |
||
239 | ); |
||
240 | View Code Duplication | ||
241 | if (typeof dataSource === 'function') { |
||
242 | return dataSource( |
||
243 | { pageIndex, pageSize }, |
||
244 | filterFields, |
||
245 | sortParams |
||
246 | ).then((response) => { |
||
247 | |||
248 | if (response && response.data) { |
||
249 | |||
250 | dispatch({ |
||
251 | type: SET_DATA, |
||
252 | data: response.data, |
||
253 | total: response.total, |
||
254 | currentRecords: response.data, |
||
255 | success: true, |
||
256 | stateKey |
||
257 | }); |
||
258 | |||
259 | } |
||
260 | |||
261 | else { |
||
262 | |||
263 | if (response && !response.data) { |
||
264 | /* eslint-disable no-console */ |
||
265 | console.warn( |
||
266 | `A response was recieved but no data |
||
267 | entry was found` |
||
268 | ); |
||
269 | console.warn( |
||
270 | `Please see |
||
271 | https://github.com/bencripps/react-redux-grid |
||
272 | for documentation` |
||
273 | ); |
||
274 | /* eslint-enable no-console */ |
||
275 | } |
||
276 | |||
277 | dispatch({ |
||
278 | type: ERROR_OCCURRED, |
||
279 | error: 'Unable to Retrieve Grid Data', |
||
280 | errorOccurred: true, |
||
281 | stateKey |
||
282 | }); |
||
283 | } |
||
284 | |||
285 | dispatch( |
||
286 | setLoaderState({state: false, stateKey }) |
||
287 | ); |
||
288 | }); |
||
289 | |||
290 | } |
||
291 | |||
292 | return Api({ |
||
293 | route: dataSource, |
||
294 | method: 'POST', |
||
295 | data: { |
||
296 | pageIndex: pageIndex, |
||
297 | pageSize: pageSize, |
||
298 | sort: sortParams.sort |
||
299 | } |
||
300 | }).then((response) => { |
||
301 | |||
302 | if (response && response.data) { |
||
303 | |||
304 | dispatch({ |
||
305 | type: SET_DATA, |
||
306 | data: response.data, |
||
307 | total: response.total, |
||
308 | currentRecords: response.data, |
||
309 | success: true |
||
310 | }); |
||
311 | |||
312 | } |
||
313 | |||
314 | else { |
||
315 | dispatch({ |
||
316 | type: ERROR_OCCURRED, |
||
317 | error: 'Unable to Retrieve Grid Data', |
||
318 | errorOccurred: true |
||
319 | }); |
||
320 | } |
||
321 | |||
322 | dispatch( |
||
323 | setLoaderState({state: false, stateKey }) |
||
324 | ); |
||
325 | }); |
||
326 | |||
327 | }; |
||
328 | }; |
||
329 | |||
330 | export const setColumnVisibility = ({ |
||
331 | columns, column, isHidden, stateKey, stateful |
||
332 | }) => { |
||
333 | const hidden = !isHidden; |
||
334 | |||
335 | const columnsArr = columns.map((col) => { |
||
336 | if (col.name === column.name) { |
||
337 | col.hidden = hidden; |
||
338 | } |
||
339 | |||
340 | return col; |
||
341 | }); |
||
342 | |||
343 | return { type: SET_COLUMNS, columns: columnsArr, stateKey, stateful }; |
||
344 | }; |
||
345 | |||
346 | export const resizeColumns = ({ |
||
347 | width, id, nextColumn, columns, stateKey, stateful |
||
348 | }) => { |
||
349 | |||
350 | const cols = columns.map((col) => { |
||
351 | |||
352 | if (col.id === id) { |
||
353 | col.width = `${width}%`; |
||
354 | } |
||
355 | |||
356 | else if (col.id === nextColumn.id) { |
||
357 | col.width = `${nextColumn.width}%`; |
||
358 | } |
||
359 | |||
360 | return col; |
||
361 | |||
362 | }); |
||
363 | |||
364 | return { |
||
365 | type: RESIZE_COLUMNS, |
||
366 | stateKey, |
||
367 | columns: cols, |
||
368 | stateful |
||
369 | }; |
||
370 | |||
371 | }; |
||
372 | |||
373 | export const setData = ({ data, stateKey, editMode }) => ({ |
||
374 | type: SET_DATA, data, stateKey, editMode |
||
375 | }); |
||
376 | |||
377 | export const setTreeData = ({ |
||
378 | data, stateKey, showTreeRootNode, partial, parentId, editMode, total |
||
379 | }) => { |
||
380 | |||
381 | // if this is a partial update to |
||
382 | // a tree grid, dispatch separate action; |
||
383 | if (partial) { |
||
384 | return { |
||
385 | type: SET_TREE_DATA_PARTIAL, |
||
386 | data: data, |
||
387 | stateKey, |
||
388 | gridType: 'tree', |
||
389 | showTreeRootNode, |
||
390 | parentId, |
||
391 | total |
||
392 | }; |
||
393 | } |
||
394 | |||
395 | let flat = treeToFlatList(data); |
||
396 | |||
397 | // remove root node |
||
398 | if (!showTreeRootNode) { |
||
399 | flat = flat.shift(); |
||
400 | } |
||
401 | |||
402 | return { |
||
403 | type: SET_DATA, |
||
404 | data: flat, |
||
405 | stateKey, |
||
406 | gridType: 'tree', |
||
407 | treeData: data, |
||
408 | editMode, |
||
409 | total |
||
410 | }; |
||
411 | }; |
||
412 | |||
413 | export const insertRow = ({ |
||
414 | stateKey, data, index = 0 |
||
415 | }) => ({ |
||
416 | type: INSERT_ROW, |
||
417 | stateKey, |
||
418 | data, |
||
419 | index |
||
420 | }); |
||
421 | |||
422 | export const setTreeNodeVisibility = ({ |
||
423 | id, visible, stateKey, showTreeRootNode |
||
424 | }) => ({ |
||
425 | type: SET_TREE_NODE_VISIBILITY, |
||
426 | id, |
||
427 | visible, |
||
428 | stateKey, |
||
429 | showTreeRootNode |
||
430 | }); |
||
431 | |||
432 | export const moveNode = ({ |
||
433 | stateKey, current, next, showTreeRootNode |
||
434 | }) => ({ |
||
435 | type: MOVE_NODE, |
||
436 | stateKey, |
||
437 | current, |
||
438 | next, |
||
439 | showTreeRootNode |
||
440 | }); |
||
441 | |||
442 | export const setHeaderVisibility = ({ hidden, stateKey }) => ({ |
||
443 | type: HIDE_HEADER, headerHidden: hidden, stateKey |
||
444 | }); |
||
445 |