Fix

src/components/layout/Sidebar.tsx

@@ -1,9 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useQuery } from 'react-query';
 import settings from 'electron-settings';
-import { FixedSizeList as List } from 'react-window';
 import useMeasure from 'react-use/lib/useMeasure';
-import { AutoSizer } from 'react-virtualized';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
@@ -18,27 +15,10 @@ import {
   SidebarNavItem,
 } from './styled';
 import { setSidebar } from '../../redux/miscSlice';
-import { apiController } from '../../api/controller';
 import { StyledButton } from '../shared/styled';
 import { InfoModal } from '../modal/PageModal';
 import placeholderImg from '../../img/placeholder.png';
-
-const PlaylistRow = ({ data, index, style }: any) => {
-  const history = useHistory();
-
-  return (
-    <div style={style}>
-      <StyledButton
-        style={{ textAlign: 'left' }}
-        block
-        appearance="subtle"
-        onClick={() => history.push(`/playlist/${data[index].id}`)}
-      >
-        {data[index].title}
-      </StyledButton>
-    </div>
-  );
-};
+import SidebarPlaylists from './SidebarPlaylists';
 
 const Sidebar = ({
   expand,
@@ -62,10 +42,6 @@ const Sidebar = ({
   const [mainNavRef, { height: mainNavHeight }] = useMeasure<HTMLDivElement>();
   const [sidebarBodyRef, { height: sidebarBodyHeight }] = useMeasure<HTMLDivElement>();
 
-  const { data: playlists }: any = useQuery(['playlists'], () =>
-    apiController({ serverType: config.serverType, endpoint: 'getPlaylists' })
-  );
-
   const getSidebarWidth = useCallback((num: number) => {
     if (num < 160) {
       return 160;
@@ -118,7 +94,7 @@ const Sidebar = ({
       >
         <Sidenav style={{ height: '100%' }} expanded={expand} appearance="default">
           {expand && misc.sidebar.coverArt && (
-            <SidebarCoverArtContainer ref={coverArtRef} height={width?.replace('px', '')}>
+            <SidebarCoverArtContainer ref={coverArtRef} height={`${width}px`}>
               <LazyLoadImage
                 onClick={() => setShowCoverArtModal(true)}
                 src={
@@ -128,7 +104,7 @@ const Sidebar = ({
                   ) || placeholderImg
                 }
                 style={{
-                  height: `${width}`,
+                  height: `${width}px`,
                   width: '100%',
                   objectFit: 'cover',
                 }}
@@ -147,9 +123,7 @@ const Sidebar = ({
 
           <Sidenav.Body
             style={{
-              height: expand
-                ? `calc(100% - ${misc.sidebar.coverArt ? Number(width?.replace('px', '')) : 0}px)`
-                : '100%',
+              height: expand ? `calc(100% - ${misc.sidebar.coverArt ? width : 0}px)` : '100%',
               overflowY: 'auto',
             }}
           >
@@ -342,21 +316,7 @@ const Sidebar = ({
                     <PlaylistDivider onClick={() => history.push('/playlist')}>
                       {t('Playlists')}
                     </PlaylistDivider>
-                    <AutoSizer>
-                      {({ height }: any) => (
-                        <>
-                          <List
-                            height={height - 25}
-                            itemCount={playlists?.length}
-                            itemSize={25}
-                            width={width}
-                            itemData={playlists}
-                          >
-                            {PlaylistRow}
-                          </List>
-                        </>
-                      )}
-                    </AutoSizer>
+                    <SidebarPlaylists width={width} />
                   </>
                 </div>
               )}

src/components/layout/SidebarPlaylists.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useQuery } from 'react-query';
+import { useHistory } from 'react-router-dom';
+import { AutoSizer } from 'react-virtualized';
+import { FixedSizeList as List } from 'react-window';
+import { apiController } from '../../api/controller';
+import { useAppSelector } from '../../redux/hooks';
+import { StyledButton } from '../shared/styled';
+
+const PlaylistRow = ({ data, index, style }: any) => {
+  const history = useHistory();
+
+  return (
+    <div style={style}>
+      <StyledButton
+        style={{ textAlign: 'left' }}
+        block
+        appearance="subtle"
+        onClick={() => history.push(`/playlist/${data[index].id}`)}
+      >
+        {data[index].title}
+      </StyledButton>
+    </div>
+  );
+};
+
+const SidebarPlaylists = ({ width }: any) => {
+  const config = useAppSelector((state) => state.config);
+
+  const { data: playlists }: any = useQuery(['playlists'], () =>
+    apiController({ serverType: config.serverType, endpoint: 'getPlaylists' })
+  );
+
+  return (
+    <AutoSizer>
+      {({ height }: any) => (
+        <>
+          <List
+            height={height - 25}
+            itemCount={playlists?.length}
+            itemSize={25}
+            width={width}
+            itemData={playlists}
+          >
+            {PlaylistRow}
+          </List>
+        </>
+      )}
+    </AutoSizer>
+  );
+};
+
+export default SidebarPlaylists;