diff --git a/src/renderer/features/albums/components/album-list-paginated-grid.tsx b/src/renderer/features/albums/components/album-list-paginated-grid.tsx new file mode 100644 index 000000000..09cbbeccc --- /dev/null +++ b/src/renderer/features/albums/components/album-list-paginated-grid.tsx @@ -0,0 +1,65 @@ +import { UseSuspenseQueryOptions } from '@tanstack/react-query'; +import { forwardRef } from 'react'; + +import { api } from '/@/renderer/api'; +import { + PaginatedListProps, + useItemListPaginatedLoader, +} from '/@/renderer/components/item-list/helpers/item-list-paginated-loader'; +import { ItemGrid } from '/@/renderer/components/item-list/item-grid/item-grid'; +import { ItemListWithPagination } from '/@/renderer/components/item-list/item-list-pagination/item-list-pagination'; +import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination'; +import { albumQueries } from '/@/renderer/features/albums/api/album-api'; +import { + AlbumListQuery, + AlbumListSort, + LibraryItem, + SortOrder, +} from '/@/shared/types/domain-types'; + +interface AlbumListPaginatedGridProps extends PaginatedListProps {} + +export const AlbumListPaginatedGrid = forwardRef( + ( + { + initialPage, + itemsPerPage = 100, + query = { + sortBy: AlbumListSort.NAME, + sortOrder: SortOrder.ASC, + }, + serverId, + }, + ref, + ) => { + const listCountQuery = albumQueries.listCount({ + query: { ...query }, + serverId: serverId, + }) as UseSuspenseQueryOptions; + + const listQueryFn = api.controller.getAlbumList; + + const { currentPage, onChange } = useItemListPagination({ initialPage }); + + const { data, pageCount, totalItemCount } = useItemListPaginatedLoader({ + currentPage, + itemsPerPage, + listCountQuery, + listQueryFn, + query, + serverId, + }); + + return ( + + + + ); + }, +);