CEC-2152 Add persistent page size for tables (#175)

* Add persistent page size

* Add permissions for sms as well

Co-authored-by: jwu-fisker <jwu@fiskerinc.com>

src/components/CANFilter/Table/index.jsx

@@ -28,6 +28,7 @@ import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import { logger } from "../../../services/monitoring";
 import { Roles, hasRole } from "../../../utils/roles";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -44,9 +45,11 @@ const tableColumns = [
   }
 ];
 
+const PAGE_SIZE = "CAN_FILTER_TABLE_PAGE_SIZE";
+
 const MainForm = ({ vin }) => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");

src/components/Controls/CarECUsTable/index.jsx

@@ -14,6 +14,7 @@ import TableHeaderSortable from "../../Table/HeaderSortable";
 import { useVehicleContext } from "../../Contexts/VehicleContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { logger } from "../../../services/monitoring";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -42,10 +43,12 @@ const tableColumns = [
   },
 ];
 
+const PAGE_SIZE = "CAR_ECUS_TABLE_PAGE_SIZE";
+
 const CarECUsTable = ({ vin, token, classes }) => {
   const [ecus, setECUs] = useState([]);
   const [total, setTotal] = useState(0);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("ecu");
   const [order, setOrder] = useState("desc");

src/components/Controls/CarSelectionTable/index.jsx

@@ -19,6 +19,7 @@ import TableHeaderSortable from "../../Table/HeaderSortable";
 import { logger } from "../../../services/monitoring";
 import ConnectedIcon from "../../Controls/ConnectedIcon";
 import ECUList from "../../Controls/ECUList";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -47,6 +48,8 @@ const tableColumns = [
   },
 ];
 
+const PAGE_SIZE = "CAR_SELECTION_TABLE_PAGE_SIZE";
+
 const CarSelectionTable = (props) => {
   const {
     token,
@@ -57,7 +60,7 @@ const CarSelectionTable = (props) => {
     onSelect,
     onSelectAll,
   } = props;
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("vin");
   const [order, setOrder] = useState("asc");

src/components/Controls/CarUpdateStatusTable/index.jsx

@@ -14,6 +14,7 @@ import TableHeaderSortable from "../../Table/HeaderSortable";
 import { useCarUpdatesContext } from "../../Contexts/CarUpdatesContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -34,11 +35,13 @@ const tableColumns = [
   },
 ];
 
+const PAGE_SIZE = "CAR_UPDATE_STATUS_TABLE_PAGE_SIZE";
+
 const CarUpdateStatusTable = ({ carupdateid, token }) => {
   const classes = useStyles();
   const [log, setLog] = useState([]);
   const [logTotal, setLogTotal] = useState(0);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");

src/components/Controls/CarUpdatesTable/index.jsx

@@ -18,6 +18,7 @@ import {
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 import { logger } from "../../../services/monitoring";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -42,9 +43,11 @@ const tableColumns = [
   },
 ];
 
+const PAGE_SIZE = "CAR_UPDATES_TABLE_PAGE_SIZE";
+
 const MainForm = ({ vin, token }) => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");

src/components/Fleets/Status/CANFilters/Table/index.jsx

@@ -23,6 +23,7 @@ import useStyles from "../../../../useStyles";
 import SearchField from "../../../../Controls/SearchField";
 import { logger } from "../../../../../services/monitoring";
 import { Roles, hasRole } from "../../../../../utils/roles";
+import {useLocalStorage} from "../../../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -39,8 +40,10 @@ const tableColumns = [
   }
 ];
 
+const PAGE_SIZE = "FLEET_STATUS_CAN_FILTER_TABLE_PAGE_SIZE";
+
 const MainForm = ({ name }) => {
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");

src/components/Fleets/Status/Vehicles/Table/index.jsx

@@ -22,6 +22,7 @@ import useStyles from "../../../../useStyles";
 import SearchField from "../../../../Controls/SearchField";
 import { logger } from "../../../../../services/monitoring";
 import { Roles, hasRole } from "../../../../../utils/roles";
+import {useLocalStorage} from "../../../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -34,8 +35,10 @@ const tableColumns = [
   }
 ];
 
+const PAGE_SIZE = "FLEET_STATUS_VEHICLES_TABLE_PAGE_SIZE";
+
 const MainForm = ({ name }) => {
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");

src/components/Fleets/Table/index.jsx

@@ -21,6 +21,7 @@ import { FleetProvider, useFleetContext } from "../../Contexts/FleetContext"
 import useStyles from "../../useStyles";
 import SearchField from "../../Controls/SearchField";
 import { logger } from "../../../services/monitoring";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -49,8 +50,10 @@ const tableColumns = [
   }
 ];
 
+const PAGE_SIZE = "FLEET_TABLE_PAGE_SIZE";
+
 const MainForm = () => {
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");

src/components/Layouts/SideMenu.jsx

@@ -64,8 +64,8 @@ const menuData = [
       {
         label: "SMS",
         to: "/tools/sms/send",
-        roles: [],
-      },
+        roles: [Roles.CREATE],
+      }
     ],
   },
 ];

src/components/Manifest/List/index.jsx

@@ -28,6 +28,7 @@ import SearchField from "../../Controls/SearchField";
 import { logger } from "../../../services/monitoring";
 import ECUList from "../../Controls/ECUList";
 import { Roles, hasRole } from "../../../utils/roles";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -56,9 +57,11 @@ const tableColumns = [
   },
 ];
 
+const PAGE_SIZE="MANIFEST_LIST_PAGE_SIZE";
+
 const MainForm = () => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("asc");

src/components/Manifest/Status/index.jsx

@@ -27,11 +27,14 @@ import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import { logger } from "../../../services/monitoring";
 import ManifestDetails from "../Details";
+import {useLocalStorage} from "../../useLocalStorage";
+
+const PAGE_SIZE="MANIFEST_STATUS_PAGE_SIZE";
 
 const MainForm = () => {
   const { manifest_id } = useParams();
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const { getManifests, manifests } = useManifestsContext();
   const {

src/components/Routes/SiteRoutes.jsx

@@ -215,7 +215,7 @@ const SiteRoutes = () => {
           type={TYPES.PROTECTED}
           token={token}
           groups={groups}
-          // roles={[Roles.CREATE]}
+          roles={[Roles.CREATE]}
         />
         <AuthRoute
           path="/suppliers"

src/components/Suppliers/Table/index.jsx

@@ -16,6 +16,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import { logger } from "../../../services/monitoring";
+import {useLocalStorage} from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -48,9 +49,11 @@ const tableColumns = [
   },
 ];
 
+const PAGE_SIZE="SUPPLIER_TABLE_PAGE_SIZE";
+
 const SupplierTable = (props) => {
   const { token, classes } = props;
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("created_at");
   const [order, setOrder] = useState("asc");

src/components/useLocalStorage.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from "react";
+
+export function getStorageValue(key, defaultValue) {
+    // getting stored value
+    const saved = localStorage.getItem(key);
+    const initial = JSON.parse(saved);
+    return initial || defaultValue;
+}
+
+export const useLocalStorage = (key, defaultValue) => {
+    const [value, setValue] = useState(() => {
+        return getStorageValue(key, defaultValue);
+    });
+
+    useEffect(() => {
+        // storing input name
+        localStorage.setItem(key, JSON.stringify(value));
+    }, [key, value]);
+
+    return [value, setValue];
+};

src/components/useLocalStorage.test.js

@@ -0,0 +1,41 @@
+import {getStorageValue, useLocalStorage} from './useLocalStorage'
+import {cleanup, render, screen} from "@testing-library/react";
+
+describe('getStorageValue', () => {
+    it('getting stored value', () => {
+        let val = getStorageValue('key', 'defaultValue');
+        expect(val).toBe('defaultValue');
+
+        localStorage.setItem('key', JSON.stringify('value'));
+        val = getStorageValue('key', 'defaultValue');
+        expect(val).toBe('value');
+    });
+})
+
+
+describe('useLocalStorage', () => {
+    beforeEach(() => {
+        const TestComponent = () => {
+            const [value, setValue] = useLocalStorage('key2', 'defaultValue');
+            return (
+                <div>
+                    <button data-testid="setVal" onClick={() => setValue('newValue')}>Set Value</button>
+                    <div data-testid="val">{value}</div>
+                </div>
+            );
+        }
+
+        render(<TestComponent/>);
+    });
+
+    afterEach(() => {
+        cleanup();
+    });
+
+
+    it('getting default value and setting it', () => {
+        expect(screen.getByTestId('val').innerHTML).toEqual('defaultValue');
+        screen.getByTestId('setVal').click();
+        expect(screen.getByTestId('val').innerHTML).toEqual('newValue');
+    });
+})