Reset Carousel position on data refresh (#303)

* Reset Carousel position on data refresh * add refresh for all carousels
jeffvli · Oct 18, 2023 · fe298d3 · fe298d3 · vercel · Oct 18, 2023
1 parent 03e582f
commit fe298d3
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 28 deletions.
diff --git a/src/renderer/components/grid-carousel/index.tsx b/src/renderer/components/grid-carousel/index.tsx
@@ -1,4 +1,13 @@
-import { isValidElement, memo, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import {
+    isValidElement,
+    memo,
+    ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import { Group, Stack } from '@mantine/core';
 import throttle from 'lodash/throttle';
 import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
@@ -109,6 +118,10 @@ export const SwiperGridCarousel = ({
     const playButtonBehavior = usePlayButtonBehavior();
     const handlePlayQueueAdd = usePlayQueueAdd();
 
+    useEffect(() => {
+        swiperRef.current?.slideTo(0, 0);
+    }, [data]);
+
     const [pagination, setPagination] = useState({
         hasNextPage: (data?.length || 0) > Math.round(3),
         hasPreviousPage: false,

diff --git a/src/renderer/features/home/routes/home-route.tsx b/src/renderer/features/home/routes/home-route.tsx
@@ -103,39 +103,18 @@ const HomeRoute = () => {
     const carousels = [
         {
             data: random?.data?.items,
-            title: (
-                <Group>
-                    <TextTitle
-                        order={2}
-                        weight={700}
-                    >
-                        Explore from your library
-                    </TextTitle>
-
-                    <ActionIcon
-                        onClick={() =>
-                            queryClient.invalidateQueries({
-                                exact: false,
-                                queryKey: queryKeys.albums.list(server?.id, {
-                                    limit: itemsPerPage,
-                                    sortBy: AlbumListSort.RANDOM,
-                                    sortOrder: SortOrder.ASC,
-                                    startIndex: 0,
-                                }),
-                            })
-                        }
-                    >
-                        <RiRefreshLine />
-                    </ActionIcon>
-                </Group>
-            ),
+            sortBy: AlbumListSort.RANDOM,
+            sortOrder: SortOrder.ASC,
+            title: 'Explore from your library',
             uniqueId: 'random',
         },
         {
             data: recentlyPlayed?.data?.items,
             pagination: {
                 itemsPerPage,
             },
+            sortBy: AlbumListSort.RECENTLY_PLAYED,
+            sortOrder: SortOrder.DESC,
             title: 'Recently played',
             uniqueId: 'recentlyPlayed',
         },
@@ -144,6 +123,8 @@ const HomeRoute = () => {
             pagination: {
                 itemsPerPage,
             },
+            sortBy: AlbumListSort.RECENTLY_ADDED,
+            sortOrder: SortOrder.DESC,
             title: 'Newly added releases',
             uniqueId: 'recentlyAdded',
         },
@@ -152,6 +133,8 @@ const HomeRoute = () => {
             pagination: {
                 itemsPerPage,
             },
+            sortBy: AlbumListSort.PLAY_COUNT,
+            sortOrder: SortOrder.DESC,
             title: 'Most played',
             uniqueId: 'mostPlayed',
         },
@@ -220,7 +203,37 @@ const HomeRoute = () => {
                                     route: AppRoute.LIBRARY_ALBUMS_DETAIL,
                                     slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
                                 }}
-                                title={{ label: carousel.title }}
+                                title={{
+                                    label: (
+                                        <Group>
+                                            <TextTitle
+                                                order={2}
+                                                weight={700}
+                                            >
+                                                {carousel.title}
+                                            </TextTitle>
+
+                                            <ActionIcon
+                                                onClick={() =>
+                                                    queryClient.invalidateQueries({
+                                                        exact: false,
+                                                        queryKey: queryKeys.albums.list(
+                                                            server?.id,
+                                                            {
+                                                                limit: itemsPerPage,
+                                                                sortBy: carousel.sortBy,
+                                                                sortOrder: carousel.sortOrder,
+                                                                startIndex: 0,
+                                                            },
+                                                        ),
+                                                    })
+                                                }
+                                            >
+                                                <RiRefreshLine />
+                                            </ActionIcon>
+                                        </Group>
+                                    ),
+                                }}
                                 uniqueId={carousel.uniqueId}
                             />
                         ))}