Move cacheImage, cachePath outside of card

- Optimize performance

src/components/card/Card.tsx

@@ -1,6 +1,4 @@
-import React, { useState } from 'react';
-import path from 'path';
-import settings from 'electron-settings';
+import React from 'react';
 import { Icon } from 'rsuite';
 import { useHistory } from 'react-router-dom';
 import { useQueryClient } from 'react-query';
@@ -8,7 +6,7 @@ import cacheImage from '../shared/cacheImage';
 import { getAlbum, getPlaylist, star, unstar, getAllArtistSongs } from '../../api/api';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { appendPlayQueue, fixPlayer2Index, setPlayQueue } from '../../redux/playQueueSlice';
-import { isCached, getImageCachePath } from '../../shared/utils';
+import { isCached } from '../../shared/utils';
 
 import {
   StyledPanel,
@@ -37,14 +35,14 @@ const Card = ({
   lazyLoad,
   playClick,
   size,
+  cacheImages,
+  cachePath,
   ...rest
 }: any) => {
   const history = useHistory();
   const dispatch = useAppDispatch();
   const playQueue = useAppSelector((state) => state.playQueue);
   const queryClient = useQueryClient();
-  const [cacheImages] = useState(Boolean(settings.getSync('cacheImages')));
-  const [cachePath] = useState(path.join(getImageCachePath(), '/'));
 
   const handleClick = () => {
     history.push(url);
@@ -121,6 +119,9 @@ const Card = ({
     await queryClient.refetchQueries(['playlist'], {
       active: true,
     });
+    await queryClient.refetchQueries(['search'], {
+      active: true,
+    });
   };
 
   const handleOpenModal = () => {

src/components/scrollingmenu/ScrollingMenu.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
+import path from 'path';
+import settings from 'electron-settings';
 import styled from 'styled-components';
 import Card from '../card/Card';
 import { SectionTitleWrapper, SectionTitle } from '../shared/styled';
+import { getImageCachePath } from '../../shared/utils';
 
 const ScrollMenuContainer = styled.div`
   margin-bottom: 25px;
@@ -14,6 +17,9 @@ const ScrollMenuContainer = styled.div`
 `;
 
 const ScrollingMenu = ({ cardTitle, cardSubtitle, data, title, onClickTitle, type }: any) => {
+  const cacheImages = Boolean(settings.getSync('cacheImages'));
+  const cachePath = path.join(getImageCachePath(), '/');
+
   return (
     <>
       <SectionTitleWrapper>
@@ -26,19 +32,23 @@ const ScrollingMenu = ({ cardTitle, cardSubtitle, data, title, onClickTitle, typ
             <Card
               itemId={item.id}
               title={item[cardTitle.property] || item.title}
-              subtitle={`${item[cardSubtitle.property]}${cardSubtitle.unit}`}
+              subtitle={
+                cardSubtitle.unit
+                  ? `${item[cardSubtitle.property]}${cardSubtitle.unit}`
+                  : item[cardSubtitle.property]
+              }
               coverArt={item.image}
-              url={cardTitle.urlProperty ? `library/${cardTitle.prefix}/${item.id}` : undefined}
+              url={cardTitle.urlProperty ? `${cardTitle.prefix}/${item.id}` : undefined}
               subUrl={
-                cardSubtitle.urlProperty
-                  ? `library/${cardSubtitle.prefix}/${item.artistId}`
-                  : undefined
+                cardSubtitle.urlProperty ? `${cardSubtitle.prefix}/${item.artistId}` : undefined
               }
               playClick={{ type, id: item.id }}
               details={{ cacheType: type, ...item }}
               hasHoverButtons
-              size={200}
+              size={settings.getSync('gridCardSize')}
               lazyLoad
+              cacheImages={cacheImages}
+              cachePath={cachePath}
               style={{ margin: '0px 5px 0px 5px' }}
             />
           </span>

src/components/viewtypes/GridViewType.tsx

@@ -1,9 +1,12 @@
 // Referenced from: https://codesandbox.io/s/jjkz5y130w?file=/index.js:700-703
 import React, { useMemo } from 'react';
+import path from 'path';
+import settings from 'electron-settings';
 import { FixedSizeList as List } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import Card from '../card/Card';
 import 'react-virtualized/styles.css';
+import { getImageCachePath } from '../../shared/utils';
 
 const GridCard = ({ data, index, style }: any) => {
   const { cardHeight, cardWidth, columnCount, gapSize, itemCount } = data;
@@ -49,6 +52,8 @@ const GridCard = ({ data, index, style }: any) => {
             id: data.data[i][data.playClick.idProperty],
           }}
           details={{ cacheType: data.cacheType, ...data.data[i] }}
+          cacheImages={data.cacheImages}
+          cachePath={data.cachePath}
         />
       </div>
     );
@@ -78,6 +83,8 @@ function ListWrapper({
   itemCount,
   width,
   cacheType,
+  cacheImages,
+  cachePath,
 }: any) {
   const gapSize = 5;
   const cardHeight = size + 75; // 225
@@ -99,6 +106,8 @@ function ListWrapper({
       cardWidth,
       cardHeight,
       gapSize,
+      cacheImages,
+      cachePath,
     }),
     [
       cardHeight,
@@ -111,6 +120,8 @@ function ListWrapper({
       itemCount,
       playClick,
       size,
+      cacheImages,
+      cachePath,
     ]
   );
 
@@ -129,6 +140,9 @@ function ListWrapper({
 }
 
 const GridViewType = ({ data, cardTitle, cardSubtitle, playClick, size, cacheType }: any) => {
+  const cacheImages = Boolean(settings.getSync('cacheImages'));
+  const cachePath = path.join(getImageCachePath(), '/');
+
   return (
     <AutoSizer>
       {({ height, width }: any) => (
@@ -142,6 +156,8 @@ const GridViewType = ({ data, cardTitle, cardSubtitle, playClick, size, cacheTyp
           playClick={playClick}
           size={size}
           cacheType={cacheType}
+          cacheImages={cacheImages}
+          cachePath={cachePath}
         />
       )}
     </AutoSizer>