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