From c5e8472746617abaa72fb26c92d8f7644f61e07d Mon Sep 17 00:00:00 2001 From: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Date: Thu, 9 May 2024 00:14:59 -0700 Subject: [PATCH] [bugfix]: handle song grid sparse array --- .../virtual-grid/virtual-infinite-grid.tsx | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/renderer/components/virtual-grid/virtual-infinite-grid.tsx b/src/renderer/components/virtual-grid/virtual-infinite-grid.tsx index d6b60632..b73065d3 100644 --- a/src/renderer/components/virtual-grid/virtual-infinite-grid.tsx +++ b/src/renderer/components/virtual-grid/virtual-infinite-grid.tsx @@ -13,13 +13,15 @@ import InfiniteLoader from 'react-window-infinite-loader'; import { VirtualGridWrapper } from '/@/renderer/components/virtual-grid/virtual-grid-wrapper'; import type { CardRoute, CardRow, PlayQueueAddOptions } from '/@/renderer/types'; import { ListDisplayType } from '/@/renderer/types'; -import { LibraryItem } from '/@/renderer/api/types'; +import { AnyLibraryItem, Genre, LibraryItem } from '/@/renderer/api/types'; + +type LibraryItemOrGenre = AnyLibraryItem | Genre; export type VirtualInfiniteGridRef = { resetLoadMoreItemsCache: () => void; scrollTo: (index: number) => void; - setItemData: (data: any[]) => void; - updateItemData: (rule: (item: any) => any) => void; + setItemData: (data: LibraryItemOrGenre[]) => void; + updateItemData: (rule: (item: LibraryItemOrGenre) => LibraryItemOrGenre) => void; }; interface VirtualGridProps @@ -27,7 +29,7 @@ interface VirtualGridProps cardRows: CardRow[]; display?: ListDisplayType; fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise; - fetchInitialData?: () => any; + fetchInitialData?: () => LibraryItemOrGenre[]; handleFavorite?: (options: { id: string[]; isFavorite: boolean; @@ -70,7 +72,10 @@ export const VirtualInfiniteGrid = forwardRef( const listRef = useRef(null); const loader = useRef(null); - const [itemData, setItemData] = useState(fetchInitialData?.() || []); + // itemData can be a sparse array. Treat the intermediate elements as being undefined + const [itemData, setItemData] = useState>( + fetchInitialData?.() || [], + ); const { itemHeight, rowCount, columnCount } = useMemo(() => { const itemsPerRow = width ? Math.floor(width / (itemSize + itemGap * 2)) : 5; @@ -109,7 +114,7 @@ export const VirtualInfiniteGrid = forwardRef( }); setItemData((itemData) => { - const newData: any[] = [...itemData]; + const newData = [...itemData]; let itemIndex = 0; for (let rowIndex = start; rowIndex < itemCount; rowIndex += 1) { @@ -135,11 +140,11 @@ export const VirtualInfiniteGrid = forwardRef( scrollTo: (index: number) => { listRef?.current?.scrollToItem(index); }, - setItemData: (data: any[]) => { + setItemData: (data: LibraryItemOrGenre[]) => { setItemData(data); }, updateItemData: (rule) => { - setItemData((data) => data.map(rule)); + setItemData((data) => data.map((item) => item && rule(item))); }, }));