From 563db1138e3c5ab197382ccaef49e8a974825a65 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Thu, 9 Mar 2023 18:09:59 -0800 Subject: [PATCH] Fix list store for artist detail --- .../albums/components/album-list-content.tsx | 38 ++----- .../components/album-list-header-filters.tsx | 2 +- .../albums/components/album-list-header.tsx | 4 +- .../components/navidrome-album-filters.tsx | 3 - .../album-artist-detail-content.tsx | 2 - .../components/navidrome-song-filters.tsx | 1 - .../songs/components/song-list-content.tsx | 3 +- .../components/song-list-header-filters.tsx | 2 +- .../songs/components/song-list-header.tsx | 4 +- src/renderer/store/list.store.ts | 106 +++++++++++++----- 10 files changed, 98 insertions(+), 67 deletions(-) diff --git a/src/renderer/features/albums/components/album-list-content.tsx b/src/renderer/features/albums/components/album-list-content.tsx index 96ba4858..539ce262 100644 --- a/src/renderer/features/albums/components/album-list-content.tsx +++ b/src/renderer/features/albums/components/album-list-content.tsx @@ -10,7 +10,7 @@ import { import { AppRoute } from '/@/renderer/router/routes'; import { ListDisplayType, CardRow } from '/@/renderer/types'; import AutoSizer from 'react-virtualized-auto-sizer'; -import { MutableRefObject, useCallback, useMemo, useState } from 'react'; +import { MutableRefObject, useCallback, useMemo } from 'react'; import { ListOnScrollProps } from 'react-window'; import { api } from '/@/renderer/api'; import { controller } from '/@/renderer/api/controller'; @@ -21,7 +21,6 @@ import { useCurrentServer, useAlbumListStore, useAlbumListItemData, - AlbumListFilter, useListStoreActions, useAlbumListFilter, } from '/@/renderer/store'; @@ -44,30 +43,23 @@ import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/share import { useAlbumListContext } from '/@/renderer/features/albums/context/album-list-context'; interface AlbumListContentProps { - customFilters?: Partial; gridRef: MutableRefObject; itemCount?: number; tableRef: MutableRefObject; } -export const AlbumListContent = ({ - customFilters, - itemCount, - gridRef, - tableRef, -}: AlbumListContentProps) => { +export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListContentProps) => { const queryClient = useQueryClient(); const navigate = useNavigate(); const server = useCurrentServer(); const handlePlayQueueAdd = usePlayQueueAdd(); const { itemData, setItemData } = useAlbumListItemData(); - const [localItemData, setLocalItemData] = useState([]); const { id, pageKey } = useAlbumListContext(); const filter = useAlbumListFilter({ id, key: pageKey }); const { setTable, setTablePagination, setGrid } = useListStoreActions(); - const { table, grid, display } = useAlbumListStore(); + const { table, grid, display } = useAlbumListStore({ id, key: pageKey }); const isPaginationEnabled = display === ListDisplayType.TABLE_PAGINATED; const columnDefs: ColDef[] = useMemo(() => getColumnDefs(table.columns), [table.columns]); @@ -83,14 +75,11 @@ export const AlbumListContent = ({ limit, startIndex, ...filter, - ...customFilters, jfParams: { ...filter.jfParams, - ...customFilters?.jfParams, }, ndParams: { ...filter.ndParams, - ...customFilters?.ndParams, }, }; @@ -113,12 +102,8 @@ export const AlbumListContent = ({ rowCount: undefined, }; params.api.setDatasource(dataSource); - - if (!customFilters) { - params.api.ensureIndexVisible(table.scrollOffset || 0, 'top'); - } }, - [customFilters, filter, table.scrollOffset, queryClient, server], + [filter, queryClient, server], ); const onTablePaginationChanged = useCallback( @@ -178,7 +163,6 @@ export const AlbumListContent = ({ const debouncedTableColumnChange = debounce(handleTableColumnChange, 200); const handleTableScroll = (e: BodyScrollEvent) => { - if (customFilters) return; const scrollOffset = Number((e.top / table.rowHeight).toFixed(0)); setTable({ data: { scrollOffset }, key: pageKey }); }; @@ -189,14 +173,11 @@ export const AlbumListContent = ({ limit: take, startIndex: skip, ...filter, - ...customFilters, jfParams: { ...filter.jfParams, - ...customFilters?.jfParams, }, ndParams: { ...filter.ndParams, - ...customFilters?.ndParams, }, }; @@ -212,15 +193,14 @@ export const AlbumListContent = ({ return api.normalize.albumList(albums, server); }, - [customFilters, filter, queryClient, server], + [filter, queryClient, server], ); const handleGridScroll = useCallback( (e: ListOnScrollProps) => { - if (customFilters) return; setGrid({ data: { scrollOffset: e.scrollOffset }, key: pageKey }); }, - [customFilters, pageKey, setGrid], + [pageKey, setGrid], ); const cardRows = useMemo(() => { @@ -334,9 +314,9 @@ export const AlbumListContent = ({ handleFavorite={handleFavorite} handlePlayQueueAdd={handlePlayQueueAdd} height={height} - initialScrollOffset={customFilters ? 0 : grid?.scrollOffset || 0} + initialScrollOffset={grid?.scrollOffset || 0} itemCount={itemCount || 0} - itemData={customFilters ? localItemData : itemData} + itemData={itemData} itemGap={20} itemSize={150 + (grid?.size || 0)} itemType={LibraryItem.ALBUM} @@ -346,7 +326,7 @@ export const AlbumListContent = ({ route: AppRoute.LIBRARY_ALBUMS_DETAIL, slugs: [{ idProperty: 'id', slugProperty: 'albumId' }], }} - setItemData={customFilters ? setLocalItemData : setItemData} + setItemData={setItemData} width={width} onScroll={handleGridScroll} /> diff --git a/src/renderer/features/albums/components/album-list-header-filters.tsx b/src/renderer/features/albums/components/album-list-header-filters.tsx index be80a19a..64ea672d 100644 --- a/src/renderer/features/albums/components/album-list-header-filters.tsx +++ b/src/renderer/features/albums/components/album-list-header-filters.tsx @@ -97,7 +97,7 @@ export const AlbumListHeaderFilters = ({ const server = useCurrentServer(); const { setFilter, setTablePagination, setTable, setGrid, setDisplayType, setTableColumns } = useListStoreActions(); - const { display, filter, table, grid } = useAlbumListStore(); + const { display, filter, table, grid } = useAlbumListStore({ id, key: pageKey }); const cq = useContainerQuery(); const musicFoldersQuery = useMusicFolders(); diff --git a/src/renderer/features/albums/components/album-list-header.tsx b/src/renderer/features/albums/components/album-list-header.tsx index 821dbbef..ff2ff488 100644 --- a/src/renderer/features/albums/components/album-list-header.tsx +++ b/src/renderer/features/albums/components/album-list-header.tsx @@ -28,6 +28,7 @@ import { ListDisplayType, Play } from '/@/renderer/types'; import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters'; import { usePlayQueueAdd } from '/@/renderer/features/player'; import { usePlayButtonBehavior } from '/@/renderer/store/settings.store'; +import { useAlbumListContext } from '/@/renderer/features/albums/context/album-list-context'; interface AlbumListHeaderProps { customFilters?: Partial; @@ -48,7 +49,8 @@ export const AlbumListHeader = ({ const server = useCurrentServer(); const { setFilter, setTablePagination } = useListStoreActions(); const cq = useContainerQuery(); - const { filter, display } = useAlbumListStore(); + const { id, pageKey } = useAlbumListContext(); + const { filter, display } = useAlbumListStore({ id, key: pageKey }); const fetch = useCallback( async (skip: number, take: number, filters: AlbumListFilter) => { diff --git a/src/renderer/features/albums/components/navidrome-album-filters.tsx b/src/renderer/features/albums/components/navidrome-album-filters.tsx index c9e4308b..70a69d00 100644 --- a/src/renderer/features/albums/components/navidrome-album-filters.tsx +++ b/src/renderer/features/albums/components/navidrome-album-filters.tsx @@ -23,8 +23,6 @@ export const NavidromeAlbumFilters = ({ const filter = useAlbumListFilter({ id, key: pageKey }); const { setFilter } = useListStoreActions(); - console.log('pageKey, id', pageKey, id); - const genreListQuery = useGenreList(null); const genreList = useMemo(() => { @@ -74,7 +72,6 @@ export const NavidromeAlbumFilters = ({ }, key: pageKey, }) as AlbumListFilter; - console.log('updatedFilters :>> ', updatedFilters); handleFilterChange(updatedFilters); }, value: filter.ndParams?.starred, diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx index ad0c4222..e3155392 100644 --- a/src/renderer/features/artists/components/album-artist-detail-content.tsx +++ b/src/renderer/features/artists/components/album-artist-detail-content.tsx @@ -270,8 +270,6 @@ export const AlbumArtistDetailContent = () => { ARTIST_CONTEXT_MENU_ITEMS, ); - console.log('topSongsQuery?.data :>> ', topSongsQuery?.data); - const topSongs = topSongsQuery?.data?.items?.slice(0, 10); const showBiography = diff --git a/src/renderer/features/songs/components/navidrome-song-filters.tsx b/src/renderer/features/songs/components/navidrome-song-filters.tsx index cf3d37ec..381c21c7 100644 --- a/src/renderer/features/songs/components/navidrome-song-filters.tsx +++ b/src/renderer/features/songs/components/navidrome-song-filters.tsx @@ -53,7 +53,6 @@ export const NavidromeSongFilters = ({ key: pageKey, }) as SongListFilter; - console.log('updatedFilters :>> ', updatedFilters); handleFilterChange(updatedFilters); }, value: filter.ndParams?.starred, diff --git a/src/renderer/features/songs/components/song-list-content.tsx b/src/renderer/features/songs/components/song-list-content.tsx index 96f90f03..8c266821 100644 --- a/src/renderer/features/songs/components/song-list-content.tsx +++ b/src/renderer/features/songs/components/song-list-content.tsx @@ -43,9 +43,9 @@ export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) = const queryClient = useQueryClient(); const server = useCurrentServer(); - const { display, table } = useSongListStore(); const { id, pageKey } = useSongListContext(); const filter = useSongListFilter({ id, key: pageKey }); + const { display, table } = useSongListStore({ id, key: pageKey }); const { setTable, setTablePagination } = useListStoreActions(); const handlePlayQueueAdd = usePlayQueueAdd(); @@ -155,7 +155,6 @@ export const SongListContent = ({ itemCount, tableRef }: SongListContentProps) = const debouncedColumnChange = debounce(handleColumnChange, 200); const handleScroll = (e: BodyScrollEvent) => { - if (id) return; const scrollOffset = Number((e.top / table.rowHeight).toFixed(0)); setTable({ data: { scrollOffset }, key: pageKey }); }; diff --git a/src/renderer/features/songs/components/song-list-header-filters.tsx b/src/renderer/features/songs/components/song-list-header-filters.tsx index 022dd725..4e986dff 100644 --- a/src/renderer/features/songs/components/song-list-header-filters.tsx +++ b/src/renderer/features/songs/components/song-list-header-filters.tsx @@ -93,7 +93,7 @@ export const SongListHeaderFilters = ({ }: SongListHeaderFiltersProps) => { const server = useCurrentServer(); const { id, pageKey } = useSongListContext(); - const { display, table } = useSongListStore(); + const { display, table } = useSongListStore({ id, key: pageKey }); const { setFilter, setTable, setTablePagination, setDisplayType } = useListStoreActions(); const filter = useSongListFilter({ id, key: pageKey }); diff --git a/src/renderer/features/songs/components/song-list-header.tsx b/src/renderer/features/songs/components/song-list-header.tsx index ada291e0..f1602288 100644 --- a/src/renderer/features/songs/components/song-list-header.tsx +++ b/src/renderer/features/songs/components/song-list-header.tsx @@ -36,8 +36,8 @@ export const SongListHeader = ({ tableRef, }: SongListHeaderProps) => { const server = useCurrentServer(); - const { pageKey } = useSongListContext(); - const { filter } = useSongListStore(); + const { id, pageKey } = useSongListContext(); + const { filter } = useSongListStore({ id, key: pageKey }); const { setFilter, setTablePagination } = useListStoreActions(); const handlePlayQueueAdd = usePlayQueueAdd(); const cq = useContainerQuery(); diff --git a/src/renderer/store/list.store.ts b/src/renderer/store/list.store.ts index 71d7d196..4924412c 100644 --- a/src/renderer/store/list.store.ts +++ b/src/renderer/store/list.store.ts @@ -47,7 +47,7 @@ type ItemProps = { export interface ListState { detail: { - [key: string]: Omit, 'display' | 'grid'>; + [key: string]: Omit, 'display'>; }; item: { album: ItemProps; @@ -125,7 +125,6 @@ export const useListStore = create()( }, setFilter: (args) => { const [, id] = args.key.split('_'); - console.log('args', args); set((state) => { if (id) { @@ -158,10 +157,37 @@ export const useListStore = create()( return get()._actions.getFilter({ id, key: args.key }); }, setGrid: (args) => { + const [page, id] = args.key.split('_'); + set((state) => { - if (state.item[args.key as keyof ListState['item']].grid) { - state.item[args.key as keyof ListState['item']].grid = { - ...state.item[args.key as keyof ListState['item']]?.grid, + if (id) { + if (!state.detail[args.key]) { + state.detail[args.key] = { + filter: {} as FilterType, + grid: { + scrollOffset: 0, + size: state.item[page as keyof ListState['item']].grid?.size || 200, + }, + table: { + pagination: { + currentPage: 1, + itemsPerPage: 100, + totalItems: 0, + totalPages: 0, + }, + } as ListTableProps, + }; + } + + if (state.detail[args.key as keyof ListState['item']].grid) { + state.detail[args.key as keyof ListState['item']].grid = { + ...state.detail[args.key as keyof ListState['item']]?.grid, + ...args.data, + }; + } + } else if (state.item[page as keyof ListState['item']].grid) { + state.item[page as keyof ListState['item']].grid = { + ...state.item[page as keyof ListState['item']]?.grid, ...args.data, }; } @@ -177,7 +203,11 @@ export const useListStore = create()( if (id) { if (!state.detail[args.key]) { state.detail[args.key] = { - filter: {} as FilterType, + filter: { + ...state.item[page as keyof ListState['item']].filter, + jfParams: {}, + ndParams: {}, + } as FilterType, table: { pagination: { currentPage: 1, @@ -185,27 +215,15 @@ export const useListStore = create()( totalItems: 0, totalPages: 0, }, + scrollOffset: 0, } as ListTableProps, }; } - if (!state.detail[args.key]?.table) { - state.detail[args.key].table = { - ...state.item[page as keyof ListState['item']].table, - pagination: { - currentPage: 1, - itemsPerPage: 100, - totalItems: 0, - totalPages: 0, - }, - }; - } - - if (!state.detail[args.key]?.filter) { - state.detail[args.key].filter = { - ...state.item[page as keyof ListState['item']].filter, - jfParams: {}, - ndParams: {}, + if (state.detail[args.key as keyof ListState['item']].table) { + state.detail[args.key as keyof ListState['item']].table = { + ...state.detail[args.key as keyof ListState['item']]?.table, + ...args.data, }; } } else { @@ -459,12 +477,50 @@ export const useListStore = create()( export const useListStoreActions = () => useListStore((state) => state._actions); -export const useAlbumListStore = () => useListStore((state) => state.item.album, shallow); +export const useAlbumListStore = (args?: { id?: string; key?: string }) => + useListStore((state) => { + const detail = args?.key ? state.detail[args.key] : undefined; + + return { + ...state.item.album, + filter: { + ...state.item.album.filter, + ...detail?.filter, + }, + grid: { + ...state.item.album.grid, + ...detail?.grid, + }, + table: { + ...state.item.album.table, + ...detail?.table, + }, + }; + }, shallow); export const useAlbumArtistListStore = () => useListStore((state) => state.item.albumArtist, shallow); -export const useSongListStore = () => useListStore((state) => state.item.song, shallow); +export const useSongListStore = (args?: { id?: string; key?: string }) => + useListStore((state) => { + const detail = args?.key ? state.detail[args.key] : undefined; + + return { + ...state.item.song, + filter: { + ...state.item.song.filter, + ...detail?.filter, + }, + grid: { + ...state.item.song.grid, + ...detail?.grid, + }, + table: { + ...state.item.song.table, + ...detail?.table, + }, + }; + }, shallow); export const useSongListFilter = (args: { id?: string; key?: string }) => useListStore((state) => {