feat(AnalyticalTable): Upgraded react-table to beta.20

removed setState, added reducer

Author: Lukas742

packages/main/package.json

@@ -27,7 +27,7 @@
     "lodash.debounce": "^4.0.8",
     "react-content-loader": "^4.3.2",
     "react-jss": "10.0.0",
-    "react-table": "7.0.0-beta.12",
+    "react-table": "7.0.0-beta.20",
     "react-toastify": "^5.4.1",
     "react-window": "^1.8.5"
   },

packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap

@@ -1795,7 +1795,6 @@ exports[`AnalyticalTable Tree Table 1`] = `
               style="align-items: center;"
             >
               <span
-                class=""
                 style="cursor: pointer; padding-left: 0px;"
                 title="Toggle Expanded"
               >

packages/main/src/components/AnalyticalTable/index.tsx

@@ -38,6 +38,7 @@ import { makeTemplateColumns } from './hooks/utils';
 import { TitleBar } from './TitleBar';
 import { VirtualTableBody } from './virtualization/VirtualTableBody';
 import { useDragAndDrop } from './hooks/useDragAndDrop';
+import { reducer } from './tableReducer/reducer';
 
 export interface ColumnConfiguration {
   accessor?: string;
@@ -154,12 +155,13 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
 
   const getSubRows = useCallback((row) => row[subRowsKey] || [], [subRowsKey]);
 
-  const { getTableProps, headerGroups, rows, prepareRow, setState, state: tableState, setColumnOrder } = useTable(
+  const { getTableProps, headerGroups, rows, prepareRow, state: tableState, setColumnOrder, dispatch } = useTable(
     {
       columns,
       data,
       defaultColumn: DefaultColumn,
       getSubRows,
+      reducer,
       ...reactTableOptions
     },
     useFilters,
@@ -185,13 +187,8 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
   );
 
   useEffect(() => {
-    setState((old) => {
-      return {
-        ...old,
-        groupBy
-      };
-    });
-  }, [groupBy, setState]);
+    dispatch({ type: 'SET_GROUP_BY', payload: groupBy });
+  }, [groupBy, dispatch]);
 
   const tableContainerClasses = StyleClassHelper.of(classes.tableContainer);
 
@@ -236,20 +233,15 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
       } else {
         groupedColumns = tableState.groupBy.filter((group) => group !== column.id);
       }
-      setState((old) => {
-        return {
-          ...old,
-          groupBy: groupedColumns
-        };
-      });
+      dispatch({ type: 'SET_GROUP_BY', payload: groupedColumns });
       onGroup(
         Event.of(null, e.getOriginalEvent(), {
           column,
           groupedColumns
         })
       );
     },
-    [tableState.groupBy, onGroup]
+    [tableState.groupBy, onGroup, dispatch]
   );
 
   const [headerRef, tableWidth] = useWindowResize();

packages/main/src/components/AnalyticalTable/tableReducer/reducer.ts

@@ -0,0 +1,9 @@
+export const reducer = (newState, action, prevState) => {
+  const { payload } = action;
+  switch (action.type) {
+    case 'SET_GROUP_BY':
+      return { ...prevState, groupBy: payload };
+    default:
+      return newState;
+  }
+};

yarn.lock

@@ -14488,10 +14488,10 @@ react-syntax-highlighter@^8.0.1:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
-[email protected].12:
-  version "7.0.0-beta.12"
-  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.12.tgz#ae54b398fbdb527b9fad82e52c4d829c00fdd5dc"
-  integrity sha512-h1c0KNTBRPAMgZumaNixr3X0w7kFTuqk6pHwia12LsMgnTHNEEeqp7+tQ5fTPwwMArp1/OHXeOdSKEes1C83iw==
+[email protected].20:
+  version "7.0.0-beta.20"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-beta.20.tgz#2125726549a15d5fd1d264145c92b9807a82aa1e"
+  integrity sha512-809Zj/OHX+Jbfnb+kxULZDvDstHrpzjFl2+mYOF9pU1CcJKkL2GdBmlWr9pcDmznxMU6veJUYnAxXYqvAWKVrQ==
 
 react-test-renderer@^16.0.0-0:
   version "16.8.6"