Remove external horizontal scroll menu dependency

package.json

@@ -274,7 +274,6 @@
     "react-chartjs-2": "^3.0.4",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.1.2",
-    "react-horizontal-scrolling-menu": "^2.0.3",
     "react-hotkeys-hook": "^3.4.3",
     "react-lazy-load-image-component": "^1.5.1",
     "react-query": "^3.19.1",

src/components/dashboard/Dashboard.tsx

@@ -1,4 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
+import settings from 'electron-settings';
+import { useHistory } from 'react-router-dom';
+import { useQuery } from 'react-query';
 import { getAlbums } from '../../api/api';
 import PageLoader from '../loader/PageLoader';
 import GenericPage from '../layout/GenericPage';
@@ -6,45 +9,34 @@ import GenericPageHeader from '../layout/GenericPageHeader';
 import ScrollingMenu from '../scrollingmenu/ScrollingMenu';
 
 const Dashboard = () => {
-  /* We use regular state and fetching via axios for the dashboard component as
-   the horizontal scrolling menu component breaks due to react-query's autofetching.
-   When autofetching occurs, the visibility context of the component fails to update
-   which prevents the left/right scrolling buttons from functioning properly. */
-  const [recentAlbums, setRecentAlbums]: any[] = useState(null);
-  const [newestAlbums, setNewestAlbums]: any[] = useState(null);
-  const [randomAlbums, setRandomAlbums]: any[] = useState(null);
-  const [frequentAlbums, setFrequentAlbums]: any[] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isError, setIsError]: any = useState(null);
+  const history = useHistory();
+  const cardSize = Number(settings.getSync('gridCardSize'));
 
-  useEffect(() => {
-    const fetchData = async () => {
-      setIsLoading(true);
-      try {
-        const newest = await getAlbums({ type: 'newest', size: 20 }, 250);
-        const recent = await getAlbums({ type: 'recent', size: 20 }, 250);
-        const random = await getAlbums({ type: 'random', size: 20 }, 250);
-        const frequent = await getAlbums({ type: 'frequent', size: 20 }, 250);
+  const { isLoading: isLoadingRecent, data: recentAlbums }: any = useQuery(
+    ['recentAlbums'],
+    () => getAlbums({ type: 'newest', size: 20 }, 250),
+    { refetchOnWindowFocus: false }
+  );
 
-        setNewestAlbums(newest);
-        setRecentAlbums(recent);
-        setRandomAlbums(random);
-        setFrequentAlbums(frequent);
-      } catch (err) {
-        if (err instanceof Error) {
-          setIsError(err.message);
-        } else {
-          setIsError('An unknown error occurred while fetching the data.');
-        }
-      }
+  const { isLoading: isLoadingNewest, data: newestAlbums }: any = useQuery(
+    ['newestAlbums'],
+    () => getAlbums({ type: 'recent', size: 20 }, 250),
+    { refetchOnWindowFocus: false }
+  );
 
-      setIsLoading(false);
-    };
+  const { isLoading: isLoadingRandom, data: randomAlbums }: any = useQuery(
+    ['randomAlbums'],
+    () => getAlbums({ type: 'random', size: 20 }, 250),
+    { refetchOnWindowFocus: false }
+  );
 
-    fetchData();
-  }, []);
+  const { isLoading: isLoadingFrequent, data: frequentAlbums }: any = useQuery(
+    ['frequentAlbums'],
+    () => getAlbums({ type: 'frequent', size: 20 }, 250),
+    { refetchOnWindowFocus: false }
+  );
 
-  if (isLoading) {
+  if (isLoadingRecent || isLoadingNewest || isLoadingRandom || isLoadingFrequent) {
     return (
       <GenericPage hideDivider header={<GenericPageHeader title="Dashboard" />}>
         <PageLoader />
@@ -52,14 +44,6 @@ const Dashboard = () => {
     );
   }
 
-  if (isError) {
-    return (
-      <GenericPage hideDivider header={<GenericPageHeader title="Dashboard" />}>
-        <span>Error: {isError}</span>
-      </GenericPage>
-    );
-  }
-
   return (
     <GenericPage header={<GenericPageHeader title="Dashboard" />} hideDivider>
       {newestAlbums && recentAlbums && randomAlbums && (
@@ -67,49 +51,69 @@ const Dashboard = () => {
           <ScrollingMenu
             title="Recently Played"
             data={recentAlbums.album}
-            cardTitle={{ prefix: 'album', property: 'name' }}
+            cardTitle={{
+              prefix: '/library/album',
+              property: 'name',
+              urlProperty: 'albumId',
+            }}
             cardSubtitle={{
               prefix: 'artist',
               property: 'artist',
               urlProperty: 'artistId',
             }}
-            cardSize="175px"
+            cardSize={cardSize}
+            onClickTitle={() => history.push(`/library/album?sortType=recent`)}
           />
 
           <ScrollingMenu
             title="Recently Added"
             data={newestAlbums.album}
-            cardTitle={{ prefix: 'album', property: 'name' }}
+            cardTitle={{
+              prefix: '/library/album',
+              property: 'name',
+              urlProperty: 'albumId',
+            }}
             cardSubtitle={{
               prefix: 'artist',
               property: 'artist',
               urlProperty: 'artistId',
             }}
-            cardSize="175px"
+            cardSize={cardSize}
+            onClickTitle={() => history.push(`/library/album?sortType=newest`)}
           />
 
           <ScrollingMenu
             title="Random"
             data={randomAlbums.album}
-            cardTitle={{ prefix: 'album', property: 'name' }}
+            cardTitle={{
+              prefix: '/library/album',
+              property: 'name',
+              urlProperty: 'albumId',
+            }}
             cardSubtitle={{
               prefix: 'artist',
               property: 'artist',
               urlProperty: 'artistId',
             }}
-            cardSize="175px"
+            cardSize={cardSize}
+            onClickTitle={() => history.push(`/library/album?sortType=random`)}
           />
 
           <ScrollingMenu
             title="Most Played"
             data={frequentAlbums.album}
-            cardTitle={{ prefix: 'album', property: 'name' }}
+            cardTitle={{
+              prefix: '/library/album',
+              property: 'name',
+              urlProperty: 'albumId',
+            }}
             cardSubtitle={{
               prefix: 'artist',
               property: 'artist',
               urlProperty: 'artistId',
             }}
-            cardSize="175px"
+            cardSize={cardSize}
+            onClickTitle={() => history.push(`/library/album?sortType=frequent`)}
           />
         </>
       )}

src/components/scrollingmenu/ScrollingMenu.tsx

@@ -1,63 +1,60 @@
-import React, { useContext } from 'react';
-import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
-import { Button } from 'rsuite';
+import React from 'react';
 import styled from 'styled-components';
 import Card from '../card/Card';
-import { StyledIcon } from '../shared/styled';
 
 const ScrollMenuContainer = styled.div`
   margin-bottom: 25px;
-`;
+  overflow-x: auto;
+  white-space: nowrap;
 
-const Title = styled.h1`
-  margin-left: 20px;
-  font-size: 20px !important;
+  ::-webkit-scrollbar {
+    height: 10px;
+  }
 `;
 
-const LeftArrow = () => {
-  const { isFirstItemVisible, scrollPrev } = useContext(VisibilityContext);
+const TitleWrapper = styled.div`
+  margin-left: 10px;
+  margin-bottom: 10px;
+`;
 
-  return (
-    <Button appearance="link" disabled={isFirstItemVisible} onClick={() => scrollPrev()}>
-      <StyledIcon icon="arrow-left" />
-    </Button>
-  );
-};
+const Title = styled.a`
+  font-size: 20px;
+  color: white;
 
-const RightArrow = () => {
-  const { isLastItemVisible, scrollNext } = useContext(VisibilityContext);
+  &:hover {
+    cursor: pointer;
+    text-decoration: none;
+  }
+`;
 
+const ScrollingMenu = ({ cardTitle, cardSubtitle, data, title, onClickTitle }: any) => {
   return (
-    <Button appearance="link" disabled={isLastItemVisible} onClick={() => scrollNext()}>
-      <StyledIcon icon="arrow-right" />
-    </Button>
-  );
-};
+    <>
+      <TitleWrapper>
+        <Title onClick={onClickTitle}>{title}</Title>
+      </TitleWrapper>
 
-const ScrollingMenu = ({ cardTitle, cardSubtitle, data, title, cardSize }: any) => {
-  return (
-    <ScrollMenuContainer>
-      <Title>{title}</Title>
-      <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
+      <ScrollMenuContainer>
         {data.map((item: any) => (
-          <Card
-            itemId={item.id}
-            title={item[cardTitle.property] || item.title}
-            subtitle={item[cardSubtitle.property]}
-            key={item.id}
-            coverArt={item.image}
-            url={`library/${cardTitle.prefix}/${item.id}`}
-            subUrl={`library/${cardSubtitle.prefix}/${item.artistId}`}
-            playClick={{ type: 'album', id: item.id }}
-            hasHoverButtons
-            size={cardSize}
-            details={{ cacheType: 'album', ...item }}
-            lazyLoad
-            style={{ margin: '0px 5px 0px 5px' }}
-          />
+          <span key={item.id} style={{ display: 'inline-block' }}>
+            <Card
+              itemId={item.id}
+              title={item[cardTitle.property] || item.title}
+              subtitle={item[cardSubtitle.property]}
+              coverArt={item.image}
+              url={`library/${cardTitle.prefix}/${item.id}`}
+              subUrl={`library/${cardSubtitle.prefix}/${item.artistId}`}
+              playClick={{ type: 'album', id: item.id }}
+              hasHoverButtons
+              size={200}
+              details={{ cacheType: 'album', ...item }}
+              lazyLoad
+              style={{ margin: '0px 5px 0px 5px' }}
+            />
+          </span>
         ))}
-      </ScrollMenu>
-    </ScrollMenuContainer>
+      </ScrollMenuContainer>
+    </>
   );
 };
 

yarn.lock

@@ -10257,11 +10257,6 @@ react-helmet-async@^1.1.2:
     react-fast-compare "^3.2.0"
     shallowequal "^1.1.0"
 
-react-horizontal-scrolling-menu@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/react-horizontal-scrolling-menu/-/react-horizontal-scrolling-menu-2.0.3.tgz#5b272de226a36bf1b0c0771c51f41877d3538833"
-  integrity sha512-sId5Rym54HuzS1xhNG8CkJ6X75uDyqq4i652Q5tNClcWFND19IwOyE5/JnamP7bo427nTy9zllt6ZhMjfdpmBA==
-
 react-hotkeys-hook@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-3.4.3.tgz#74da79c2a5106f8d203f543794833c1af39030ac"