Use search params for artist-specific lists

This commit is contained in:
jeffvli 2023-07-22 05:05:33 -07:00
parent 8a367b00a3
commit 3aec139f58
4 changed files with 89 additions and 30 deletions

View file

@ -1,5 +1,6 @@
import { QueryKey, useQueryClient } from '@tanstack/react-query';
import { useCallback, useMemo } from 'react';
import { useSearchParams } from 'react-router-dom';
import AutoSizer from 'react-virtualized-auto-sizer';
import { ListOnScrollProps } from 'react-window';
import { controller } from '/@/renderer/api/controller';
@ -27,10 +28,14 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
const queryClient = useQueryClient();
const server = useCurrentServer();
const handlePlayQueueAdd = usePlayQueueAdd();
const { pageKey, customFilters } = useListContext();
const { pageKey, customFilters, id } = useListContext();
const { grid, display, filter } = useListStoreByKey({ key: pageKey });
const { setGrid } = useListStoreActions();
const [searchParams, setSearchParams] = useSearchParams();
const scrollOffset = searchParams.get('scrollOffset');
const initialScrollOffset = Number(id ? scrollOffset : grid?.scrollOffset) || 0;
const createFavoriteMutation = useCreateFavorite({});
const deleteFavoriteMutation = useDeleteFavorite({});
@ -124,9 +129,13 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
const handleGridScroll = useCallback(
(e: ListOnScrollProps) => {
setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey });
if (id) {
setSearchParams({ scrollOffset: String(e.scrollOffset) });
} else {
setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey });
}
},
[pageKey, setGrid],
[id, pageKey, setGrid, setSearchParams],
);
const fetchInitialData = useCallback(() => {
@ -207,7 +216,7 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
handleFavorite={handleFavorite}
handlePlayQueueAdd={handlePlayQueueAdd}
height={height}
initialScrollOffset={grid?.scrollOffset || 0}
initialScrollOffset={initialScrollOffset}
itemCount={itemCount || 0}
itemGap={20}
itemSize={grid?.itemsPerRow || 5}

View file

@ -8,11 +8,12 @@ import { useCurrentServer } from '/@/renderer/store';
export const AlbumListTableView = ({ tableRef, itemCount }: any) => {
const server = useCurrentServer();
const { pageKey, customFilters } = useListContext();
const { pageKey, customFilters, id } = useListContext();
const tableProps = useVirtualTable({
contextMenu: ALBUM_CONTEXT_MENU_ITEMS,
customFilters,
isSearchParams: Boolean(id),
itemCount,
itemType: LibraryItem.ALBUM,
pageKey,