diff --git a/client/src/utils/saveload.ts b/client/src/utils/saveload.ts index f25c0a099..4d20c6d15 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,9 +15,9 @@ 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 savedSorters = hasHashProperty('sorters') ? getHashProperty('sorters') : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-sorters`) : null; + const savedFilters = hasHashProperty('filters') ? getHashProperty('filters') : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-filters`) : null; + const savedPagination = hasHashProperty('pagination') ? getHashProperty('pagination') : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-pagination`) : null; const savedShowColumns = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-showColumns`) : null; const sorters = savedSorters ? JSON.parse(savedSorters) : [{ field: "id", order: "asc" }]; @@ -32,21 +31,41 @@ export function useInitialTableState(tableId: string): TableState { export function useStoreInitialState(tableId: string, state: TableState) { React.useEffect(() => { - if (isLocalStorageAvailable) { - localStorage.setItem(`${tableId}-sorters`, JSON.stringify(state.sorters)); + if (state.sorters.length > 0 && JSON.stringify(state.sorters) != JSON.stringify([{ field: "id", order: "asc" }])) { + if (isLocalStorageAvailable) { + localStorage.setItem(`${tableId}-sorters`, JSON.stringify(state.sorters)); + } + setURLHash(`sorters`, JSON.stringify(state.sorters)); + } else { + localStorage.removeItem(`${tableId}-sorters`) + removeURLHash('sorters'); } }, [tableId, state.sorters]); React.useEffect(() => { - if (isLocalStorageAvailable) { - localStorage.setItem(`${tableId}-filters`, JSON.stringify(state.filters)); + let filters = state.filters.filter(f => f.value.length != 0); + if (filters.length > 0) { + if (isLocalStorageAvailable) { + localStorage.setItem(`${tableId}-filters`, JSON.stringify(filters)); + setURLHash('filters', JSON.stringify(state.filters)); + } + } else { + localStorage.removeItem(`${tableId}-filters`) + removeURLHash(`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 })) { + if (isLocalStorageAvailable) { + localStorage.setItem(`${tableId}-pagination`, JSON.stringify(state.pagination)); + } + setURLHash(`pagination`, JSON.stringify(state.pagination)); + } else { + localStorage.removeItem(`${tableId}-pagination`) + removeURLHash(`pagination`); } + }, [tableId, state.pagination]); React.useEffect(() => { @@ -57,6 +76,7 @@ export function useStoreInitialState(tableId: string, state: TableState) { localStorage.setItem(`${tableId}-showColumns`, JSON.stringify(state.showColumns)); } } + }, [tableId, state.showColumns]); } @@ -74,3 +94,29 @@ export function useSavedState(id: string, defaultValue: T) { return [state, setState] as const; } + +function setURLHash(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 removeURLHash(Id: string) { + const params = new URLSearchParams(window.location.hash.substring(1)); + if (params.has(Id)) { + params.delete(Id) + } + 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