frontend changes for feature playlists

packages/mobile/src/screens/explore-screen/tabs/PlaylistsTab.tsx

@@ -11,6 +11,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import { CollectionList } from 'app/components/collection-list'
 
 import { TabInfo } from '../components/TabInfo'
+import { track } from 'app/services/analytics'
 const { getExplorePlaylists, getExploreStatus, getPlaylistsStatus } =
   explorePageSelectors
 const { fetchPlaylists } = explorePageActions
@@ -29,6 +30,10 @@ export const PlaylistsTab = () => {
     if (exploreStatus === Status.SUCCESS) {
       dispatch(fetchPlaylists())
     }
+
+    if(track){
+      setFeaturedPlaylists(track.featured_playlists || [])
+    }
   }, [exploreStatus, dispatch])
 
   return (

packages/web/src/pages/track-page/TrackPage.tsx

@@ -11,6 +11,8 @@ interface OwnProps {}
 
 type TrackPageContentProps = ReturnType<typeof mapStateToProps> & OwnProps
 
+const [featuredPlaylists, setFeaturedPlaylists] = useState<Playlist[]>([])
+
 const TrackPage = ({ isMobile }: TrackPageContentProps) => {
   const content = isMobile ? TrackPageMobileContent : TrackPageDesktopContent
 
@@ -23,4 +25,22 @@ function mapStateToProps(state: AppState) {
   }
 }
 
+const FeaturedPlaylists: React.FC<{ playlists: Playlist[] }> = ({ playlists }) => {
+  if (playlists.length === 0) {
+    return null;
+  }
+  return (
+    <div className={styles.featuredPlaylists}>
+      <h3>Featured in these playlists:</h3>
+      <ul>
+        {playlists.map((playlist) => (
+          <li key={playlist.playlist_id}>
+            <a href={`/playlist/${playlist.playlist_id}`}>{playlist.playlist_name}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
 export default connect(mapStateToProps)(TrackPage)