From da610338e13ce7ca42741fcbf39f2c137dbea09c Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Sat, 19 Aug 2023 03:00:28 +0900
Subject: [PATCH] chore: remove duplicate cards

---
 .../Footer/Episode.MoreEpisodesCard.tsx       |  76 ----------
 .../Footer/Episode.RelatedEpisodes.tsx        |  62 +++++---
 src/components/Podcasts/EpisodeCard.tsx       | 135 ------------------
 3 files changed, 45 insertions(+), 228 deletions(-)
 delete mode 100644 src/components/Episode/Footer/Episode.MoreEpisodesCard.tsx
 delete mode 100644 src/components/Podcasts/EpisodeCard.tsx

diff --git a/src/components/Episode/Footer/Episode.MoreEpisodesCard.tsx b/src/components/Episode/Footer/Episode.MoreEpisodesCard.tsx
deleted file mode 100644
index 1c95926..0000000
--- a/src/components/Episode/Footer/Episode.MoreEpisodesCard.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { LPE } from '@/types/lpe.types'
-import { Typography } from '@acid-info/lsd-react'
-import styled from '@emotion/styled'
-import Image from 'next/image'
-import Link from 'next/link'
-
-type Props = {
-  coverImage: LPE.Image.Document
-  title: string
-  publishedAt: string
-  slug: string
-}
-
-const MoreEpisodesCard = ({ coverImage, title, publishedAt, slug }: Props) => {
-  const date = new Date(publishedAt)
-
-  return (
-    <Container>
-      {coverImage?.url && (
-        <CustomLink href={`/podcasts/${slug}`}>
-          <ImageContainer>
-            <Image src={coverImage.url} fill alt={coverImage.alt} />
-          </ImageContainer>
-        </CustomLink>
-      )}
-
-      <Row>
-        <Typography variant="body3" genericFontFamily="sans-serif">
-          PODCAST
-        </Typography>
-        <Typography variant="body3">•</Typography>
-        <Typography variant="body3" genericFontFamily="sans-serif">
-          {date &&
-            date.toLocaleString('en-GB', {
-              day: 'numeric',
-              month: 'long', // TODO: Should be uppercase
-              year: 'numeric',
-            })}
-        </Typography>
-      </Row>
-      <CustomLink href={`/podcasts/${slug}`}>
-        <Typography variant="h6" genericFontFamily="serif">
-          {title}
-        </Typography>
-      </CustomLink>
-    </Container>
-  )
-}
-
-const Container = styled.div`
-  margin-block: 24px;
-  display: flex;
-  flex-direction: column;
-  width: 48%;
-`
-
-const ImageContainer = styled.div`
-  width: 100%;
-  height: 190px;
-  position: relative;
-  margin-bottom: 16px;
-`
-
-const Row = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-`
-
-const CustomLink = styled(Link)`
-  text-decoration: none;
-`
-
-export default MoreEpisodesCard
diff --git a/src/components/Episode/Footer/Episode.RelatedEpisodes.tsx b/src/components/Episode/Footer/Episode.RelatedEpisodes.tsx
index 0a21d98..87577e4 100644
--- a/src/components/Episode/Footer/Episode.RelatedEpisodes.tsx
+++ b/src/components/Episode/Footer/Episode.RelatedEpisodes.tsx
@@ -1,8 +1,8 @@
 import { Button, Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
-import MoreEpisodesCard from './Episode.MoreEpisodesCard'
 import { useState } from 'react'
 import { LPE } from '@/types/lpe.types'
+import { PostCard } from '@/components/PostCard'
 
 type props = {
   podcastSlug: string
@@ -18,26 +18,54 @@ const RelatedEpisodes = ({ podcastSlug, relatedEpisodes }: props) => {
       <EpisodeCards>
         {relatedEpisodes && showMore
           ? relatedEpisodes.map((episode: any, idx: number) => (
-              <MoreEpisodesCard
+              <PostCard
                 key={'related-episode' + idx}
-                coverImage={episode.coverImage}
-                title={episode.title}
-                publishedAt={episode.publishedAt}
-                slug={`${podcastSlug}/${episode.slug}`}
+                contentType={LPE.PostTypes.Podcast}
+                data={{
+                  authors: episode.authors,
+                  date: episode.publishedAt
+                    ? new Date(episode.publishedAt)
+                    : null,
+                  slug: episode.show?.slug
+                    ? `${episode.show?.slug}/${episode.slug}`
+                    : `${podcastSlug}/${episode.slug}`,
+                  title: episode.title,
+                  coverImage: episode.coverImage,
+                  tags: episode.tags,
+                  podcastShowDetails: {
+                    title: episode.title,
+                    slug: `${episode.show?.slug}`,
+                    episodeNumber: episode.episodeNumber,
+                    podcast: episode.show as LPE.Podcast.Show,
+                  },
+                }}
               />
             ))
           : relatedEpisodes && !showMore
-          ? relatedEpisodes
-              .slice(0, 4)
-              .map((episode: any, idx: number) => (
-                <MoreEpisodesCard
-                  key={'related-episode' + idx}
-                  coverImage={episode.coverImage}
-                  title={episode.title}
-                  publishedAt={episode.publishedAt}
-                  slug={`${podcastSlug}/${episode.slug}`}
-                />
-              ))
+          ? relatedEpisodes.slice(0, 4).map((episode: any, idx: number) => (
+              <PostCard
+                key={'related-episode' + idx}
+                contentType={LPE.PostTypes.Podcast}
+                data={{
+                  authors: episode.authors,
+                  date: episode.publishedAt
+                    ? new Date(episode.publishedAt)
+                    : null,
+                  slug: episode.show?.slug
+                    ? `${episode.show?.slug}/${episode.slug}`
+                    : `${podcastSlug}/${episode.slug}`,
+                  title: episode.title,
+                  coverImage: episode.coverImage,
+                  tags: episode.tags,
+                  podcastShowDetails: {
+                    title: episode.title,
+                    slug: `${episode.show?.slug}`,
+                    episodeNumber: episode.episodeNumber,
+                    podcast: episode.show as LPE.Podcast.Show,
+                  },
+                }}
+              />
+            ))
           : null}
       </EpisodeCards>
       <ShowButton onClick={() => setShowMore(!showMore)}>
diff --git a/src/components/Podcasts/EpisodeCard.tsx b/src/components/Podcasts/EpisodeCard.tsx
deleted file mode 100644
index e45a2b8..0000000
--- a/src/components/Podcasts/EpisodeCard.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-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'
-
-export enum Size {
-  SMALL = 'small',
-  LARGE = 'large',
-}
-
-interface Props {
-  podcast: string
-  episode: LPE.Podcast.Document
-  size?: Size
-}
-
-export default function EpisodeCard({
-  podcast,
-  episode,
-  size = Size.SMALL,
-  ...props
-}: Props) {
-  const _title = useMemo(
-    () => (
-      <TitleLink href={`/podcasts/${podcast}/${episode.slug}`}>
-        <Title
-          variant={size === Size.SMALL ? 'h4' : 'h3'}
-          genericFontFamily="serif"
-        >
-          {episode.title}
-        </Title>
-      </TitleLink>
-    ),
-    [podcast, episode],
-  )
-
-  const _thumbnail = useMemo(() => {
-    if (!episode.coverImage) return null
-
-    return (
-      <Link href={`/podcasts/${podcast}/${episode.slug}`}>
-        <ResponsiveImage data={episode.coverImage} />
-      </Link>
-    )
-  }, [podcast, episode])
-
-  const _header = useMemo(() => {
-    const date = new Date(episode.publishedAt)
-    return (
-      <>
-        <>
-          <Row>
-            <Typography variant="body3" genericFontFamily="sans-serif">
-              PODCAST
-            </Typography>
-            <Typography variant="body3">•</Typography>
-            <Typography variant="body3" genericFontFamily="sans-serif">
-              {date &&
-                date.toLocaleString('en-GB', {
-                  day: 'numeric',
-                  month: 'long', // TODO: Should be uppercase
-                  year: 'numeric',
-                })}
-            </Typography>
-          </Row>
-          {_title}
-        </>
-      </>
-    )
-  }, [episode, _title])
-
-  return (
-    <Container {...props}>
-      {_thumbnail}
-      {_header}
-    </Container>
-  )
-}
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  position: 'relative';
-  gap: 16px;
-`
-
-const Row = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-`
-
-const CustomTypography = styled(Typography)`
-  text-overflow: ellipsis;
-  overflow: hidden;
-  word-break: break-word;
-`
-
-const PodcastAuthor = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-`
-
-const TitleLink = styled(Link)`
-  text-decoration: none;
-  width: fit-content;
-`
-
-const HeaderContainer = styled(CustomTypography)<{ isFeatured: boolean }>`
-  @media (min-width: 768px) {
-    margin-right: ${({ isFeatured }) => (isFeatured ? '178px' : '0px')};
-  }
-`
-
-const Description = styled(CustomTypography)<{ isFeatured: boolean }>`
-  @media (min-width: 768px) {
-    margin-right: ${({ isFeatured }) => (isFeatured ? '178px' : '0px')};
-  }
-  @media (max-width: 768px) {
-    font-size: 14px;
-    line-height: 20px;
-  }
-`
-
-const Title = styled(CustomTypography)`
-  @media (max-width: 768px) {
-    font-size: 28px;
-    line-height: 36px;
-  }
-`