Set grid view to use local state

src/renderer/components/virtual-grid/virtual-infinite-grid.tsx

@@ -1,4 +1,12 @@
-import { useRef, useMemo, useCallback, forwardRef, Ref, useImperativeHandle } from 'react';
+import {
+  useState,
+  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';
@@ -19,14 +27,12 @@ interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSi
   fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
   handleFavorite?: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
   handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
-  itemData: any[];
   itemGap: number;
   itemSize: number;
   itemType: LibraryItem;
   loading?: boolean;
   minimumBatchSize?: number;
   route?: CardRoute;
-  setItemData: (data: any[]) => void;
 }
 
 export const VirtualInfiniteGrid = forwardRef(
@@ -37,8 +43,6 @@ export const VirtualInfiniteGrid = forwardRef(
       itemSize,
       itemType,
       cardRows,
-      itemData,
-      setItemData,
       route,
       onScroll,
       display,
@@ -56,6 +60,8 @@ export const VirtualInfiniteGrid = forwardRef(
     const listRef = useRef<any>(null);
     const loader = useRef<InfiniteLoader>(null);
 
+    const [itemData, setItemData] = useState<any[]>([]);
+
     const { itemHeight, rowCount, columnCount } = useMemo(() => {
       const itemsPerRow = itemSize;
       const widthPerItem = Number(width) / itemsPerRow;

src/renderer/features/albums/components/album-list-content.tsx

@@ -20,7 +20,6 @@ import { useQueryClient } from '@tanstack/react-query';
 import {
   useCurrentServer,
   useAlbumListStore,
-  useAlbumListItemData,
   useListStoreActions,
   useAlbumListFilter,
 } from '/@/renderer/store';
@@ -53,9 +52,6 @@ export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListCont
   const navigate = useNavigate();
   const server = useCurrentServer();
   const handlePlayQueueAdd = usePlayQueueAdd();
-
-  const { itemData, setItemData } = useAlbumListItemData();
-
   const { id, pageKey } = useAlbumListContext();
   const filter = useAlbumListFilter({ id, key: pageKey });
   const { setTable, setTablePagination, setGrid } = useListStoreActions();
@@ -316,7 +312,6 @@ export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListCont
                   height={height}
                   initialScrollOffset={grid?.scrollOffset || 0}
                   itemCount={itemCount || 0}
-                  itemData={itemData}
                   itemGap={20}
                   itemSize={grid?.itemsPerRow || 5}
                   itemType={LibraryItem.ALBUM}
@@ -326,7 +321,6 @@ export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListCont
                     route: AppRoute.LIBRARY_ALBUMS_DETAIL,
                     slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
                   }}
-                  setItemData={setItemData}
                   width={width}
                   onScroll={handleGridScroll}
                 />

src/renderer/features/artists/components/album-artist-list-content.tsx

@@ -16,11 +16,7 @@ import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { AlbumArtist, AlbumArtistListSort, LibraryItem } from '/@/renderer/api/types';
 import { useQueryClient } from '@tanstack/react-query';
-import {
+import { useCurrentServer, useAlbumArtistListStore } from '/@/renderer/store';
-  useCurrentServer,
-  useAlbumArtistListStore,
-  useAlbumArtistListItemData,
-} from '/@/renderer/store';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import {
   BodyScrollEvent,
@@ -55,7 +51,6 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
   const filter = useAlbumArtistListFilter({ id, key: pageKey });
   const { table, grid, display } = useAlbumArtistListStore();
   const { setTable, setTablePagination, setGrid } = useListStoreActions();
-  const { itemData, setItemData } = useAlbumArtistListItemData();
 
   const isPaginationEnabled = display === ListDisplayType.TABLE_PAGINATED;
 
@@ -265,7 +260,6 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
           <AutoSizer>
             {({ height, width }) => (
               <VirtualInfiniteGrid
-                key={`albumartist-list-${server?.id}-${display}`}
                 ref={gridRef}
                 cardRows={cardRows}
                 display={display || ListDisplayType.CARD}
@@ -274,7 +268,6 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
                 height={height}
                 initialScrollOffset={grid?.scrollOffset || 0}
                 itemCount={checkAlbumArtistList?.data?.totalRecordCount || 0}
-                itemData={itemData}
                 itemGap={20}
                 itemSize={grid?.itemsPerRow || 5}
                 itemType={LibraryItem.ALBUM_ARTIST}
@@ -284,7 +277,6 @@ export const AlbumArtistListContent = ({ gridRef, tableRef }: AlbumArtistListCon
                   route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
                   slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
                 }}
-                setItemData={setItemData}
                 width={width}
                 onScroll={handleGridScroll}
               />