Refactoring Featured Playlists for multi-source support

src/js/components/Grid.js

@@ -6,7 +6,6 @@ const Grid = memo(({
   items,
   className = '',
   mini,
-  tile,
   getLink,
   sourceIcon,
 }) => {
@@ -14,13 +13,12 @@ const Grid = memo(({
 
   return (
     <SmartList
-      className={`grid grid--${items[0].type}s ${className} ${mini ? 'grid--mini' : ''} ${tile ? 'grid--tile' : ''}`}
+      className={`grid grid--${items[0].type}s ${className} ${mini ? 'grid--mini' : ''}`}
       items={items}
       itemComponent={GridItem}
       itemProps={{
         getLink,
         sourceIcon,
-        tile,
       }}
     />
   );

src/js/components/GridItem.js

@@ -78,6 +78,7 @@ const GridItem = ({
     type: item?.type?.toUpperCase() || 'UNKNOWN',
     item: { item, context: item },
   });
+  const tile = ['playlist_group', 'mood', 'directory', 'category'].indexOf(item?.type) > -1
 
   const onContextMenu = (e) => {
     e.preventDefault();
@@ -127,7 +128,7 @@ const GridItem = ({
   return (
     <div
       ref={isTouchDevice() ? undefined : drag}
-      className={`grid__item grid__item--${itemProp.type}`}
+      className={`grid__item grid__item--${itemProp.type} ${tile ? 'grid__item--tile' : ''}`}
     >
       <Link
         to={to}

src/js/components/Sidebar.js

@@ -104,7 +104,7 @@ const Sidebar = () => {
               <I18n path="sidebar.moods" />
             </Link>
             {spotify_available && (
-              <Link to="/discover/featured" className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
+              <Link to="/discover/featured-playlists" className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
                 <Icon name="star" type="material" />
                 <I18n path="sidebar.featured_playlists" />
               </Link>