diff --git a/web/src/lib/stores/folders.store.ts b/web/src/lib/stores/folders.store.ts deleted file mode 100644 index 2e491374e2..0000000000 --- a/web/src/lib/stores/folders.store.ts +++ /dev/null @@ -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(); diff --git a/web/src/lib/stores/folders.svelte.ts b/web/src/lib/stores/folders.svelte.ts new file mode 100644 index 0000000000..cff7aea455 --- /dev/null +++ b/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([]); + assets = $state({}); + + 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(); diff --git a/web/src/lib/utils/auth.ts b/web/src/lib/utils/auth.ts index 0ac1658948..fe0a4b42d4 100644 --- a/web/src/lib/utils/auth.ts +++ b/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'; diff --git a/web/src/lib/utils/tree-utils.ts b/web/src/lib/utils/tree-utils.ts index 13fb6c1605..5a6e917079 100644 --- a/web/src/lib/utils/tree-utils.ts +++ b/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; diff --git a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte index 728387753c..065b28c674 100644 --- a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte +++ b/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)); diff --git a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.ts b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.ts index 41800c1a7d..d6fc683c08 100644 --- a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.ts +++ b/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 = assets[path] || null; + pathAssets = foldersStore.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]; diff --git a/web/tsconfig.json b/web/tsconfig.json index 63e16e7976..31aef23e31 100644 --- a/web/tsconfig.json +++ b/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"