tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

only update localStorage and hash if table setting differs from default

Browse Source
This commit is contained in:
Connor Cleveland
2023-10-23 21:13:00 -05:00
parent 201665dad4
commit cf518b19c2
1 changed files with 36 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
client/src/utils/saveload.ts
View File

@@ -15,10 +15,10 @@ export interface TableState {
export function useInitialTableState(tableId: string): TableState { export function useInitialTableState(tableId: string): TableState {
const [initialState] = React.useState(() => { const [initialState] = React.useState(() => {
const savedSorters = hasHashProperty(`${tableId}-sorters`) ? getHashProperty(`${tableId}-sorters`) : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-sorters`) : null; const savedSorters = hasHashProperty('sorters') ? getHashProperty('sorters') : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-sorters`) : null;
const savedFilters = hasHashProperty(`${tableId}-filters`) ? getHashProperty(`${tableId}-filters`) : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-filters`) : null; const savedFilters = hasHashProperty('filters') ? getHashProperty('filters') : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-filters`) : null;
const savedPagination = hasHashProperty(`${tableId}-pagination`) ? getHashProperty(`${tableId}-pagination`) : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-pagination`) : null; const savedPagination = hasHashProperty('pagination') ? getHashProperty('pagination') : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-pagination`) : null;
const savedShowColumns = hasHashProperty(`${tableId}-showColumns`) ? getHashProperty(`${tableId}-showColumns`) : isLocalStorageAvailable ? localStorage.getItem(`${tableId}-showColumns`) : null; const savedShowColumns = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-showColumns`) : null;
const sorters = savedSorters ? JSON.parse(savedSorters) : [{ field: "id", order: "asc" }]; const sorters = savedSorters ? JSON.parse(savedSorters) : [{ field: "id", order: "asc" }];
const filters = savedFilters ? JSON.parse(savedFilters) : []; const filters = savedFilters ? JSON.parse(savedFilters) : [];
@@ -31,29 +31,39 @@ export function useInitialTableState(tableId: string): TableState {
export function useStoreInitialState(tableId: string, state: TableState) { export function useStoreInitialState(tableId: string, state: TableState) {
React.useEffect(() => { React.useEffect(() => {
if (isLocalStorageAvailable) { if (state.sorters.length > 0 && JSON.stringify(state.sorters) != JSON.stringify([{ field: "id", order: "asc" }])) {
localStorage.setItem(`${tableId}-sorters`, JSON.stringify(state.sorters)); 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)); setURLHash(`sorters`, JSON.stringify(state.sorters));
} else {
localStorage.removeItem(`${tableId}-sorters`)
removeURLHash('sorters');
} }
}, [tableId, state.sorters]); }, [tableId, state.sorters]);
React.useEffect(() => { React.useEffect(() => {
if (isLocalStorageAvailable) { let filters = state.filters.filter(f => f.value.length != 0);
localStorage.setItem(`${tableId}-filters`, JSON.stringify(state.filters)); if (filters.length > 0) {
} if (isLocalStorageAvailable) {
if (JSON.stringify(state.filters) != JSON.stringify([])) { localStorage.setItem(`${tableId}-filters`, JSON.stringify(filters));
updateURLHash(`${tableId}-filters`, JSON.stringify(state.filters)); setURLHash('filters', JSON.stringify(state.filters));
}
} else {
localStorage.removeItem(`${tableId}-filters`)
removeURLHash(`filters`);
} }
}, [tableId, state.filters]); }, [tableId, state.filters]);
React.useEffect(() => { React.useEffect(() => {
if (isLocalStorageAvailable) {
localStorage.setItem(`${tableId}-pagination`, JSON.stringify(state.pagination));
}
if (JSON.stringify(state.pagination) != JSON.stringify({ current: 1, pageSize: 20 })) { if (JSON.stringify(state.pagination) != JSON.stringify({ current: 1, pageSize: 20 })) {
updateURLHash(`${tableId}-pagination`, JSON.stringify(state.pagination)); 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]); }, [tableId, state.pagination]);
@@ -62,11 +72,6 @@ export function useStoreInitialState(tableId: string, state: TableState) {
if (isLocalStorageAvailable) { if (isLocalStorageAvailable) {
if (state.showColumns === undefined) { if (state.showColumns === undefined) {
localStorage.removeItem(`${tableId}-showColumns`); 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 { } else {
localStorage.setItem(`${tableId}-showColumns`, JSON.stringify(state.showColumns)); localStorage.setItem(`${tableId}-showColumns`, JSON.stringify(state.showColumns));
} }
@@ -90,7 +95,7 @@ export function useSavedState<T>(id: string, defaultValue: T) {
return [state, setState] as const; return [state, setState] as const;
} }
export function updateURLHash(Id: string, value: string) { function setURLHash(Id: string, value: string) {
const params = new URLSearchParams(window.location.hash.substring(1)); const params = new URLSearchParams(window.location.hash.substring(1));
if (!params.has(Id)) { if (!params.has(Id)) {
params.append(Id, value) params.append(Id, value)
@@ -98,6 +103,13 @@ export function updateURLHash(Id: string, value: string) {
params.set(Id, value); params.set(Id, value);
window.location.hash = params.toString(); 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) { function getHashProperty(Id: string) {
const hash = new URLSearchParams(window.location.hash.substring(1)); const hash = new URLSearchParams(window.location.hash.substring(1));