Refactor sidebar playlist

src/renderer/features/sidebar/components/sidebar-playlist-list.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { RiAddBoxFill, RiAddCircleFill, RiPlayFill } from 'react-icons/ri';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
-import { LibraryItem } from '/@/renderer/api/types';
+import { LibraryItem, PlaylistListSort, SortOrder } from '/@/renderer/api/types';
 import { Button, Text } from '/@/renderer/components';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { usePlaylistList } from '/@/renderer/features/playlists';
@@ -14,11 +14,7 @@ import { Play } from '/@/renderer/types';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
 import { useHideScrollbar } from '/@/renderer/hooks';
-import { useGeneralSettings } from '/@/renderer/store';
-
-interface SidebarPlaylistListProps {
-    data: ReturnType<typeof usePlaylistList>['data'];
-}
+import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
 
 const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
     const { t } = useTranslation();
@@ -121,10 +117,20 @@ const PlaylistRow = ({ index, data, style }: ListChildComponentProps) => {
     );
 };
 
-export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
+export const SidebarPlaylistList = () => {
     const { isScrollbarHidden, hideScrollbarElementProps } = useHideScrollbar(0);
     const handlePlayQueueAdd = usePlayQueueAdd();
     const { defaultFullPlaylist } = useGeneralSettings();
+    const server = useCurrentServer();
+
+    const playlistsQuery = usePlaylistList({
+        query: {
+            sortBy: PlaylistListSort.NAME,
+            sortOrder: SortOrder.ASC,
+            startIndex: 0,
+        },
+        serverId: server?.id,
+    });
 
     const [rect, setRect] = useState({
         height: 0,
@@ -150,9 +156,9 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
         return {
             defaultFullPlaylist,
             handlePlay: handlePlayPlaylist,
-            items: data?.items,
+            items: playlistsQuery?.data?.items,
         };
-    }, [data?.items, defaultFullPlaylist, handlePlayPlaylist]);
+    }, [playlistsQuery?.data?.items, defaultFullPlaylist, handlePlayPlaylist]);
 
     return (
         <Flex
@@ -168,7 +174,7 @@ export const SidebarPlaylistList = ({ data }: SidebarPlaylistListProps) => {
                                 : 'overlay-scrollbar'
                         }
                         height={debounced.height}
-                        itemCount={data?.items?.length || 0}
+                        itemCount={playlistsQuery?.data?.items?.length || 0}
                         itemData={memoizedItemData}
                         itemSize={25}
                         overscanCount={20}

src/renderer/features/sidebar/components/sidebar.tsx

@@ -1,7 +1,7 @@
-import { MouseEvent, useMemo } from 'react';
 import { Box, Center, Divider, Group, Stack } from '@mantine/core';
 import { closeAllModals, openModal } from '@mantine/modals';
 import { AnimatePresence, motion } from 'framer-motion';
+import { MouseEvent, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiAddFill, RiArrowDownSLine, RiDiscLine, RiListUnordered } from 'react-icons/ri';
 import { Link, useLocation } from 'react-router-dom';
@@ -11,9 +11,9 @@ import {
     useGeneralSettings,
     useWindowSettings,
 } from '../../../store/settings.store';
-import { PlaylistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
-import { Button, MotionStack, Spinner, Tooltip } from '/@/renderer/components';
-import { CreatePlaylistForm, usePlaylistList } from '/@/renderer/features/playlists';
+import { ServerType } from '/@/renderer/api/types';
+import { Button, MotionStack, Tooltip } from '/@/renderer/components';
+import { CreatePlaylistForm } from '/@/renderer/features/playlists';
 import { ActionBar } from '/@/renderer/features/sidebar/components/action-bar';
 import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
 import { SidebarItem } from '/@/renderer/features/sidebar/components/sidebar-item';
@@ -110,15 +110,6 @@ export const Sidebar = () => {
         });
     };
 
-    const playlistsQuery = usePlaylistList({
-        query: {
-            sortBy: PlaylistListSort.NAME,
-            sortOrder: SortOrder.ASC,
-            startIndex: 0,
-        },
-        serverId: server?.id,
-    });
-
     const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
     const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
     const expandFullScreenPlayer = () => {
@@ -198,7 +189,6 @@ export const Sidebar = () => {
                                     >
                                         {t('page.sidebar.playlists', { postProcess: 'titleCase' })}
                                     </Box>
-                                    {playlistsQuery.isLoading && <Spinner />}
                                 </Group>
                                 <Group spacing="sm">
                                     <Button
@@ -233,7 +223,7 @@ export const Sidebar = () => {
                                     </Button>
                                 </Group>
                             </Group>
-                            <SidebarPlaylistList data={playlistsQuery.data} />
+                            <SidebarPlaylistList />
                         </>
                     )}
                 </MotionStack>