fix(Tables): reduce re-renders; fix the incorrect data-ouia-safe attr…

…ibute (#389)
RedHatInsights · Aug 16, 2022 · c597913 · c597913
1 parent 0757662
commit c597913
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 28 deletions.
diff --git a/src/Components/AffectedClustersTable/AffectedClustersTable.js b/src/Components/AffectedClustersTable/AffectedClustersTable.js
@@ -274,14 +274,19 @@ const AffectedClustersTable = ({ query, rule, afterDisableFn }) => {
   };
 
   useEffect(() => {
-    const newFilteredRows = buildFilteredRows(rows, filters);
-    const newDisplayedRows = buildDisplayedRows(newFilteredRows);
-    setFilteredRows(newFilteredRows);
-    setDisplayedRows(newDisplayedRows);
-    if (isSuccess || isError) {
-      setRowsFiltered(true);
-    }
-  }, [query, filters]);
+    setFilteredRows(buildFilteredRows(rows, filters));
+  }, [
+    query,
+    filters.text,
+    filters.version,
+    filters.sortIndex,
+    filters.sortDirection,
+  ]);
+
+  useEffect(() => {
+    setDisplayedRows(buildDisplayedRows(filteredRows));
+    setRowsFiltered(true);
+  }, [filteredRows, filters.limit, filters.offset]);
 
   const handleModalToggle = (disableRuleModalOpen, host = undefined) => {
     setDisableRuleModalOpen(disableRuleModalOpen);

diff --git a/src/Components/ClusterRules/ClusterRules.js b/src/Components/ClusterRules/ClusterRules.js
@@ -106,22 +106,14 @@ const ClusterRules = ({ cluster }) => {
 
   useEffect(() => {
     setFilteredRows(buildFilteredRows(reports, filters));
-    if (isSuccess || isError) {
-      setRowsFiltered(true);
-    }
   }, [data, filters]);
 
   useEffect(() => {
     setDisplayedRows(
       buildDisplayedRows(filteredRows, filters.sortIndex, filters.sortDirection)
     );
-  }, [
-    filteredRows,
-    filters.limit,
-    filters.offset,
-    filters.sortIndex,
-    filters.sortDirection,
-  ]);
+    setRowsFiltered(true);
+  }, [filteredRows]);
 
   const handleOnCollapse = (_e, rowId, isOpen) => {
     if (rowId === undefined) {
@@ -409,8 +401,6 @@ const ClusterRules = ({ cluster }) => {
     const localFilters = { ...filters };
     delete localFilters.sortIndex;
     delete localFilters.sortDirection;
-    delete localFilters.offset;
-    delete localFilters.limit;
     return pruneFilters(localFilters, FILTER_CATEGORIES);
   };
 

diff --git a/src/Components/ClustersListTable/ClustersListTable.js b/src/Components/ClustersListTable/ClustersListTable.js
@@ -84,14 +84,19 @@ const ClustersListTable = ({
 
   useEffect(() => {
     setDisplayedRows(buildDisplayedRows(filteredRows));
+    setRowsFiltered(true);
   }, [filteredRows, filters.limit, filters.offset]);
 
   useEffect(() => {
     setFilteredRows(buildFilteredRows(clusters));
-    if (isSuccess || isError) {
-      setRowsFiltered(true);
-    }
-  }, [data, filters]);
+  }, [
+    data,
+    filters.text,
+    filters.version,
+    filters.hits,
+    filters.sortDirection,
+    filters.sortIndex,
+  ]);
 
   useEffect(() => {
     if (search && filterBuilding) {

diff --git a/src/Components/RecsListTable/RecsListTable.js b/src/Components/RecsListTable/RecsListTable.js
@@ -101,9 +101,7 @@ const RecsListTable = ({ query }) => {
     setDisplayedRows(
       buildDisplayedRows(filteredRows, filters.sortIndex, filters.sortDirection)
     );
-    if (isSuccess || isError) {
-      setRowsFiltered(true);
-    }
+    setRowsFiltered(true);
   }, [
     filteredRows,
     filters.limit,
@@ -114,7 +112,16 @@ const RecsListTable = ({ query }) => {
 
   useEffect(() => {
     setFilteredRows(buildFilteredRows(recs, filters));
-  }, [data, filters]);
+  }, [
+    data,
+    filters.category,
+    filters.impact,
+    filters.impacting,
+    filters.total_risk,
+    filters.rule_status,
+    filters.likelihood,
+    searchText,
+  ]);
 
   useEffect(() => {
     if (search && filterBuilding) {