Update default album list view

- Add random view type
- Default from newest -> random
- Change default refetching behavior to 1hr cache, no stale
- Add manual refresh button

src/components/library/AlbumList.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import settings from 'electron-settings';
+import { ButtonToolbar } from 'rsuite';
 import { useQuery, useQueryClient } from 'react-query';
 import GridViewType from '../viewtypes/GridViewType';
 import ListViewType from '../viewtypes/ListViewType';
 import useSearchQuery from '../../hooks/useSearchQuery';
 import GenericPageHeader from '../layout/GenericPageHeader';
 import GenericPage from '../layout/GenericPage';
-import { getAllAlbums } from '../../api/api';
+import { getAlbumsDirect, getAllAlbums } from '../../api/api';
 import PageLoader from '../loader/PageLoader';
 import { useAppDispatch } from '../../redux/hooks';
 import {
@@ -15,32 +16,36 @@ import {
   toggleRangeSelected,
 } from '../../redux/multiSelectSlice';
 import { StyledInputPicker } from '../shared/styled';
+import { RefreshButton } from '../shared/ToolbarButtons';
 
 const ALBUM_SORT_TYPES = [
   { label: 'A-Z (Name)', value: 'alphabeticalByName' },
-  {
-    label: 'A-Z (Artist)',
-    value: 'alphabeticalByArtist',
-  },
+  { label: 'A-Z (Artist)', value: 'alphabeticalByArtist' },
   { label: 'Most Played', value: 'frequent' },
   { label: 'Newly Added', value: 'newest' },
+  { label: 'Random', value: 'random' },
   { label: 'Recently Played', value: 'recent' },
 ];
 
 const AlbumList = () => {
+  const dispatch = useAppDispatch();
   const queryClient = useQueryClient();
-  const [sortBy, setSortBy] = useState('newest');
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [sortBy, setSortBy] = useState('random');
   const [offset, setOffset] = useState(0);
   const [viewType, setViewType] = useState(settings.getSync('albumViewType'));
   const { isLoading, isError, data: albums, error }: any = useQuery(
     ['albumList', offset, sortBy],
-    () => getAllAlbums(offset, sortBy),
+    () =>
+      sortBy === 'random'
+        ? getAlbumsDirect({ type: 'random', size: settings.getSync('gridCardSize') })
+        : getAllAlbums(offset, sortBy),
     {
       refetchOnWindowFocus: false,
+      cacheTime: 3600000, // Stay in cache for 1 hour
+      staleTime: Infinity, // Only allow manual refresh
     }
   );
-  const dispatch = useAppDispatch();
-
   const [searchQuery, setSearchQuery] = useState('');
   const filteredData = useSearchQuery(searchQuery, albums, ['name', 'artist']);
 
@@ -60,23 +65,34 @@ const AlbumList = () => {
     }
   };
 
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    await queryClient.refetchQueries(['albumList'], { active: true });
+    setIsRefreshing(false);
+  };
+
   return (
     <GenericPage
       header={
         <GenericPageHeader
           title="Albums"
+          subtitle={
+            <ButtonToolbar>
+              <RefreshButton onClick={handleRefresh} loading={isRefreshing} />
+            </ButtonToolbar>
+          }
           subsidetitle={
             <StyledInputPicker
-              width={120}
+              width={140}
               defaultValue={sortBy}
               data={ALBUM_SORT_TYPES}
+              cleanable={false}
               placeholder="Sort Type"
               onChange={async (value: string) => {
+                await queryClient.cancelQueries(['albumList', offset, sortBy]);
+                setSearchQuery('');
                 setOffset(0);
                 setSortBy(value);
-                await queryClient.refetchQueries(['albumList'], {
-                  active: true,
-                });
               }}
             />
           }

src/components/shared/ToolbarButtons.tsx

@@ -110,3 +110,11 @@ export const AddPlaylistButton = ({ ...rest }) => {
     </StyledIconButton>
   );
 };
+
+export const RefreshButton = ({ ...rest }) => {
+  return (
+    <StyledIconButton icon={<Icon icon="refresh2" />} tabIndex={0} {...rest}>
+      Refresh
+    </StyledIconButton>
+  );
+};

src/components/viewtypes/GridViewType.tsx

@@ -134,7 +134,7 @@ const GridViewType = ({ data, cardTitle, cardSubtitle, playClick, size, cacheTyp
       {({ height, width }: any) => (
         <ListWrapper
           height={height}
-          itemCount={data.length}
+          itemCount={data?.length}
           width={width}
           data={data}
           cardTitle={cardTitle}