feat(MaterialTable): aggregate gropuings in localStoarge under materi…

…al-table-groupings refactor(MTableGroupbar): map groupings feat(MTableGroupbar): clean up local storage when groupings are deleted
material-table-core · Jul 13, 2021 · 0dd33f2 · 0dd33f2
1 parent 20a9c1e
commit 0dd33f2
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 30 deletions.
diff --git a/src/components/MTableGroupbar/index.js b/src/components/MTableGroupbar/index.js
@@ -34,21 +34,41 @@ function MTableGroupbar(props) {
 
   useEffect(() => {
     if (props.persistentGroupingsId) {
-      const persistentGroupings = [];
+      const persistentGroupings = props.groupColumns.map((column) => ({
+        field: column.field,
+        groupOrder: column.tableData.groupOrder,
+        groupSort: column.tableData.groupSort,
+        columnOrder: column.tableData.columnOrder
+      }));
 
-      props.groupColumns.forEach((column) => {
-        persistentGroupings.push({
-          field: column.field,
-          groupOrder: column.tableData.groupOrder,
-          groupSort: column.tableData.groupSort,
-          columnOrder: column.tableData.columnOrder
-        });
-      });
-
-      localStorage.setItem(
-        props.persistentGroupingsId,
-        JSON.stringify(persistentGroupings)
+      let materialTableGroupings = localStorage.getItem(
+        'material-table-groupings'
       );
+      if (materialTableGroupings) {
+        materialTableGroupings = JSON.parse(materialTableGroupings);
+      } else {
+        materialTableGroupings = {};
+      }
+
+      if (persistentGroupings.length === 0) {
+        delete materialTableGroupings[props.persistentGroupingsId];
+
+        if (Object.keys(materialTableGroupings).length === 0) {
+          localStorage.removeItem('material-table-groupings');
+        } else {
+          localStorage.setItem(
+            'material-table-groupings',
+            JSON.stringify(materialTableGroupings)
+          );
+        }
+      } else {
+        materialTableGroupings[props.persistentGroupingsId] =
+          persistentGroupings;
+        localStorage.setItem(
+          'material-table-groupings',
+          JSON.stringify(materialTableGroupings)
+        );
+      }
     }
   }, [props.groupColumns]);
 

diff --git a/src/material-table.js b/src/material-table.js
@@ -85,27 +85,29 @@ export default class MaterialTable extends React.Component {
     const columnsCopy = JSON.parse(JSON.stringify(props.columns));
 
     if (props.options.persistentGroupingsId) {
-      let savedGroupings = localStorage.getItem(
-        props.options.persistentGroupingsId
+      let materialTableGroupings = localStorage.getItem(
+        'material-table-groupings'
       );
 
-      if (savedGroupings) {
-        const parsedGroupings = JSON.parse(savedGroupings);
-
-        if (parsedGroupings) {
-          parsedGroupings.forEach((savedGrouping) => {
-            const column = columnsCopy.find(
-              (col) => col.field === savedGrouping.field
-            );
-            if (column) {
-              if (!column.tableData) {
-                column.tableData = {};
+      if (materialTableGroupings) {
+        materialTableGroupings = JSON.parse(materialTableGroupings);
+
+        if (materialTableGroupings[props.options.persistentGroupingsId]) {
+          materialTableGroupings[props.options.persistentGroupingsId].forEach(
+            (savedGrouping) => {
+              const column = columnsCopy.find(
+                (col) => col.field === savedGrouping.field
+              );
+              if (column) {
+                if (!column.tableData) {
+                  column.tableData = {};
+                }
+                column.tableData.groupOrder = savedGrouping.groupOrder;
+                column.tableData.groupSort = savedGrouping.groupSort;
+                column.tableData.columnOrder = savedGrouping.columnOrder;
               }
-              column.tableData.groupOrder = savedGrouping.groupOrder;
-              column.tableData.groupSort = savedGrouping.groupSort;
-              column.tableData.columnOrder = savedGrouping.columnOrder;
             }
-          });
+          );
         }
       }
     }