From cf518b19c2b2e642607656004b8715a572e4476a Mon Sep 17 00:00:00 2001
From: Connor Cleveland <ccleveland@clevelandcoding.com>
Date: Mon, 23 Oct 2023 21:13:00 -0500
Subject: [PATCH] only update localStorage and hash if table setting differs
 from default

---
 client/src/utils/saveload.ts | 60 +++++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 24 deletions(-)

diff --git a/client/src/utils/saveload.ts b/client/src/utils/saveload.ts
index 945381f63..4d20c6d15 100644
--- a/client/src/utils/saveload.ts
+++ b/client/src/utils/saveload.ts
@@ -15,10 +15,10 @@ export interface TableState {
 
 export function useInitialTableState(tableId: string): TableState {
   const [initialState] = React.useState(() => {
-    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 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" }];
     const filters = savedFilters ? JSON.parse(savedFilters) : [];
@@ -31,29 +31,39 @@ 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 (JSON.stringify(state.sorters) != JSON.stringify([{ field: "id", order: "asc" }])) {
-      updateURLHash(`${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));
-    }
-    if (JSON.stringify(state.filters) != JSON.stringify([])) {
-      updateURLHash(`${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 })) {
-      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]);
@@ -62,11 +72,6 @@ export function useStoreInitialState(tableId: string, state: TableState) {
     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));
       }
@@ -90,7 +95,7 @@ export function useSavedState<T>(id: string, defaultValue: T) {
   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));
   if (!params.has(Id)) {
     params.append(Id, value)
@@ -98,6 +103,13 @@ export function updateURLHash(Id: string, value: string) {
   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));