[bugfix]: handle song grid sparse array

This commit is contained in:
Kendall Garner 2024-05-09 00:14:59 -07:00
parent a9e0689619
commit c5e8472746
No known key found for this signature in database
GPG key ID: 18D2767419676C87

View file

@ -13,13 +13,15 @@ import InfiniteLoader from 'react-window-infinite-loader';
import { VirtualGridWrapper } from '/@/renderer/components/virtual-grid/virtual-grid-wrapper'; import { VirtualGridWrapper } from '/@/renderer/components/virtual-grid/virtual-grid-wrapper';
import type { CardRoute, CardRow, PlayQueueAddOptions } from '/@/renderer/types'; import type { CardRoute, CardRow, PlayQueueAddOptions } from '/@/renderer/types';
import { ListDisplayType } 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 = { export type VirtualInfiniteGridRef = {
resetLoadMoreItemsCache: () => void; resetLoadMoreItemsCache: () => void;
scrollTo: (index: number) => void; scrollTo: (index: number) => void;
setItemData: (data: any[]) => void; setItemData: (data: LibraryItemOrGenre[]) => void;
updateItemData: (rule: (item: any) => any) => void; updateItemData: (rule: (item: LibraryItemOrGenre) => LibraryItemOrGenre) => void;
}; };
interface VirtualGridProps interface VirtualGridProps
@ -27,7 +29,7 @@ interface VirtualGridProps
cardRows: CardRow<any>[]; cardRows: CardRow<any>[];
display?: ListDisplayType; display?: ListDisplayType;
fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>; fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
fetchInitialData?: () => any; fetchInitialData?: () => LibraryItemOrGenre[];
handleFavorite?: (options: { handleFavorite?: (options: {
id: string[]; id: string[];
isFavorite: boolean; isFavorite: boolean;
@ -70,7 +72,10 @@ export const VirtualInfiniteGrid = forwardRef(
const listRef = useRef<any>(null); const listRef = useRef<any>(null);
const loader = useRef<InfiniteLoader>(null); const loader = useRef<InfiniteLoader>(null);
const [itemData, setItemData] = useState<any[]>(fetchInitialData?.() || []); // itemData can be a sparse array. Treat the intermediate elements as being undefined
const [itemData, setItemData] = useState<Array<LibraryItemOrGenre | undefined>>(
fetchInitialData?.() || [],
);
const { itemHeight, rowCount, columnCount } = useMemo(() => { const { itemHeight, rowCount, columnCount } = useMemo(() => {
const itemsPerRow = width ? Math.floor(width / (itemSize + itemGap * 2)) : 5; const itemsPerRow = width ? Math.floor(width / (itemSize + itemGap * 2)) : 5;
@ -109,7 +114,7 @@ export const VirtualInfiniteGrid = forwardRef(
}); });
setItemData((itemData) => { setItemData((itemData) => {
const newData: any[] = [...itemData]; const newData = [...itemData];
let itemIndex = 0; let itemIndex = 0;
for (let rowIndex = start; rowIndex < itemCount; rowIndex += 1) { for (let rowIndex = start; rowIndex < itemCount; rowIndex += 1) {
@ -135,11 +140,11 @@ export const VirtualInfiniteGrid = forwardRef(
scrollTo: (index: number) => { scrollTo: (index: number) => {
listRef?.current?.scrollToItem(index); listRef?.current?.scrollToItem(index);
}, },
setItemData: (data: any[]) => { setItemData: (data: LibraryItemOrGenre[]) => {
setItemData(data); setItemData(data);
}, },
updateItemData: (rule) => { updateItemData: (rule) => {
setItemData((data) => data.map(rule)); setItemData((data) => data.map((item) => item && rule(item)));
}, },
})); }));