acid-info/logos-press-engine
1
0
Fork 0
mirror of https://github.com/acid-info/logos-press-engine.git synced 2025-02-23 06:38:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: refactor related episodes

Browse Source
This commit is contained in:
jinhojang6 2023-08-19 03:11:57 +09:00
parent da610338e1
commit 52e72f9e65
1 changed files with 35 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/Episode/Footer/Episode.RelatedEpisodes.tsx
View File

@ -9,68 +9,49 @@ type props = {
relatedEpisodes: LPE.Podcast.Document[]
}
const DEFAULT_SHOW_INDEX = 4
const RelatedEpisodes = ({ podcastSlug, relatedEpisodes }: props) => {
const [showMore, setShowMore] = useState(false)
const [showIndex, setShowIndex] = useState(DEFAULT_SHOW_INDEX)
const toggleShowMore = () => {
setShowMore(!showMore)
setShowIndex(!showMore ? relatedEpisodes.length - 1 : DEFAULT_SHOW_INDEX)
}
return (
<Container>
<Typography>More Episodes</Typography>
<EpisodeCards>
{relatedEpisodes && showMore
? relatedEpisodes.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,
},
}}
/>
))
: relatedEpisodes && !showMore
? 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}
{relatedEpisodes.slice(0, showIndex).map((episode, 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,
},
}}
/>
))}
</EpisodeCards>
<ShowButton onClick={() => setShowMore(!showMore)}>
{showMore ? 'Show less' : 'Show more'}
</ShowButton>
{relatedEpisodes?.length > 4 && (
<ShowButton onClick={toggleShowMore}>
{showMore ? 'Show less' : 'Show more'}
</ShowButton>
)}
</Container>
)
}