From 9bb2ce326db8385f61c16318bbdd927c3c93e43d Mon Sep 17 00:00:00 2001
From: aneel <aneel@umich.edu>
Date: Fri, 21 Apr 2023 19:13:48 -0400
Subject: [PATCH] frontend changes for feature playlists

---
 .../explore-screen/tabs/PlaylistsTab.tsx      |  5 +++++
 .../web/src/pages/track-page/TrackPage.tsx    | 20 +++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/packages/mobile/src/screens/explore-screen/tabs/PlaylistsTab.tsx b/packages/mobile/src/screens/explore-screen/tabs/PlaylistsTab.tsx
index 041f602287..3c1c63f0da 100644
--- a/packages/mobile/src/screens/explore-screen/tabs/PlaylistsTab.tsx
+++ b/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 (
diff --git a/packages/web/src/pages/track-page/TrackPage.tsx b/packages/web/src/pages/track-page/TrackPage.tsx
index 9802ef7be6..8641105357 100644
--- a/packages/web/src/pages/track-page/TrackPage.tsx
+++ b/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)