diff --git a/src/renderer/components/virtual-grid/virtual-infinite-grid.tsx b/src/renderer/components/virtual-grid/virtual-infinite-grid.tsx index dbfea86f..35a56bc2 100644 --- a/src/renderer/components/virtual-grid/virtual-infinite-grid.tsx +++ b/src/renderer/components/virtual-grid/virtual-infinite-grid.tsx @@ -1,12 +1,4 @@ -import { - useState, - useRef, - useMemo, - useCallback, - forwardRef, - Ref, - useImperativeHandle, -} from 'react'; +import { useRef, useMemo, useCallback, forwardRef, Ref, useImperativeHandle } from 'react'; import debounce from 'lodash/debounce'; import type { FixedSizeListProps } from 'react-window'; import InfiniteLoader from 'react-window-infinite-loader'; @@ -25,11 +17,13 @@ interface VirtualGridProps extends Omit Promise; handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void; + itemData: any[]; itemGap: number; itemSize: number; itemType: LibraryItem; minimumBatchSize?: number; route?: CardRoute; + setItemData: (data: any[]) => void; } const constrainWidth = (width: number) => { @@ -48,6 +42,8 @@ export const VirtualInfiniteGrid = forwardRef( itemSize, itemType, cardRows, + itemData, + setItemData, route, onScroll, display, @@ -60,7 +56,6 @@ export const VirtualInfiniteGrid = forwardRef( }: VirtualGridProps, ref: Ref, ) => { - const [itemData, setItemData] = useState([]); const listRef = useRef(null); const loader = useRef(null); @@ -111,7 +106,7 @@ export const VirtualInfiniteGrid = forwardRef( setItemData(newData); }, - [columnCount, fetchFn, itemData], + [columnCount, fetchFn, itemData, setItemData], ); const debouncedLoadMoreItems = debounce(loadMoreItems, 500); @@ -120,7 +115,7 @@ export const VirtualInfiniteGrid = forwardRef( resetLoadMoreItemsCache: () => { if (loader.current) { loader.current.resetloadMoreItemsCache(false); - setItemData(() => []); + setItemData([]); } }, scrollTo: (index: number) => { diff --git a/src/renderer/features/albums/components/album-list-content.tsx b/src/renderer/features/albums/components/album-list-content.tsx index beac7d29..2b5b9113 100644 --- a/src/renderer/features/albums/components/album-list-content.tsx +++ b/src/renderer/features/albums/components/album-list-content.tsx @@ -25,6 +25,7 @@ import { useAlbumTablePagination, useSetAlbumTable, useSetAlbumTablePagination, + useAlbumListItemData, } from '/@/renderer/store'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import { @@ -57,6 +58,8 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) = const setPage = useSetAlbumStore(); const handlePlayQueueAdd = usePlayQueueAdd(); + const { itemData, setItemData } = useAlbumListItemData(); + const pagination = useAlbumTablePagination(); const setPagination = useSetAlbumTablePagination(); const setTable = useSetAlbumTable(); @@ -319,6 +322,7 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) = height={height} initialScrollOffset={page?.grid.scrollOffset || 0} itemCount={checkAlbumList?.data?.totalRecordCount || 0} + itemData={itemData} itemGap={20} itemSize={150 + page.grid?.size} itemType={LibraryItem.ALBUM} @@ -327,6 +331,7 @@ export const AlbumListContent = ({ gridRef, tableRef }: AlbumListContentProps) = route: AppRoute.LIBRARY_ALBUMS_DETAIL, slugs: [{ idProperty: 'id', slugProperty: 'albumId' }], }} + setItemData={setItemData} width={width} onScroll={handleGridScroll} /> diff --git a/src/renderer/features/artists/components/album-artist-list-content.tsx b/src/renderer/features/artists/components/album-artist-list-content.tsx index 2b0858cd..c5e79765 100644 --- a/src/renderer/features/artists/components/album-artist-list-content.tsx +++ b/src/renderer/features/artists/components/album-artist-list-content.tsx @@ -23,6 +23,7 @@ import { useSetAlbumArtistStore, useSetAlbumArtistTable, useSetAlbumArtistTablePagination, + useAlbumArtistListItemData, } from '/@/renderer/store'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import { @@ -56,6 +57,8 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon const setPage = useSetAlbumArtistStore(); const handlePlayQueueAdd = usePlayQueueAdd(); + const { itemData, setItemData } = useAlbumArtistListItemData(); + const pagination = useAlbumArtistTablePagination(); const setPagination = useSetAlbumArtistTablePagination(); const setTable = useSetAlbumArtistTable(); @@ -120,6 +123,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon }, rowCount: undefined, }; + params.api.setDatasource(dataSource); params.api.ensureIndexVisible(page.table.scrollOffset || 0, 'top'); }, @@ -298,6 +302,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon height={height} initialScrollOffset={page?.grid.scrollOffset || 0} itemCount={checkAlbumArtistList?.data?.totalRecordCount || 0} + itemData={itemData} itemGap={20} itemSize={150 + page.grid?.size} itemType={LibraryItem.ALBUM_ARTIST} @@ -306,6 +311,7 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon route: AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }], }} + setItemData={setItemData} width={width} onScroll={handleGridScroll} /> diff --git a/src/renderer/store/album-artist-list-data.store.ts b/src/renderer/store/album-artist-list-data.store.ts new file mode 100644 index 00000000..0735fc10 --- /dev/null +++ b/src/renderer/store/album-artist-list-data.store.ts @@ -0,0 +1,37 @@ +import create from 'zustand'; +import { devtools } from 'zustand/middleware'; +import { immer } from 'zustand/middleware/immer'; + +export interface AlbumArtistListDataState { + itemData: any[]; +} + +export interface AlbumArtistListDataSlice extends AlbumArtistListDataState { + actions: { + setItemData: (data: any[]) => void; + }; +} + +export const useAlbumArtistListDataStore = create()( + devtools( + immer((set) => ({ + actions: { + setItemData: (data) => { + set((state) => { + state.itemData = data; + }); + }, + }, + itemData: [], + })), + { name: 'store_album_list_data' }, + ), +); + +export const useAlbumArtistListStoreActions = () => + useAlbumArtistListDataStore((state) => state.actions); + +export const useAlbumArtistListItemData = () => + useAlbumArtistListDataStore((state) => { + return { itemData: state.itemData, setItemData: state.actions.setItemData }; + }); diff --git a/src/renderer/store/album-list-data.store.ts b/src/renderer/store/album-list-data.store.ts new file mode 100644 index 00000000..f7b52ca6 --- /dev/null +++ b/src/renderer/store/album-list-data.store.ts @@ -0,0 +1,36 @@ +import create from 'zustand'; +import { devtools } from 'zustand/middleware'; +import { immer } from 'zustand/middleware/immer'; + +export interface AlbumListDataState { + itemData: any[]; +} + +export interface AlbumListDataSlice extends AlbumListDataState { + actions: { + setItemData: (data: any[]) => void; + }; +} + +export const useAlbumListDataStore = create()( + devtools( + immer((set) => ({ + actions: { + setItemData: (data) => { + set((state) => { + state.itemData = data; + }); + }, + }, + itemData: [], + })), + { name: 'store_album_list_data' }, + ), +); + +export const useAlbumListStoreActions = () => useAlbumListDataStore((state) => state.actions); + +export const useAlbumListItemData = () => + useAlbumListDataStore((state) => { + return { itemData: state.itemData, setItemData: state.actions.setItemData }; + }); diff --git a/src/renderer/store/index.ts b/src/renderer/store/index.ts index cdd75ea2..41f54385 100644 --- a/src/renderer/store/index.ts +++ b/src/renderer/store/index.ts @@ -5,3 +5,5 @@ export * from './album.store'; export * from './song.store'; export * from './album-artist.store'; export * from './playlist.store'; +export * from './album-list-data.store'; +export * from './album-artist-list-data.store';