feat(grid): persist state

nurikk · Nov 21, 2021 · 0f9dd51 · 0f9dd51
1 parent ddb3ec1
commit 0f9dd51
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,6 +79,7 @@
         "i18next-http-backend": "^1.3.1",
         "jszip": "^3.7.1",
         "line-reader": "^0.4.0",
+        "local-storage": "^2.0.0",
         "lodash": "^4.17.21",
         "mini-css-extract-plugin": "^2.4.2",
         "notyf": "^3.10.0",

diff --git a/src/components/dashboard-page/DashboardFeatureWrapper.tsx b/src/components/dashboard-page/DashboardFeatureWrapper.tsx
@@ -80,7 +80,6 @@ export const DashboardFeatureWrapper: FunctionComponent<PropsWithChildren<Fetatu
     const { children, feature, deviceState = {} } = props;
     const icon = getGenericFeatureIcon(feature.name, deviceState[feature.property]);
     const { t } = useTranslation(['featureNames']);
-    console.log(feature);
     return <div className="d-flex align-items-center">
         {icon && <div className="me-1">
             <i className={`fa fa-fw ${icon}`} />

diff --git a/src/components/grid/ReactTableCom.tsx b/src/components/grid/ReactTableCom.tsx
@@ -1,10 +1,14 @@
 import React from "react";
-import { useTable, useSortBy, HeaderGroup, Column, useAsyncDebounce, useGlobalFilter } from 'react-table'
+import { useTable, useSortBy, HeaderGroup, Column, useAsyncDebounce, useGlobalFilter, ActionType, TableInstance, TableState } from 'react-table'
 
 import cx from "classnames";
 import { useTranslation } from "react-i18next";
 
+import { set, get } from "local-storage";
+import debounce from "lodash/debounce";
+
 interface Props {
+  id: string;
   columns: Array<Column<any>>;
   data: Array<any>;
 }
@@ -35,8 +39,22 @@ function GlobalFilter({
   )
 }
 
-export const Table: React.FC<Props> = ({ columns, data }) => {
+const persist = debounce((key: string, data: Record<string, unknown>): void => {
+  set(key, data);
+})
+
+
+const stateReducer = (newState: TableState<any>, action: ActionType, previousState: TableState<any>, instance?: TableInstance<any>): TableState<any> => {
+  if (instance) {
+    const { instanceId } = instance;
+    const { sortBy, globalFilter } = newState;
+    persist(instanceId, { sortBy, globalFilter })
+  }
+  return newState;
+};
 
+export const Table: React.FC<Props> = ({ columns, data, id }) => {
+  const initialState = get<Partial<TableState<any>>>(id) || {};
   const {
     getTableProps,
     getTableBodyProps,
@@ -48,10 +66,13 @@ export const Table: React.FC<Props> = ({ columns, data }) => {
     setGlobalFilter,
   } = useTable<any>(
     {
+      instanceId: id,
+      stateReducer,
       columns,
       data,
       autoResetSortBy: false,
       autoResetFilters: false,
+      initialState
     },
     useGlobalFilter,
     useSortBy

diff --git a/src/components/groups/index.tsx b/src/components/groups/index.tsx
@@ -107,7 +107,7 @@ export class GroupsPage extends Component<PropsFromStore & StateApi & SceneApi &
         ]
         return <div className="card">
             <div className="card-body">
-                <Table columns={columns} data={groups} />
+                <Table id="groups" columns={columns} data={groups} />
             </div>
         </div>
 

diff --git a/src/components/ota-page/index.tsx b/src/components/ota-page/index.tsx
@@ -103,7 +103,7 @@ class OtaPage extends Component<PropsFromStore & OtaApi & WithTranslation<"ota">
 
         return <div className="card">
             <div className="card-body table-responsive">
-                <Table columns={columns} data={otaDevices} />
+                <Table id="otaDevices" columns={columns} data={otaDevices} />
             </div>
         </div>
     }

diff --git a/src/components/touchlink-page/index.tsx b/src/components/touchlink-page/index.tsx
@@ -68,7 +68,7 @@ export class TouchlinkPage extends Component<TouchlinkApi & GlobalState & WithTr
         ];
         return (
             <div className="table-responsive">
-                <Table columns={columns} data={touchlinkDevices} />
+                <Table id="touchlinkDevices" columns={columns} data={touchlinkDevices} />
             </div>
         );
     }

diff --git a/src/components/zigbee/index.tsx b/src/components/zigbee/index.tsx
@@ -124,6 +124,7 @@ export class ZigbeeTable extends Component<ZigbeeTableProps, ZigbeeTableState> {
 
             },
             {
+                id: 'friendly_name',
                 Header: t('friendly_name') as string,
                 accessor: ({ device }) => device.friendly_name,
                 Cell: ({ row: { original: { device } } }) => <Link to={genDeviceDetailsLink(device.ieee_address)}>{device.friendly_name}</Link>
@@ -171,6 +172,7 @@ export class ZigbeeTable extends Component<ZigbeeTableProps, ZigbeeTableState> {
         return (<div className="card">
             <div className="table-responsive mt-1">
                 <Table
+                    id="zigbee"
                     columns={columns}
                     data={devices}
                 />