From 1e7a5d7692bbaaa31c0957d51f25e3d8d1d29e43 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Thu, 17 Aug 2023 20:47:17 +0900
Subject: [PATCH] feat: add podcast show page

---
 src/components/Podcasts/EpisodeCard.tsx     |  4 --
 src/components/Podcasts/Episodes.List.tsx   |  1 -
 src/components/Podcasts/PodcastShowCard.tsx | 78 +++++++++++++++++++++
 src/components/Podcasts/Podcasts.List.tsx   |  4 --
 src/containers/PodcastShowContainer.tsx     | 44 ++++++++++++
 src/containers/PodcastsContainer.tsx        | 41 +++++++----
 src/pages/podcasts/[showSlug]/index.tsx     | 29 +++++---
 src/pages/podcasts/podcasts-temp-data.json  | 10 ++-
 8 files changed, 176 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Podcasts/PodcastShowCard.tsx
 create mode 100644 src/containers/PodcastShowContainer.tsx

diff --git a/src/components/Podcasts/EpisodeCard.tsx b/src/components/Podcasts/EpisodeCard.tsx
index bea25e6..e45a2b8 100644
--- a/src/components/Podcasts/EpisodeCard.tsx
+++ b/src/components/Podcasts/EpisodeCard.tsx
@@ -1,12 +1,8 @@
-import { Tags } from '@/components/Tags'
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import Link from 'next/link'
 import React, { useMemo } from 'react'
 import { LPE } from '../../types/lpe.types'
-import { Authors } from '../Authors'
-import { AuthorsDirection } from '../Authors/Authors'
-import { LogosCircleIcon } from '../Icons/LogosCircleIcon'
 import { ResponsiveImage } from '../ResponsiveImage/ResponsiveImage'
 
 export enum Size {
diff --git a/src/components/Podcasts/Episodes.List.tsx b/src/components/Podcasts/Episodes.List.tsx
index 94e1e83..ecf747a 100644
--- a/src/components/Podcasts/Episodes.List.tsx
+++ b/src/components/Podcasts/Episodes.List.tsx
@@ -72,7 +72,6 @@ const EpisodeListContainer = styled.div`
   display: flex;
   flex-direction: column;
   border-top: 1px solid rgb(var(--lsd-border-primary));
-  margin-top: 140px;
   padding-top: 16px;
 `
 
diff --git a/src/components/Podcasts/PodcastShowCard.tsx b/src/components/Podcasts/PodcastShowCard.tsx
new file mode 100644
index 0000000..5ff70d3
--- /dev/null
+++ b/src/components/Podcasts/PodcastShowCard.tsx
@@ -0,0 +1,78 @@
+import { Tags } from '@/components/Tags'
+import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import Link from 'next/link'
+import React, { useMemo } from 'react'
+import { LPE } from '../../types/lpe.types'
+
+import { ResponsiveImage } from '../ResponsiveImage/ResponsiveImage'
+import { LogosCircleIcon } from '../Icons/LogosCircleIcon'
+
+export enum Size {
+  SMALL = 'small',
+  LARGE = 'large',
+}
+
+interface Props {
+  show: LPE.Podcast.Show
+}
+
+export default function PodcastShowCard({ show }: Props) {
+  return (
+    <Container>
+      <LogosCircleIcon width={73} height={73} />
+      <ShowData>
+        <Typography variant="h3">{show.title}</Typography>
+        <HostedBy>
+          <Typography variant="body2">
+            Hosted by:
+            {show.hosts.map((host) => (
+              <Host key={host.name} variant="body2">
+                {host.name}
+              </Host>
+            ))}
+          </Typography>
+        </HostedBy>
+        <Description variant="body2">{show.description}</Description>
+      </ShowData>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 68px;
+`
+
+const ShowData = styled.div`
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+const HostedBy = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+`
+
+const Host = styled(Typography)`
+  margin-left: 8px;
+  &:not(:last-child) {
+    &:after {
+      content: '•';
+      margin-left: 8px;
+      text-decoration: none;
+      display: inline-block;
+    }
+  }
+`
+
+const Description = styled(Typography)`
+  margin-top: 16px;
+`
diff --git a/src/components/Podcasts/Podcasts.List.tsx b/src/components/Podcasts/Podcasts.List.tsx
index 6de04ea..9690bcf 100644
--- a/src/components/Podcasts/Podcasts.List.tsx
+++ b/src/components/Podcasts/Podcasts.List.tsx
@@ -2,7 +2,6 @@ import styled from '@emotion/styled'
 import { LPE } from '../../types/lpe.types'
 import { Button, Typography } from '@acid-info/lsd-react'
 import Link from 'next/link'
-import Image from 'next/image'
 import { LogosCircleIcon } from '../Icons/LogosCircleIcon'
 import { HashingItOutIcon } from '../Icons/HashingItOutIcon'
 
@@ -44,9 +43,6 @@ export default function PodcastsList({ shows }: Props) {
 const PodcastsContainer = styled.article`
   display: flex;
   gap: 16px;
-
-  @media (min-width: 768px) and (max-width: 1200px) {
-  }
 `
 
 const PodcastCard = styled.div`
diff --git a/src/containers/PodcastShowContainer.tsx b/src/containers/PodcastShowContainer.tsx
new file mode 100644
index 0000000..d2312a7
--- /dev/null
+++ b/src/containers/PodcastShowContainer.tsx
@@ -0,0 +1,44 @@
+import { Grid, GridItem } from '@/components/Grid/Grid'
+import styled from '@emotion/styled'
+import { LPE } from '../types/lpe.types'
+import PodcastsList from '@/components/Podcasts/Podcasts.List'
+import EpisodesList from '@/components/Podcasts/Episodes.List'
+import { Typography } from '@acid-info/lsd-react'
+import { PodcastType } from '@/components/Post/Post'
+import PodcastShowCard from '@/components/Podcasts/PodcastShowCard'
+
+interface Props {
+  show: LPE.Podcast.Show
+  latestEpisodes: LPE.Podcast.Document[]
+}
+
+const PodcastShowContainer = (props: Props) => {
+  const { show, latestEpisodes } = props
+
+  return (
+    <PodcastsGrid>
+      <PodcastsBodyContainer className={'w-16'}>
+        <PodcastShowCard show={show} />
+        <EpisodesList
+          header={<Typography variant="body2">Latest Episodes</Typography>}
+          episodes={latestEpisodes}
+          podcastType={PodcastType.LATEST}
+        />
+      </PodcastsBodyContainer>
+    </PodcastsGrid>
+  )
+}
+
+const PodcastsBodyContainer = styled(GridItem)`
+  @media (min-width: 768px) and (max-width: 1200px) {
+    grid-column: span 10 !important;
+  }
+`
+
+const PodcastsGrid = styled(Grid)`
+  width: 100%;
+  @media (min-width: 768px) and (max-width: 1200px) {
+  }
+`
+
+export default PodcastShowContainer
diff --git a/src/containers/PodcastsContainer.tsx b/src/containers/PodcastsContainer.tsx
index d63b6da..442000b 100644
--- a/src/containers/PodcastsContainer.tsx
+++ b/src/containers/PodcastsContainer.tsx
@@ -18,23 +18,30 @@ const PodcastsContainer = (props: Props) => {
     <PodcastsGrid>
       <PodcastsBodyContainer className={'w-16'}>
         <PodcastsList shows={shows} />
-        <EpisodesList
-          header={<Typography variant="body2">Latest Episodes</Typography>}
-          episodes={latestEpisodes}
-          podcastType={PodcastType.LATEST}
-        />
 
-        <EpisodesList
-          header={<Typography variant="body2">State of Network</Typography>}
-          episodes={latestEpisodes.slice(0, 4)}
-          podcastType={PodcastType.NETWORK_STATE}
-        />
+        <Section>
+          <EpisodesList
+            header={<Typography variant="body2">Latest Episodes</Typography>}
+            episodes={latestEpisodes}
+            podcastType={PodcastType.LATEST}
+          />
+        </Section>
 
-        <EpisodesList
-          header={<Typography variant="body2">Hashing It Out</Typography>}
-          episodes={latestEpisodes.slice(0, 4)}
-          podcastType={PodcastType.HASHING_IT_OUT}
-        />
+        <Section>
+          <EpisodesList
+            header={<Typography variant="body2">State of Network</Typography>}
+            episodes={latestEpisodes.slice(0, 4)}
+            podcastType={PodcastType.NETWORK_STATE}
+          />
+        </Section>
+
+        <Section>
+          <EpisodesList
+            header={<Typography variant="body2">Hashing It Out</Typography>}
+            episodes={latestEpisodes.slice(0, 4)}
+            podcastType={PodcastType.HASHING_IT_OUT}
+          />
+        </Section>
       </PodcastsBodyContainer>
     </PodcastsGrid>
   )
@@ -52,4 +59,8 @@ const PodcastsGrid = styled(Grid)`
   }
 `
 
+const Section = styled.div`
+  margin-top: 140px;
+`
+
 export default PodcastsContainer
diff --git a/src/pages/podcasts/[showSlug]/index.tsx b/src/pages/podcasts/[showSlug]/index.tsx
index c3fbb1f..4607de4 100644
--- a/src/pages/podcasts/[showSlug]/index.tsx
+++ b/src/pages/podcasts/[showSlug]/index.tsx
@@ -5,30 +5,37 @@ import { ReactNode } from 'react'
 import { LPE } from '../../../types/lpe.types'
 import PodcastsLayout from '@/layouts/PodcastsLayout/Podcasts.layout'
 
-type PodcastShowProps = {
-  data: LPE.Podcast.Document
+import TEMP_DATA from '../podcasts-temp-data.json'
+import PodcastShowContainer from '@/containers/PodcastShowContainer'
+
+interface PodcastShowProps {
+  show: LPE.Podcast.Show
+  latestEpisodes: LPE.Podcast.Document[]
   errors: string | null
 }
 
-const PodcastShowPage = ({ data, errors }: PodcastShowProps) => {
+const PodcastShowPage = ({
+  show,
+  latestEpisodes,
+  errors,
+}: PodcastShowProps) => {
   const {
     query: { showSlug },
   } = useRouter()
 
-  if (!data) return null
+  if (!show) return null
   if (errors) return <div>{errors}</div>
 
   return (
     <>
       <SEO
-        title={data.title}
-        description={data.description}
-        image={data.coverImage}
+        title={show.title}
+        description={show.description}
         imageUrl={undefined}
         pagePath={`/podcasts/${showSlug}`}
-        tags={[...data?.tags]}
+        tags={[]}
       />
-      <div style={{ marginTop: '200px' }}>Single Podcasts Page WIP</div>
+      <PodcastShowContainer show={show} latestEpisodes={latestEpisodes} />
     </>
   )
 }
@@ -42,6 +49,7 @@ export async function getStaticPaths() {
 }
 
 export const getStaticProps = async ({ params }: GetStaticPropsContext) => {
+  const { shows, latestEpisodes } = TEMP_DATA
   const { showSlug } = params!
 
   if (!showSlug) {
@@ -53,7 +61,8 @@ export const getStaticProps = async ({ params }: GetStaticPropsContext) => {
 
   return {
     props: {
-      data: { tags: ['Social', 'Political'] },
+      show: shows[0],
+      latestEpisodes,
       error: null,
     },
   }
diff --git a/src/pages/podcasts/podcasts-temp-data.json b/src/pages/podcasts/podcasts-temp-data.json
index c065104..7515468 100644
--- a/src/pages/podcasts/podcasts-temp-data.json
+++ b/src/pages/podcasts/podcasts-temp-data.json
@@ -7,7 +7,15 @@
       "numberOfEpisodes": 0,
       "hosts": [
         {
-          "name": "Host",
+          "name": "Corey Petty",
+          "emailAddress": "host@gmail.com"
+        },
+        {
+          "name": "Jessie Santiag",
+          "emailAddress": "host@gmail.com"
+        },
+        {
+          "name": "Demetrick Ferguson",
           "emailAddress": "host@gmail.com"
         }
       ],