diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx index 53d3d9b..e8cde90 100644 --- a/src/components/card/Card.tsx +++ b/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 = () => { diff --git a/src/components/scrollingmenu/ScrollingMenu.tsx b/src/components/scrollingmenu/ScrollingMenu.tsx index c1933ca..59d3113 100644 --- a/src/components/scrollingmenu/ScrollingMenu.tsx +++ b/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 ( <> @@ -26,19 +32,23 @@ const ScrollingMenu = ({ cardTitle, cardSubtitle, data, title, onClickTitle, typ diff --git a/src/components/viewtypes/GridViewType.tsx b/src/components/viewtypes/GridViewType.tsx index 60a760b..27eaf73 100644 --- a/src/components/viewtypes/GridViewType.tsx +++ b/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} /> ); @@ -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 ( {({ 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} /> )}