diff --git a/client/src/utils/saveload.ts b/client/src/utils/saveload.ts index f25c0a0..945381f 100644 --- a/client/src/utils/saveload.ts +++ b/client/src/utils/saveload.ts @@ -1,7 +1,6 @@ import React from "react"; import { CrudFilter, CrudSort } from "@refinedev/core"; import { isLocalStorageAvailable } from "./support"; - interface Pagination { current: number; pageSize: number; @@ -16,10 +15,10 @@ export interface TableState { export function useInitialTableState(tableId: string): TableState { const [initialState] = React.useState(() => { - const savedSorters = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-sorters`) : null; - const savedFilters = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-filters`) : null; - const savedPagination = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-pagination`) : null; - const savedShowColumns = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-showColumns`) : null; + const savedSorters = hasHashProperty(`${tableId}-sorters`) ? getHashProperty(`${tableId}-sorters`) : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-sorters`) : null; + const savedFilters = hasHashProperty(`${tableId}-filters`) ? getHashProperty(`${tableId}-filters`) : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-filters`) : null; + const savedPagination = hasHashProperty(`${tableId}-pagination`) ? getHashProperty(`${tableId}-pagination`) : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-pagination`) : null; + const savedShowColumns = hasHashProperty(`${tableId}-showColumns`) ? getHashProperty(`${tableId}-showColumns`) : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-showColumns`) : null; const sorters = savedSorters ? JSON.parse(savedSorters) : [{ field: "id", order: "asc" }]; const filters = savedFilters ? JSON.parse(savedFilters) : []; @@ -35,28 +34,44 @@ export function useStoreInitialState(tableId: string, state: TableState) { if (isLocalStorageAvailable) { localStorage.setItem(`${tableId}-sorters`, JSON.stringify(state.sorters)); } + if (JSON.stringify(state.sorters) != JSON.stringify([{ field: "id", order: "asc" }])) { + updateURLHash(`${tableId}-sorters`, JSON.stringify(state.sorters)); + } }, [tableId, state.sorters]); React.useEffect(() => { if (isLocalStorageAvailable) { localStorage.setItem(`${tableId}-filters`, JSON.stringify(state.filters)); } + if (JSON.stringify(state.filters) != JSON.stringify([])) { + updateURLHash(`${tableId}-filters`, JSON.stringify(state.filters)); + } }, [tableId, state.filters]); React.useEffect(() => { if (isLocalStorageAvailable) { localStorage.setItem(`${tableId}-pagination`, JSON.stringify(state.pagination)); } + if (JSON.stringify(state.pagination) != JSON.stringify({ current: 1, pageSize: 20 })) { + updateURLHash(`${tableId}-pagination`, JSON.stringify(state.pagination)); + } + }, [tableId, state.pagination]); React.useEffect(() => { if (isLocalStorageAvailable) { if (state.showColumns === undefined) { localStorage.removeItem(`${tableId}-showColumns`); + const params = new URLSearchParams(window.location.hash.substring(1)); + if (params.has(`${tableId}-showColumns`)) { + params.delete(`${tableId}-showColumns`) + } + window.location.hash = params.toString(); } else { localStorage.setItem(`${tableId}-showColumns`, JSON.stringify(state.showColumns)); } } + }, [tableId, state.showColumns]); } @@ -74,3 +89,22 @@ export function useSavedState(id: string, defaultValue: T) { return [state, setState] as const; } + +export function updateURLHash(Id: string, value: string) { + const params = new URLSearchParams(window.location.hash.substring(1)); + if (!params.has(Id)) { + params.append(Id, value) + } + params.set(Id, value); + window.location.hash = params.toString(); +} + +function getHashProperty(Id: string) { + const hash = new URLSearchParams(window.location.hash.substring(1)); + return hash.get(Id); +} + +function hasHashProperty(property: string): boolean { + const hash = new URLSearchParams(window.location.hash.substring(1)); + return hash.has(property); +} \ No newline at end of file