refactor: implemented v2 filters persistence prototype on history [WT…

…EL-5622]
webitel · Jan 9, 2025 · 073d885 · 073d885
1 parent edf38d7
commit 073d885
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 25 deletions.
diff --git a/src/modules/Filters/v2/filters/classes/FiltersManager.class.ts b/src/modules/Filters/v2/filters/classes/FiltersManager.class.ts
@@ -29,8 +29,8 @@ const isValueSnapshotKey = (snapshotKey: string): boolean =>
   snapshotKey.includes('_val');
 
 const filterNameFromSnapshotKey = (snapshotKey: string): FilterName => {
-  if (isLabelSnapshotKey()) return filterLabelFromSnapshotKey(snapshotKey);
-  if (isValueSnapshotKey()) return filterValueFromSnapshotKey(snapshotKey);
+  if (isLabelSnapshotKey(snapshotKey)) return filterLabelFromSnapshotKey(snapshotKey);
+  if (isValueSnapshotKey(snapshotKey)) return filterValueFromSnapshotKey(snapshotKey);
 };
 
 class FiltersManager implements IFiltersManager {
@@ -100,8 +100,7 @@ class FiltersManager implements IFiltersManager {
     const snapshot = JSON.parse(snapshotStr);
 
     const filters = Object.entries(snapshot).reduce(
-      acc,
-      ([snapshotKey, snapshotValue]) => {
+      (acc, [snapshotKey, snapshotValue]) => {
         const name = filterNameFromSnapshotKey(snapshotKey);
         const valueProp = isValueSnapshotKey(snapshotKey) ? 'value' : 'label';
 
@@ -112,6 +111,8 @@ class FiltersManager implements IFiltersManager {
             [valueProp]: snapshotValue,
           };
         }
+
+        return acc;
       },
       {},
     );

diff --git a/src/modules/Filters/v2/filters/createTableFiltersStore.ts b/src/modules/Filters/v2/filters/createTableFiltersStore.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
-import { computed, reactive } from 'vue';
+import { computed, reactive,ref } from 'vue';
 
+import { PersistedStorageType } from '../persist/PersistedStorage.types.ts';
 import { usePersistedStorage } from '../persist/usePersistedStorage.ts';
 import { createFiltersManager } from './classes/FiltersManager.class.ts';
 
@@ -9,7 +10,7 @@ export const createTableFiltersStore = (namespace: string) => {
 
   return defineStore(id, () => {
     const filtersManager = reactive(
-      createFiltersManager({ storagePrefix: namespace }),
+      createFiltersManager(),
     );
 
     // wrapping filtersManager method to extend their functionality, if it will be necessary in future
@@ -23,7 +24,15 @@ export const createTableFiltersStore = (namespace: string) => {
       const { restore: restoreFilters } = usePersistedStorage({
         name: 'filters',
         value: filtersManager,
-        storagePath: `${namespace}/filters`,
+        storages: [PersistedStorageType.Route],
+        onStore: async (save, { name }) => {
+          const snapshotStr = filtersManager.toString();
+          return save({ name, value: snapshotStr });
+        },
+        onRestore: async (restore, name) => {
+          const snapshotStr = await restore(name);
+          if (snapshotStr) filtersManager.fromString(snapshotStr);
+        },
       });
 
       return restoreFilters();

diff --git a/src/modules/Filters/v2/persist/PersistedStorage.types.ts b/src/modules/Filters/v2/persist/PersistedStorage.types.ts
@@ -39,7 +39,7 @@ export interface PersistedPropertyConfig {
   onRestore?: (
     restore: (name: string) => Promise<PersistableValue>,
     name: string,
-  ) => Promise<PersistableValue>;
+  ) => Promise<void>;
 }
 
 export interface PersistedStorageController {

diff --git a/src/modules/Filters/v2/persist/usePersistedStorage.ts b/src/modules/Filters/v2/persist/usePersistedStorage.ts
@@ -1,6 +1,7 @@
 import { watch } from 'vue';
 
 import {
+  PersistableValue,
   PersistedPropertyConfig,
   PersistedStorageController,
   PersistedStorageType,
@@ -20,9 +21,22 @@ export const usePersistedStorage = ({
   let unwatch = null;
 
   const setItemFns = [];
-  const getItemFns = [];
+  const getItemFns: Array<(name: string) => Promise<PersistableValue>> = [];
   const removeItemFns = [];
 
+  const composedValueGetter = async (name: string): Promise<PersistableValue[]> => {
+    const settledResults = await Promise.allSettled(
+      getItemFns.map((getter) => getter(name))
+    );
+
+    return settledResults.reduce((acc, { status, value }) => {
+      if (status === 'fulfilled') {
+        return [...acc, value];
+      }
+      return acc;
+    }, []);
+  };
+
   const storages = Array.isArray(configStorages)
     ? configStorages
     : [configStorages];
@@ -57,10 +71,15 @@ export const usePersistedStorage = ({
          wrap all setItemFns in one callback
           so that onStore is called only once on each value change
          */
-        const save = async ({ name, value }) => {
-          await Promise.allSettled(
-            setItemFns.map((setItem) => setItem({ name, value })),
-          );
+        const save = async ({ name, value: storedValue }) => {
+          // await Promise.allSettled(
+          //   setItemFns.map((setItem) => {
+          //     return setItem({ name, value: storedValue });
+          //   }),
+          // );
+          setItemFns.forEach((setter) => {
+            setter(name, storedValue);
+          });
         };
         await onStore(save, { name, value });
       } else {
@@ -72,7 +91,7 @@ export const usePersistedStorage = ({
           setter(name, storedValue);
         });
       }
-    });
+    }, { deep: true });
   };
 
   const restore = async () => {
@@ -85,32 +104,28 @@ export const usePersistedStorage = ({
          wrap all getItemFns in one callback
           so that onRestore is called only once on each value change
          */
-      const restore = async (name) => {
-        await Promise.allSettled(getItemFns.map((getItem) => getItem(name)));
-        const restoredValues = await Promise.allSettled(
-          getItemFns.map((getItem) => getItem(name)),
-        );
+      const restore = async (name: string) => {
+        const restoredValues = await composedValueGetter(name);
         /*
          not sure if value to restore should be picked automatically
           before running onRestore
          */
-        return restoredValues.find((value) => value !== null);
+        return restoredValues.find((value) => {
+          return value !== null;
+        });
       };
       await onRestore(restore, name);
     } else {
       /*
        else, perform default restoring logic
        */
-      const restoredValues = await Promise.allSettled(
-        getItemFns.map((getItem) => getItem(name)),
-      );
+      const restoredValues = await composedValueGetter(name);
       const restoredValue = restoredValues.find((value) => value !== null);
 
       if (restoredValue !== undefined) {
         value.value = restoredValue;
       }
     }
-
     /*
       start watching after restoring value to prevent restored value
        from storing again

diff --git a/vite.config.ts b/vite.config.ts
@@ -81,7 +81,7 @@ export default ({ mode }) => {
       }),
       checker({
         typescript: false,
-        vueTsc: true,
+        vueTsc: mode !== 'production',
         // biome: true,
       }),
     ],