ui/volumes/nodes:

Move the URL Sync logic for both Volumes and Nodes tables to its custom hook function to avoid a big block of code redundancy. Refs: #2919
scality · Nov 12, 2020 · d856a49 · d856a49
1 parent 169f51b
commit d856a49
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 47 deletions.
diff --git a/ui/src/components/NodeListTable.js b/ui/src/components/NodeListTable.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
 import { useLocation, useRouteMatch } from 'react-router-dom';
@@ -20,7 +20,7 @@ import {
   SortIncentive,
   TableHeader,
 } from './CommonLayoutStyle';
-import { compareHealth } from '../services/utils';
+import { compareHealth, useTableSortURLSync } from '../services/utils';
 import {
   API_STATUS_READY,
   API_STATUS_NOT_READY,
@@ -203,7 +203,6 @@ function GlobalFilter({
 }
 
 function Table({ columns, data, rowClicked, theme, selectedNodeName }) {
-  const history = useHistory();
   const query = useQuery();
   const querySearch = query.get('search');
   const querySort = query.get('sort');
@@ -283,27 +282,7 @@ function Table({ columns, data, rowClicked, theme, selectedNodeName }) {
     ?.id;
   const desc = headerGroups[0].headers.find((item) => item.isSorted === true)
     ?.isSortedDesc;
-  useEffect(() => {
-    // Creating a local query instance to avoid having it in the useEffect dependencies and creating infinite loops on search change
-    const query = new URLSearchParams(window.location.search);
-    const querySort = query.get('sort');
-    const queryDesc = query.get('desc');
-    if (data.length && (sorted !== querySort || desc !== queryDesc)) {
-      if (sorted) {
-        sorted ? query.set('sort', sorted) : query.delete('sort');
-        desc ? query.set('desc', desc) : query.delete('desc');
-        // Remove the default sorting `sort=health` from the query string
-        if (sorted === 'health' && desc === false) {
-          query.delete('sort');
-          query.delete('desc');
-        }
-      } else if (!sorted && querySort) {
-        query.delete('sort');
-        query.delete('desc');
-      }
-      history.replace(`?${query.toString()}`);
-    }
-  }, [sorted, desc, history, data.length]);
+  useTableSortURLSync(sorted, desc, data);
 
   return (
     <>

diff --git a/ui/src/components/VolumeListTable.js b/ui/src/components/VolumeListTable.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
 import { useLocation } from 'react-router-dom';
@@ -28,6 +28,7 @@ import {
   allSizeUnitsToBytes,
   compareHealth,
   formatSizeForDisplay,
+  useTableSortURLSync,
 } from '../services/utils';
 import {
   SortCaretWrapper,
@@ -280,27 +281,7 @@ function Table({
     ?.id;
   const desc = headerGroups[0].headers.find((item) => item.isSorted === true)
     ?.isSortedDesc;
-  useEffect(() => {
-    // Creating a local query instance to avoid having it in the useEffect dependencies and creating infinite loops on search change
-    const query = new URLSearchParams(window.location.search);
-    const querySort = query.get('sort');
-    const queryDesc = query.get('desc');
-    if (data.length && (sorted !== querySort || desc !== queryDesc)) {
-      if (sorted) {
-        sorted ? query.set('sort', sorted) : query.delete('sort');
-        desc ? query.set('desc', desc) : query.delete('desc');
-        // Remove the default sorting `sort=health` from the query string
-        if (sorted === 'health' && desc === false) {
-          query.delete('sort');
-          query.delete('desc');
-        }
-      } else if (!sorted && querySort) {
-        query.delete('sort');
-        query.delete('desc');
-      }
-      history.replace(`?${query.toString()}`);
-    }
-  }, [sorted, desc, history, data.length]);
+  useTableSortURLSync(sorted, desc, data);
 
   return (
     <>

diff --git a/ui/src/services/utils.js b/ui/src/services/utils.js
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useHistory } from 'react-router-dom';
 import { createSelector } from 'reselect';
 import sortByArray from 'lodash.sortby';
 import { intl } from '../translations/IntlGlobalProvider';
@@ -375,3 +375,31 @@ export const compareHealth = (status1, status2) => {
 export const formatSizeForDisplay = (value) => {
   return value.replace(/^(\d+)(\D+)$/, '$1 $2');
 };
+
+/*
+** Custom hook that stores table sorting choice in the URL queries
+** Defaults to health sorting (used on Nodes and Volumes tables)
+*/
+export const useTableSortURLSync = (sorted, desc, data) => {
+  const history = useHistory();
+  useEffect(() => {
+    const query = new URLSearchParams(window.location.search);
+    const querySort = query.get('sort');
+    const queryDesc = query.get('desc');
+    if (data.length && (sorted !== querySort || desc !== queryDesc)) {
+      if (sorted) {
+        sorted ? query.set('sort', sorted) : query.delete('sort');
+        desc ? query.set('desc', desc) : query.delete('desc');
+        // Remove the default sorting `sort=health` from the query string
+        if (sorted === 'health' && desc === false) {
+          query.delete('sort');
+          query.delete('desc');
+        }
+      } else if (!sorted && querySort) {
+        query.delete('sort');
+        query.delete('desc');
+      }
+      history.replace(`?${query.toString()}`);
+    }
+  }, [sorted, desc, data.length]);
+};