diff --git a/src/components/Episode/Episode.Blocks.tsx b/src/components/Episode/Episode.Blocks.tsx index d26f5b8..1e69034 100644 --- a/src/components/Episode/Episode.Blocks.tsx +++ b/src/components/Episode/Episode.Blocks.tsx @@ -11,21 +11,36 @@ type Props = { const getMaxRenderIndex = (isMobile: boolean) => (isMobile ? 7 : 20) +const DEFUALT_RENDER_COUNT = 6 + const EpisodeBlocks = ({ data }: Props) => { const [showMore, setShowMore] = useState(false) const blocks = data?.content as LPE.Post.TextBlock[] const isMobile = useWindowSize().width < 756 + const [count, setCount] = useState(DEFUALT_RENDER_COUNT) + + const handleShowMore = () => { + setCount((prev) => + prev + DEFUALT_RENDER_COUNT > blocks.length + ? blocks.length + : prev + DEFUALT_RENDER_COUNT, + ) + + if (count >= blocks.length) { + setShowMore(false) + } + } return ( - {blocks.map((block, idx) => ( - + {blocks.slice(0, count).map((block, index) => ( + ))} {blocks.length > getMaxRenderIndex(isMobile) && ( - setShowMore(!showMore)}> + {showMore ? 'Show Less' : 'Show More'} )}