48 lines
No EOL
1.6 KiB
JavaScript
48 lines
No EOL
1.6 KiB
JavaScript
import ReactPaginate from "react-paginate";
|
|
import { useRouter } from "next/router";
|
|
import Link from 'next/link'
|
|
|
|
const EpisodePager = ({ episodedata, config, showdata }) => {
|
|
const router = useRouter()
|
|
|
|
const handlePagination = page => {
|
|
const path = router.pathname
|
|
const query = router.query
|
|
query.page = page.selected + 1
|
|
router.push({
|
|
pathname: path,
|
|
query: query,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="episode_pages col-xs-12">
|
|
<div className="show_episodes">
|
|
{episodedata.episodes.map((episode) => (
|
|
<div key={episode.slug} className="episode">
|
|
<div className="episode_title" id ={episode.episode_slug}>
|
|
<Link href={episode.show_slug + "/" + episode.episode_slug}>{episode.title}</Link>
|
|
</div>
|
|
<div className="content-date">
|
|
{episode.episode_published}
|
|
</div>
|
|
|
|
<div className="episode_body" dangerouslySetInnerHTML={{ __html: episode.episode_lead}}></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<ReactPaginate
|
|
marginPagesDisplayed={2}
|
|
pageRangeDisplayed={5}
|
|
previousLabel={"previous"}
|
|
nextLabel={"next"}
|
|
breakLabel={"..."}
|
|
initialPage={episodedata.curPage - 1}
|
|
pageCount={2}
|
|
onPageChange={handlePagination}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default EpisodePager |