refactor(web): folders store (#14305)

* refactor(web): folders store

* use typescript private

web/src/lib/stores/folders.store.ts

@@ -1,69 +0,0 @@
-import {
-  getAssetsByOriginalPath,
-  getUniqueOriginalPaths,
-  /**
-   * TODO: Incorrect type
-   */
-  type AssetResponseDto,
-} from '@immich/sdk';
-import { get, writable } from 'svelte/store';
-
-type AssetCache = {
-  [path: string]: AssetResponseDto[];
-};
-
-type FoldersStore = {
-  uniquePaths: string[] | null;
-  assets: AssetCache;
-};
-
-function createFoldersStore() {
-  const initialState: FoldersStore = {
-    uniquePaths: null,
-    assets: {},
-  };
-
-  const { subscribe, set, update } = writable(initialState);
-
-  async function fetchUniquePaths() {
-    const state = get(foldersStore);
-
-    if (state.uniquePaths !== null) {
-      return;
-    }
-
-    const uniquePaths = await getUniqueOriginalPaths();
-    if (uniquePaths) {
-      update((state) => ({ ...state, uniquePaths }));
-    }
-  }
-
-  async function fetchAssetsByPath(path: string) {
-    const state = get(foldersStore);
-
-    if (state.assets[path]) {
-      return;
-    }
-
-    const assets = await getAssetsByOriginalPath({ path });
-    if (assets) {
-      update((state) => ({
-        ...state,
-        assets: { ...state.assets, [path]: assets },
-      }));
-    }
-  }
-
-  function clearCache() {
-    set(initialState);
-  }
-
-  return {
-    subscribe,
-    fetchUniquePaths,
-    fetchAssetsByPath,
-    clearCache,
-  };
-}
-
-export const foldersStore = createFoldersStore();

web/src/lib/stores/folders.svelte.ts

@@ -0,0 +1,45 @@
+import {
+  getAssetsByOriginalPath,
+  getUniqueOriginalPaths,
+  /**
+   * TODO: Incorrect type
+   */
+  type AssetResponseDto,
+} from '@immich/sdk';
+
+type AssetCache = {
+  [path: string]: AssetResponseDto[];
+};
+
+class FoldersStore {
+  private initialized = false;
+  uniquePaths = $state<string[]>([]);
+  assets = $state<AssetCache>({});
+
+  async fetchUniquePaths() {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
+
+    const uniquePaths = await getUniqueOriginalPaths();
+    this.uniquePaths.push(...uniquePaths);
+    this.uniquePaths.sort();
+  }
+
+  async fetchAssetsByPath(path: string) {
+    if (this.assets[path]) {
+      return;
+    }
+
+    this.assets[path] = await getAssetsByOriginalPath({ path });
+  }
+
+  clearCache() {
+    this.initialized = false;
+    this.uniquePaths = [];
+    this.assets = {};
+  }
+}
+
+export const foldersStore = new FoldersStore();

web/src/lib/utils/auth.ts

@@ -1,6 +1,6 @@
 import { browser } from '$app/environment';
 import { goto } from '$app/navigation';
-import { foldersStore } from '$lib/stores/folders.store';
+import { foldersStore } from '$lib/stores/folders.svelte';
 import { purchaseStore } from '$lib/stores/purchase.store';
 import { serverInfo } from '$lib/stores/server-info.store';
 import { preferences as preferences$, resetSavedUser, user as user$ } from '$lib/stores/user.store';

web/src/lib/utils/tree-utils.ts

@@ -7,8 +7,6 @@ export const normalizeTreePath = (path: string) => path.replace(/^\//, '').repla
 export function buildTree(paths: string[]) {
   const root: RecursiveObject = {};
 
-  paths.sort();
-
   for (const path of paths) {
     const parts = path.split('/');
     let current = root;

web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -9,7 +9,7 @@
   import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import type { Viewport } from '$lib/stores/assets.store';
-  import { foldersStore } from '$lib/stores/folders.store';
+  import { foldersStore } from '$lib/stores/folders.svelte';
   import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
   import { mdiFolder, mdiFolderHome, mdiFolderOutline } from '@mdi/js';
   import { onMount } from 'svelte';
@@ -27,7 +27,7 @@
   const viewport: Viewport = $state({ width: 0, height: 0 });
 
   let pathSegments = $derived(data.path ? data.path.split('/') : []);
-  let tree = $derived(buildTree($foldersStore?.uniquePaths || []));
+  let tree = $derived(buildTree(foldersStore.uniquePaths));
   let currentPath = $derived($page.url.searchParams.get(QueryParameter.PATH) || '');
   let currentTreeItems = $derived(currentPath ? data.currentFolders : Object.keys(tree));
 

web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.ts

@@ -1,10 +1,9 @@
 import { QueryParameter } from '$lib/constants';
-import { foldersStore } from '$lib/stores/folders.store';
+import { foldersStore } from '$lib/stores/folders.svelte';
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
 import { getAssetInfoFromParam } from '$lib/utils/navigation';
 import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
-import { get } from 'svelte/store';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params, url }) => {
@@ -13,18 +12,16 @@ export const load = (async ({ params, url }) => {
   const $t = await getFormatter();
 
   await foldersStore.fetchUniquePaths();
-  const { uniquePaths } = get(foldersStore);
 
   let pathAssets = null;
 
   const path = url.searchParams.get(QueryParameter.PATH);
   if (path) {
     await foldersStore.fetchAssetsByPath(path);
-    const { assets } = get(foldersStore);
+    pathAssets = foldersStore.assets[path] || null;
-    pathAssets = assets[path] || null;
   }
 
-  let tree = buildTree(uniquePaths || []);
+  let tree = buildTree(foldersStore.uniquePaths);
   const parts = normalizeTreePath(path || '').split('/');
   for (const part of parts) {
     tree = tree?.[part];

web/tsconfig.json

@@ -10,7 +10,7 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "es2020",
+    "target": "es2022",
     "types": ["vitest/globals"]
   },
   "extends": "./.svelte-kit/tsconfig.json"