diff --git a/src/components/CANFilter/Table/index.jsx b/src/components/CANFilter/Table/index.jsx index 7001606..c4fe4a2 100644 --- a/src/components/CANFilter/Table/index.jsx +++ b/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"); diff --git a/src/components/Controls/CarECUsTable/index.jsx b/src/components/Controls/CarECUsTable/index.jsx index 9ea5ac9..921a179 100644 --- a/src/components/Controls/CarECUsTable/index.jsx +++ b/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"); diff --git a/src/components/Controls/CarSelectionTable/index.jsx b/src/components/Controls/CarSelectionTable/index.jsx index 742e596..7a5d741 100644 --- a/src/components/Controls/CarSelectionTable/index.jsx +++ b/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"); diff --git a/src/components/Controls/CarUpdateStatusTable/index.jsx b/src/components/Controls/CarUpdateStatusTable/index.jsx index 0701e29..67b5253 100644 --- a/src/components/Controls/CarUpdateStatusTable/index.jsx +++ b/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"); diff --git a/src/components/Controls/CarUpdatesTable/index.jsx b/src/components/Controls/CarUpdatesTable/index.jsx index c5a3107..a543777 100644 --- a/src/components/Controls/CarUpdatesTable/index.jsx +++ b/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"); diff --git a/src/components/Fleets/Status/CANFilters/Table/index.jsx b/src/components/Fleets/Status/CANFilters/Table/index.jsx index 1572045..07c51cf 100644 --- a/src/components/Fleets/Status/CANFilters/Table/index.jsx +++ b/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"); diff --git a/src/components/Fleets/Status/Vehicles/Table/index.jsx b/src/components/Fleets/Status/Vehicles/Table/index.jsx index 697a3e8..8d08b82 100644 --- a/src/components/Fleets/Status/Vehicles/Table/index.jsx +++ b/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"); diff --git a/src/components/Fleets/Table/index.jsx b/src/components/Fleets/Table/index.jsx index f220594..2ffccf9 100644 --- a/src/components/Fleets/Table/index.jsx +++ b/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"); diff --git a/src/components/Layouts/SideMenu.jsx b/src/components/Layouts/SideMenu.jsx index caefa8d..10e0b9e 100644 --- a/src/components/Layouts/SideMenu.jsx +++ b/src/components/Layouts/SideMenu.jsx @@ -64,8 +64,8 @@ const menuData = [ { label: "SMS", to: "/tools/sms/send", - roles: [], - }, + roles: [Roles.CREATE], + } ], }, ]; diff --git a/src/components/Manifest/List/index.jsx b/src/components/Manifest/List/index.jsx index a414f20..c339079 100644 --- a/src/components/Manifest/List/index.jsx +++ b/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"); diff --git a/src/components/Manifest/Status/index.jsx b/src/components/Manifest/Status/index.jsx index 8be5ea7..cb6e865 100644 --- a/src/components/Manifest/Status/index.jsx +++ b/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 { diff --git a/src/components/Routes/SiteRoutes.jsx b/src/components/Routes/SiteRoutes.jsx index 2981938..87d9e61 100644 --- a/src/components/Routes/SiteRoutes.jsx +++ b/src/components/Routes/SiteRoutes.jsx @@ -215,7 +215,7 @@ const SiteRoutes = () => { type={TYPES.PROTECTED} token={token} groups={groups} - // roles={[Roles.CREATE]} + roles={[Roles.CREATE]} /> { 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"); diff --git a/src/components/useLocalStorage.js b/src/components/useLocalStorage.js new file mode 100644 index 0000000..28b6dc4 --- /dev/null +++ b/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]; +}; \ No newline at end of file diff --git a/src/components/useLocalStorage.test.js b/src/components/useLocalStorage.test.js new file mode 100644 index 0000000..04e9f51 --- /dev/null +++ b/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 ( +
+ +
{value}
+
+ ); + } + + render(); + }); + + 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'); + }); +}) \ No newline at end of file