feat: enable dynamic spotify embed (#364)

* feat: enable spotify

* feat: show dynamic embded

Author: rutajdash

client/src/components/podcast/List.js

@@ -13,12 +13,12 @@ import { PODCAST } from '../../assets/placeholder/podcast';
 // Images
 import podcastCover from '../../assets/images/podcast_cover.png';
 
-const PodcastList = () => {
+const PodcastList = ({ spotify }) => {
   const Podcast = PODCAST;
   const classes = useStyles();
   return (
     <Container>
-      <div className={classes.wrapper}>
+      {/* <div className={classes.wrapper}>
         <Paper>
           <Table>
             <TableHead>
@@ -57,11 +57,11 @@ const PodcastList = () => {
             </TableBody>
           </Table>
         </Paper>
-      </div>
+      </div> */}
 
       <div>
         <iframe
-          src='https://open.spotify.com/embed/episode/7zq8d36zXutK0XXU5xp8kO?utm_source=generator'
+          src={`https://open.spotify.com/embed/episode/${spotify[0].id}`}
           width='100%'
           height='152'
           frameBorder='0'

client/src/pages/expressions/index.jsx

@@ -150,6 +150,7 @@ const ExpressionsPage = ({
         <Expressions
           witsdom={witsdom}
           photostory={photostory}
+          spotify={spotify}
           editorial={editorial}
           miscellaneous={miscellaneous}
         />

client/src/screens/Expressions.js

@@ -22,7 +22,13 @@ import ROUTES from '../utils/getRoutes';
 // Placeholders
 import { CAROUSEL } from '../assets/placeholder/guide';
 
-function Expressions({ witsdom, photostory, editorial, miscellaneous }) {
+function Expressions({
+  witsdom,
+  photostory,
+  spotify,
+  editorial,
+  miscellaneous,
+}) {
   const classes = useStyles();
 
   const CONTENT = [
@@ -61,11 +67,11 @@ function Expressions({ witsdom, photostory, editorial, miscellaneous }) {
       container: true,
       section: <ArticleCardStack articleList={editorial} />,
     },
-    // {
-    //   name: 'Podcasts',
-    //   container: true,
-    //   section: <PodcastList />,
-    // },
+    {
+      name: 'Podcasts',
+      container: true,
+      section: <PodcastList spotify={spotify} />,
+    },
     {
       name: 'Miscellaneous',
       container: true,
@@ -110,7 +116,7 @@ function Expressions({ witsdom, photostory, editorial, miscellaneous }) {
               <SectionTitle
                 heading={name}
                 link={shortName}
-                path={path + '/1'}
+                path={path.includes('http') ? path : path + '/1'}
                 container={!container}
               />
               {section}

client/src/utils/getLinks.js

@@ -44,7 +44,8 @@ const SUB_CATEGORIES = {
     GALLERY: `${CATEGORIES.EXPRESSIONS}/gallery`,
     NITR_IN_MOTION: `${CATEGORIES.EXPRESSIONS}/nitrInMotion`,
     EDITORIAL: `${CATEGORIES.EXPRESSIONS}/editorial`,
-    PODCASTS: `${CATEGORIES.EXPRESSIONS}/podcasts`,
+    // PODCASTS: `${CATEGORIES.EXPRESSIONS}/podcasts`,
+    PODCASTS: `https://open.spotify.com/show/7ljgcbXzt4VQRJ1SLIECNf`,
     MISCELLANEOUS: `${CATEGORIES.EXPRESSIONS}/miscellaneous`,
   },
 };

client/src/utils/getRoutes.js

@@ -282,14 +282,14 @@ const EXPRESSIONS = [
     idNumber: 66,
     exact: true,
   },
-  // {
-  //   name: 'Podcasts',
-  //   shortName: LINKS.SUB_CATEGORIES.EXPRESSIONS.PODCASTS.split('/')[2],
-  //   path: LINKS.SUB_CATEGORIES.EXPRESSIONS.PODCASTS,
-  //   asyncRoutePath: './Podcast',
-  //   idNumber: 65,
-  //   exact: true,
-  // },
+  {
+    name: 'Podcasts',
+    shortName: LINKS.SUB_CATEGORIES.EXPRESSIONS.PODCASTS.split('/')[2],
+    path: LINKS.SUB_CATEGORIES.EXPRESSIONS.PODCASTS,
+    asyncRoutePath: './Podcast',
+    idNumber: 65,
+    exact: true,
+  },
   {
     name: 'Miscellaneous',
     shortName: LINKS.SUB_CATEGORIES.EXPRESSIONS.MISCELLANEOUS.split('/')[2],