Fix refetch on filter change

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

@@ -2,11 +2,12 @@ import {
   ALBUM_CARD_ROWS,
   VirtualGridAutoSizerContainer,
   VirtualInfiniteGrid,
+  VirtualInfiniteGridRef,
 } from '/@/renderer/components';
 import { AppRoute } from '/@/renderer/router/routes';
 import { CardDisplayType, CardRow, LibraryItem } from '/@/renderer/types';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { useCallback, useMemo } from 'react';
+import { MutableRefObject, useCallback, useMemo } from 'react';
 import { ListOnScrollProps } from 'react-window';
 import { api } from '/@/renderer/api';
 import { controller } from '/@/renderer/api/controller';
@@ -17,7 +18,11 @@ import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-han
 import { useQueryClient } from '@tanstack/react-query';
 import { useCurrentServer, useSetAlbumStore, useAlbumListStore } from '/@/renderer/store';
 
-export const AlbumListContent = () => {
+interface AlbumListContentProps {
+  gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+}
+
+export const AlbumListContent = ({ gridRef }: AlbumListContentProps) => {
   const queryClient = useQueryClient();
   const server = useCurrentServer();
   const page = useAlbumListStore();
@@ -135,6 +140,7 @@ export const AlbumListContent = () => {
       <AutoSizer>
         {({ height, width }) => (
           <VirtualInfiniteGrid
+            ref={gridRef}
             cardRows={cardRows}
             display={page.display || CardDisplayType.CARD}
             fetchFn={fetch}
@@ -146,7 +152,6 @@ export const AlbumListContent = () => {
             itemSize={150 + page.grid?.size}
             itemType={LibraryItem.ALBUM}
             minimumBatchSize={40}
-            refresh={page.filter}
             route={{
               route: AppRoute.LIBRARY_ALBUMS_DETAIL,
               slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],

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

@@ -1,6 +1,7 @@
-import type { MouseEvent, ChangeEvent } from 'react';
+import type { MouseEvent, ChangeEvent, MutableRefObject } from 'react';
 import { useCallback } from 'react';
 import { Flex, Slider } from '@mantine/core';
+import { useQueryClient } from '@tanstack/react-query';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import {
@@ -18,18 +19,23 @@ import {
   Popover,
   SearchInput,
   TextTitle,
+  VirtualInfiniteGridRef,
 } from '/@/renderer/components';
 import {
   useCurrentServer,
   useAlbumListStore,
   useSetAlbumFilters,
   useSetAlbumStore,
+  AlbumListFilter,
 } from '/@/renderer/store';
 import { CardDisplayType } from '/@/renderer/types';
 import { useMusicFolders } from '/@/renderer/features/shared';
 import styled from 'styled-components';
 import { NavidromeAlbumFilters } from '/@/renderer/features/albums/components/navidrome-album-filters';
 import { JellyfinAlbumFilters } from '/@/renderer/features/albums/components/jellyfin-album-filters';
+import { api } from '/@/renderer/api';
+import { controller } from '/@/renderer/api/controller';
+import { queryKeys } from '/@/renderer/api/query-keys';
 
 const FILTERS = {
   jellyfin: [
@@ -72,7 +78,12 @@ const HeaderItems = styled.div`
   justify-content: space-between;
 `;
 
-export const AlbumListHeader = () => {
+interface AlbumListHeaderProps {
+  gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+}
+
+export const AlbumListHeader = ({ gridRef }: AlbumListHeaderProps) => {
+  const queryClient = useQueryClient();
   const server = useCurrentServer();
   const setPage = useSetAlbumStore();
   const setFilter = useSetAlbumFilters();
@@ -94,6 +105,47 @@ export const AlbumListHeader = () => {
     200,
   );
 
+  const fetch = useCallback(
+    async (skip: number, take: number, filters: AlbumListFilter) => {
+      const queryKey = queryKeys.albums.list(server?.id || '', {
+        limit: take,
+        startIndex: skip,
+        ...filters,
+      });
+
+      const albums = await queryClient.fetchQuery(queryKey, async ({ signal }) =>
+        controller.getAlbumList({
+          query: {
+            limit: take,
+            startIndex: skip,
+            ...filters,
+          },
+          server,
+          signal,
+        }),
+      );
+
+      return api.normalize.albumList(albums, server);
+    },
+    [queryClient, server],
+  );
+
+  const handleFilterChange = useCallback(
+    async (filters: any) => {
+      gridRef.current?.scrollTo(0);
+      gridRef.current?.resetLoadMoreItemsCache();
+
+      // Refetching within the virtualized grid may be inconsistent due to it refetching
+      // using an outdated set of filters. To avoid this, we fetch using the updated filters
+      // and then set the grid's data here.
+      const data = await fetch(0, 200, filters);
+
+      if (!data?.items) return;
+      gridRef.current?.setItemData(data.items);
+    },
+    [gridRef, fetch],
+  );
+
   const handleSetSortBy = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       if (!e.currentTarget?.value || !server?.type) return;
@@ -102,32 +154,32 @@ export const AlbumListHeader = () => {
         (f) => f.value === e.currentTarget.value,
       )?.defaultOrder;
 
-      setFilter({
+      const updatedFilters = setFilter({
         sortBy: e.currentTarget.value as AlbumListSort,
         sortOrder: sortOrder || SortOrder.ASC,
       });
+
+      handleFilterChange(updatedFilters);
     },
-    [server?.type, setFilter],
+    [handleFilterChange, server?.type, setFilter],
   );
 
   const handleSetMusicFolder = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       if (!e.currentTarget?.value) return;
-      setFilter({
+      const updatedFilters = setFilter({ musicFolderId: e.currentTarget.value });
-        musicFolderId: e.currentTarget.value,
+      handleFilterChange(updatedFilters);
-      });
     },
-    [setFilter],
+    [handleFilterChange, setFilter],
   );
 
   const handleSetOrder = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       if (!e.currentTarget?.value) return;
-      setFilter({
+      const updatedFilters = setFilter({ sortOrder: e.currentTarget.value as SortOrder });
-        sortOrder: e.currentTarget.value as SortOrder,
+      handleFilterChange(updatedFilters);
-      });
     },
-    [setFilter],
+    [handleFilterChange, setFilter],
   );
 
   const handleSetViewType = useCallback(
@@ -135,26 +187,11 @@ export const AlbumListHeader = () => {
       if (!e.currentTarget?.value) return;
       const type = e.currentTarget.value;
       if (type === CardDisplayType.CARD) {
-        setPage({
+        setPage({ list: { ...page, display: CardDisplayType.CARD } });
-          list: {
-            ...page,
-            display: CardDisplayType.CARD,
-          },
-        });
       } else if (type === CardDisplayType.POSTER) {
-        setPage({
+        setPage({ list: { ...page, display: CardDisplayType.POSTER } });
-          list: {
-            ...page,
-            display: CardDisplayType.POSTER,
-          },
-        });
       } else {
-        setPage({
+        setPage({ list: { ...page, display: CardDisplayType.TABLE } });
-          list: {
-            ...page,
-            display: CardDisplayType.TABLE,
-          },
-        });
       }
     },
     [page, setPage],

src/renderer/features/albums/routes/album-list-route.tsx

@@ -1,14 +1,17 @@
-import { VirtualGridContainer } from '/@/renderer/components';
+import { VirtualGridContainer, VirtualInfiniteGridRef } from '/@/renderer/components';
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header';
 import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
+import { useRef } from 'react';
 
 const AlbumListRoute = () => {
+  const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
+
   return (
     <AnimatedPage>
       <VirtualGridContainer>
-        <AlbumListHeader />
+        <AlbumListHeader gridRef={gridRef} />
-        <AlbumListContent />
+        <AlbumListContent gridRef={gridRef} />
       </VirtualGridContainer>
     </AnimatedPage>
   );