refactor item list to use accessor function

This commit is contained in:
jeffvli
2026-01-16 16:34:31 -08:00
parent e2b20eb89b
commit d1aed5007f
39 changed files with 528 additions and 324 deletions
@@ -36,15 +36,16 @@ export const AlbumListInfiniteGrid = ({
const listQueryFn = api.controller.getAlbumList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { dataVersion, getItem, getItemIndex, itemCount, loadedItems, onRangeChanged } =
useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
@@ -54,13 +55,17 @@ export const AlbumListInfiniteGrid = ({
return (
<ItemGridList
data={data}
data={loadedItems}
dataVersion={dataVersion}
enableExpansion
gap={gap}
getItem={getItem}
getItemIndex={getItemIndex}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemCount={itemCount}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ALBUM}
onRangeChanged={onRangeChanged}
@@ -43,15 +43,16 @@ export const AlbumListInfiniteTable = ({
const listQueryFn = api.controller.getAlbumList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { getItem, getItemIndex, itemCount, loadedItems, onRangeChanged } =
useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM,
itemsPerPage,
itemType: LibraryItem.ALBUM,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
@@ -70,16 +71,19 @@ export const AlbumListInfiniteTable = ({
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
data={loadedItems}
enableAlternateRowColors={enableAlternateRowColors}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
getItem={getItem}
getItemIndex={getItemIndex}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemCount={itemCount}
itemType={LibraryItem.ALBUM}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
@@ -37,15 +37,16 @@ export const AlbumArtistListInfiniteGrid = ({
const listQueryFn = api.controller.getAlbumArtistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM_ARTIST,
itemsPerPage,
itemType: LibraryItem.ALBUM_ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { dataVersion, getItem, getItemIndex, itemCount, loadedItems, onRangeChanged } =
useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM_ARTIST,
itemsPerPage,
itemType: LibraryItem.ALBUM_ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
@@ -55,12 +56,16 @@ export const AlbumArtistListInfiniteGrid = ({
return (
<ItemGridList
data={data}
data={loadedItems}
dataVersion={dataVersion}
gap={gap}
getItem={getItem}
getItemIndex={getItemIndex}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemCount={itemCount}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ALBUM_ARTIST}
onRangeChanged={onRangeChanged}
@@ -44,15 +44,16 @@ export const AlbumArtistListInfiniteTable = ({
const listQueryFn = api.controller.getAlbumArtistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM_ARTIST,
itemsPerPage,
itemType: LibraryItem.ALBUM_ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { getItem, getItemIndex, itemCount, loadedItems, onRangeChanged } =
useItemListInfiniteLoader({
eventKey: ItemListKey.ALBUM_ARTIST,
itemsPerPage,
itemType: LibraryItem.ALBUM_ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
@@ -71,17 +72,20 @@ export const AlbumArtistListInfiniteTable = ({
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
data={loadedItems}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
getItem={getItem}
getItemIndex={getItemIndex}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemCount={itemCount}
itemType={LibraryItem.ALBUM_ARTIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
@@ -36,15 +36,16 @@ export const ArtistListInfiniteGrid = ({
const listQueryFn = api.controller.getArtistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ARTIST,
itemsPerPage,
itemType: LibraryItem.ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { dataVersion, getItem, getItemIndex, itemCount, loadedItems, onRangeChanged } =
useItemListInfiniteLoader({
eventKey: ItemListKey.ARTIST,
itemsPerPage,
itemType: LibraryItem.ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
@@ -54,12 +55,16 @@ export const ArtistListInfiniteGrid = ({
return (
<ItemGridList
data={data}
data={loadedItems}
dataVersion={dataVersion}
gap={gap}
getItem={getItem}
getItemIndex={getItemIndex}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemCount={itemCount}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.ARTIST}
onRangeChanged={onRangeChanged}
@@ -43,15 +43,16 @@ export const ArtistListInfiniteTable = ({
const listQueryFn = api.controller.getArtistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.ARTIST,
itemsPerPage,
itemType: LibraryItem.ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { getItem, getItemIndex, itemCount, loadedItems, onRangeChanged } =
useItemListInfiniteLoader({
eventKey: ItemListKey.ARTIST,
itemsPerPage,
itemType: LibraryItem.ARTIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
@@ -70,17 +71,20 @@ export const ArtistListInfiniteTable = ({
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
data={loadedItems}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
getItem={getItem}
getItemIndex={getItemIndex}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemCount={itemCount}
itemType={LibraryItem.ARTIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
@@ -36,15 +36,16 @@ export const GenreListInfiniteGrid = ({
const listQueryFn = api.controller.getGenreList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.GENRE,
itemsPerPage,
itemType: LibraryItem.GENRE,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { dataVersion, getItem, getItemIndex, itemCount, loadedItems, onRangeChanged } =
useItemListInfiniteLoader({
eventKey: ItemListKey.GENRE,
itemsPerPage,
itemType: LibraryItem.GENRE,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
@@ -54,12 +55,16 @@ export const GenreListInfiniteGrid = ({
return (
<ItemGridList
data={data}
data={loadedItems}
dataVersion={dataVersion}
gap={gap}
getItem={getItem}
getItemIndex={getItemIndex}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemCount={itemCount}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.GENRE}
onRangeChanged={onRangeChanged}
@@ -43,15 +43,16 @@ export const GenreListInfiniteTable = ({
const listQueryFn = api.controller.getGenreList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.GENRE,
itemsPerPage,
itemType: LibraryItem.GENRE,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { getItem, getItemIndex, itemCount, loadedItems, onRangeChanged } =
useItemListInfiniteLoader({
eventKey: ItemListKey.GENRE,
itemsPerPage,
itemType: LibraryItem.GENRE,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
@@ -70,17 +71,20 @@ export const GenreListInfiniteTable = ({
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
data={loadedItems}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
getItem={getItem}
getItemIndex={getItemIndex}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemCount={itemCount}
itemType={LibraryItem.GENRE}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
@@ -36,15 +36,16 @@ export const PlaylistListInfiniteGrid = ({
const listQueryFn = api.controller.getPlaylistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.PLAYLIST,
itemsPerPage,
itemType: LibraryItem.PLAYLIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { dataVersion, getItem, getItemIndex, itemCount, loadedItems, onRangeChanged } =
useItemListInfiniteLoader({
eventKey: ItemListKey.PLAYLIST,
itemsPerPage,
itemType: LibraryItem.PLAYLIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
@@ -54,12 +55,16 @@ export const PlaylistListInfiniteGrid = ({
return (
<ItemGridList
data={data}
data={loadedItems}
dataVersion={dataVersion}
gap={gap}
getItem={getItem}
getItemIndex={getItemIndex}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemCount={itemCount}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.PLAYLIST}
onRangeChanged={onRangeChanged}
@@ -43,15 +43,16 @@ export const PlaylistListInfiniteTable = ({
const listQueryFn = api.controller.getPlaylistList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.PLAYLIST,
itemsPerPage,
itemType: LibraryItem.PLAYLIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { getItem, getItemIndex, itemCount, loadedItems, onRangeChanged } =
useItemListInfiniteLoader({
eventKey: ItemListKey.PLAYLIST,
itemsPerPage,
itemType: LibraryItem.PLAYLIST,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
@@ -70,16 +71,19 @@ export const PlaylistListInfiniteTable = ({
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
data={loadedItems}
enableAlternateRowColors={enableAlternateRowColors}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
getItem={getItem}
getItemIndex={getItemIndex}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemCount={itemCount}
itemType={LibraryItem.PLAYLIST}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}
@@ -31,15 +31,16 @@ export const SongListInfiniteGrid = ({
const listQueryFn = api.controller.getSongList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.SONG,
itemsPerPage,
itemType: LibraryItem.SONG,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { dataVersion, getItem, getItemIndex, itemCount, loadedItems, onRangeChanged } =
useItemListInfiniteLoader({
eventKey: ItemListKey.SONG,
itemsPerPage,
itemType: LibraryItem.SONG,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
@@ -49,12 +50,16 @@ export const SongListInfiniteGrid = ({
return (
<ItemGridList
data={data}
data={loadedItems}
dataVersion={dataVersion}
gap={gap}
getItem={getItem}
getItemIndex={getItemIndex}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemCount={itemCount}
itemsPerRow={itemsPerRow}
itemType={LibraryItem.SONG}
onRangeChanged={onRangeChanged}
@@ -39,15 +39,16 @@ export const SongListInfiniteTable = ({
const listQueryFn = api.controller.getSongList;
const { data, onRangeChanged } = useItemListInfiniteLoader({
eventKey: ItemListKey.SONG,
itemsPerPage,
itemType: LibraryItem.SONG,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { getItem, getItemIndex, itemCount, loadedItems, onRangeChanged } =
useItemListInfiniteLoader({
eventKey: ItemListKey.SONG,
itemsPerPage,
itemType: LibraryItem.SONG,
listCountQuery,
listQueryFn,
query,
serverId,
});
const { handleOnScrollEnd, scrollOffset } = useItemListScrollPersist({
enabled: saveScrollOffset,
@@ -69,17 +70,20 @@ export const SongListInfiniteTable = ({
autoFitColumns={autoFitColumns}
CellComponent={ItemTableListColumn}
columns={columns}
data={data}
data={loadedItems}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
enableVerticalBorders={enableVerticalBorders}
getItem={getItem}
getItemIndex={getItemIndex}
initialTop={{
to: scrollOffset ?? 0,
type: 'offset',
}}
itemCount={itemCount}
itemType={LibraryItem.SONG}
onColumnReordered={handleColumnReordered}
onColumnResized={handleColumnResized}