diff --git a/src/renderer/components/item-list/helpers/use-item-list-scroll-persist.ts b/src/renderer/components/item-list/helpers/use-item-list-scroll-persist.ts index 76f829648..b45a267f2 100644 --- a/src/renderer/components/item-list/helpers/use-item-list-scroll-persist.ts +++ b/src/renderer/components/item-list/helpers/use-item-list-scroll-persist.ts @@ -1,26 +1,29 @@ import { useCallback, useMemo } from 'react'; -import { useSearchParams } from 'react-router'; +import { useLocation, useNavigationType } from 'react-router'; -import { parseIntParam, setSearchParam } from '/@/renderer/utils/query-params'; +import { useScrollStore } from '/@/renderer/store/scroll.store'; interface UseItemListScrollPersistProps { enabled: boolean; } export const useItemListScrollPersist = ({ enabled }: UseItemListScrollPersistProps) => { - const [searchParams, setSearchParams] = useSearchParams(); + const location = useLocation(); + const navigationType = useNavigationType(); + const setOffset = useScrollStore((s) => s.setOffset); + const getOffset = useScrollStore((s) => s.getOffset); - const scrollOffset = useMemo(() => parseIntParam(searchParams, 'scrollOffset'), [searchParams]); + const scrollOffset = useMemo(() => { + if (navigationType !== 'POP') return undefined; + return getOffset(location.key); + }, [getOffset, location.key, navigationType]); const handleOnScrollEnd = useCallback( (offset: number) => { if (!enabled) return; - - setSearchParams((prev) => setSearchParam(prev, 'scrollOffset', offset), { - replace: true, - }); + setOffset(location.key, offset); }, - [enabled, setSearchParams], + [enabled, location.key, setOffset], ); return { handleOnScrollEnd, scrollOffset }; diff --git a/src/renderer/store/index.ts b/src/renderer/store/index.ts index 71c9d88c7..18fa2f4d3 100644 --- a/src/renderer/store/index.ts +++ b/src/renderer/store/index.ts @@ -2,5 +2,6 @@ export * from './app.store'; export * from './auth.store'; export * from './full-screen-player.store'; export * from './player.store'; +export * from './scroll.store'; export * from './settings.store'; export * from './timestamp.store'; diff --git a/src/renderer/store/scroll.store.ts b/src/renderer/store/scroll.store.ts new file mode 100644 index 000000000..ac4bbbcf5 --- /dev/null +++ b/src/renderer/store/scroll.store.ts @@ -0,0 +1,16 @@ +import { create } from 'zustand'; + +type ScrollState = { + getOffset: (key: string) => number | undefined; + offsets: Record; + setOffset: (key: string, offset: number) => void; +}; + +export const useScrollStore = create((set, get) => ({ + getOffset: (key) => get().offsets[key], + offsets: {}, + setOffset: (key, offset) => + set((s) => ({ + offsets: { ...s.offsets, [key]: offset }, + })), +}));