fix: fetch data from spotify

Monday-Morning · Jan 12, 2023 · 204693c · 204693c
1 parent 2f83684
commit 204693c
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 27 deletions.
diff --git a/client/src/components/podcast/List.js b/client/src/components/podcast/List.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import theme from '../../config/themes/light';
 
@@ -8,17 +8,22 @@ import makeStyles from '@mui/styles/makeStyles';
 import { Table, TableHead, TableBody } from '@mui/material';
 import { Heart, PlayCircle } from 'react-feather';
 
-// Components
-import { PODCAST } from '../../assets/placeholder/podcast';
-
-// Images
-import podcastCover from '../../assets/images/podcast_cover.png';
-
 const PodcastList = ({ spotify }) => {
-  const Podcast = PODCAST;
   const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const mediumScreen = useMediaQuery(theme.breakpoints.down('md'));
   const classes = useStyles();
+  const [currentId, setCurrentId] = useState(spotify[0].id);
+
+  useEffect(() => {
+    console.log(window.document.querySelector('.embed-widget-container'));
+  }, [currentId]);
+
+  function millisToMinutesAndSeconds(millis) {
+    var minutes = Math.floor(millis / 60000);
+    var seconds = ((millis % 60000) / 1000).toFixed(0);
+    return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
+  }
+
   return (
     <Container>
       <div className={classes.wrapper}>
@@ -33,19 +38,25 @@ const PodcastList = ({ spotify }) => {
               </tr>
             </TableHead>
             <TableBody>
-              {Podcast.map((podcast, key) => {
+              {spotify.map((podcast, key) => {
                 return (
-                  <tr key={key} className={classes.ListRow}>
+                  <tr
+                    key={key}
+                    className={classes.ListRow}
+                    onClick={() => {
+                      setCurrentId(spotify[key].id);
+                    }}
+                  >
                     <td>
                       <PlayCircle />
                     </td>
                     <td>
-                      {podcast.title.substring(
+                      {podcast.name.substring(
                         0,
-                        smallScreen ? 10 : mediumScreen ? 50 : 80,
+                        smallScreen ? 10 : mediumScreen ? 50 : 100,
                       )}
                     </td>
-                    <td>{podcast.duration}</td>
+                    <td>{millisToMinutesAndSeconds(podcast.duration_ms)}</td>
                     <td>
                       <Heart size={18} />
                     </td>
@@ -59,7 +70,7 @@ const PodcastList = ({ spotify }) => {
 
       <div>
         <iframe
-          // src={`https://open.spotify.com/embed/episode/${spotify[0].id}`}
+          src={`https://open.spotify.com/embed/episode/${currentId}`}
           width='100%'
           height='152'
           frameBorder='0'
@@ -99,7 +110,12 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: '400',
     fontFamily: 'Source Sans Pro',
     textAlign: 'center',
-    backgroundColor: theme.palette.secondary.neutral30,
+    backgroundColor: theme.palette.common.white,
+    '&:hover': {
+      cursor: 'pointer',
+      backgroundColor: theme.palette.secondary.neutral30,
+      borderRadius: '40px',
+    },
     '& td': {
       padding: '0.75rem',
     },

diff --git a/client/src/pages/expressions/podcasts.jsx b/client/src/pages/expressions/podcasts.jsx
@@ -3,8 +3,9 @@ import Head from 'next/head';
 
 import Podcast from '../../screens/Podcast';
 import Marginals from '../../components/marginals/Marginals';
+import getSpotifyAccessToken from '../../utils/getSpotifyAccessToken';
 
-const PodcastPage = () => (
+const PodcastPage = ({ spotify }) => (
   <>
     <Head>
       {/* <!-- =============== Primary Meta Tags =============== --> */}
@@ -62,18 +63,47 @@ const PodcastPage = () => (
       />
     </Head>
     <Marginals>
-      <Podcast />
+      <Podcast spotify={spotify} />
     </Marginals>
   </>
 );
 
-export async function getServerSideProps() {
-  return {
-    redirect: {
-      destination: '/comingSoon',
-      permanent: false,
-    },
-  };
+// export async function getServerSideProps() {
+//   return {
+//     redirect: {
+//       destination: '/comingSoon',
+//       permanent: false,
+//     },
+//   };
+// }
+
+export async function getStaticProps() {
+  try {
+    const accessToken = await getSpotifyAccessToken();
+    const podcastId = '7ljgcbXzt4VQRJ1SLIECNf';
+    const offset = 0;
+    const limit = 5;
+    const showUrl = `https://api.spotify.com/v1/shows/${podcastId}/episodes?offset=${offset}&limit=${limit}&market=ES`;
+
+    const { items: spotify } = await fetch(showUrl, {
+      method: 'GET',
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    }).then((res) => {
+      return res.json();
+    });
+
+    return {
+      props: { spotify },
+    };
+  } catch (err) {
+    return {
+      props: {
+        isError: true,
+      },
+    };
+  }
 }
 
 export default PodcastPage;
diff --git a/client/src/screens/Podcast.js b/client/src/screens/Podcast.js
@@ -7,12 +7,12 @@ import BackLink from '../components/podcast/BackLink';
 import LatestPodcast from '../components/podcast/LatestPodcast';
 import PodcastList from '../components/podcast/List';
 
-const Podcast = () => (
+const Podcast = ({ spotify }) => (
   <>
     <Container>
       <BackLink />
       <LatestPodcast />
-      <PodcastList />
+      <PodcastList spotify={spotify} />
     </Container>
   </>
 );

diff --git a/client/src/utils/getSpotifyAccessToken.js b/client/src/utils/getSpotifyAccessToken.js
@@ -1,7 +1,7 @@
 const getSpotifyAccessToken = async () => {
   try {
     const { access_token } = await fetch(
-      process.env.NODE_ENV === 'production'
+      process.env.NODE_ENV !== 'production'
         ? 'https://mm.dashnet.in/api/admin/spotify/auth'
         : 'http://localhost:5000/admin/spotify/auth',
       {