acid-info/logos-press-engine
1
0
Fork 0
mirror of https://github.com/acid-info/logos-press-engine.git synced 2025-02-23 14:48:08 +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[] relatedEpisodes: LPE.Podcast.Document[]
} }
const DEFAULT_SHOW_INDEX = 4
const RelatedEpisodes = ({ podcastSlug, relatedEpisodes }: props) => { const RelatedEpisodes = ({ podcastSlug, relatedEpisodes }: props) => {
const [showMore, setShowMore] = useState(false) 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 ( return (
<Container> <Container>
<Typography>More Episodes</Typography> <Typography>More Episodes</Typography>
<EpisodeCards> <EpisodeCards>
{relatedEpisodes && showMore {relatedEpisodes.slice(0, showIndex).map((episode, idx: number) => (
? relatedEpisodes.map((episode: any, idx: number) => ( <PostCard
<PostCard key={'related-episode' + idx}
key={'related-episode' + idx} contentType={LPE.PostTypes.Podcast}
contentType={LPE.PostTypes.Podcast} data={{
data={{ authors: episode.authors,
authors: episode.authors, date: episode.publishedAt ? new Date(episode.publishedAt) : null,
date: episode.publishedAt slug: episode.show?.slug
? new Date(episode.publishedAt) ? `${episode.show?.slug}/${episode.slug}`
: null, : `${podcastSlug}/${episode.slug}`,
slug: episode.show?.slug title: episode.title,
? `${episode.show?.slug}/${episode.slug}` coverImage: episode.coverImage,
: `${podcastSlug}/${episode.slug}`, tags: episode.tags,
title: episode.title, podcastShowDetails: {
coverImage: episode.coverImage, title: episode.title,
tags: episode.tags, slug: `${episode.show?.slug}`,
podcastShowDetails: { episodeNumber: episode.episodeNumber,
title: episode.title, podcast: episode.show as LPE.Podcast.Show,
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}
</EpisodeCards> </EpisodeCards>
<ShowButton onClick={() => setShowMore(!showMore)}> {relatedEpisodes?.length > 4 && (
{showMore ? 'Show less' : 'Show more'} <ShowButton onClick={toggleShowMore}>
</ShowButton> {showMore ? 'Show less' : 'Show more'}
</ShowButton>
)}
</Container> </Container>
) )
} }