Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import Head from 'next/head'
import Layout, { siteTitle } from '../components/newLayout'
import Link from 'next/link'
import Date from '../components/date'
import Title from '../components/title';
import React, {useEffect, useState} from 'react';
import styles from './blog.module.css'
import Card from 'react-bootstrap/cjs/Card';
import ReactPaginate from 'react-paginate'
import {Router, withRouter} from "next/router"
import {server} from "../config";
import {Spinner} from "react-bootstrap";
const Blog = (props) => {
const [isLoading, setLoading] = useState(false);
const startLoading = () => setLoading(true);
const stopLoading = () => setLoading(false);
useEffect(() => { //After the component is mounted set router event handlers
Router.events.on('routeChangeStart', startLoading);
Router.events.on('routeChangeComplete', stopLoading);
return () => {
Router.events.off('routeChangeStart', startLoading);
Router.events.off('routeChangeComplete', stopLoading);
}
}, [])
const paginationHandler = (page) => {
const currentPath = props.router.pathname;
const currentQuery = props.router.query;
currentQuery.page = page.selected + 1;
props.router.push({
pathname: currentPath,
query: currentQuery,
})
}
let content;
if (isLoading) {
content = (
<div className={styles.loadWrapper}>
<Spinner animation="border" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
</div>
)
} else {
//Generating posts list
content = (
<>
{props.posts.map(({ id, date, title, image, description }) => (
<Card className={styles.item}>
<Card.Img variant="top" src={image} width={360} height={215} />
<Card.Body>
<Card.Title>
<Link href={`/posts/${id}`}>
<a>
{title}
</a>
</Link>
</Card.Title>
<Card.Subtitle className="mb-2 text-muted"><Date dateString={date} /></Card.Subtitle>
<Card.Text>
{description}
</Card.Text>
</Card.Body>
</Card>
))}
</>
);
}
return (
<Layout page={"blog"}>
<Head>
<title>{siteTitle} - Blog</title>
</Head>
<Title preTitle={"Welcome to my "} title={"Blog"} subtitle={"Sharing my wisdom since 2021"} />
<div className={"container-md"}>
<div className={styles.wrapper}>
{content}
</div>
<ReactPaginate
previousLabel={'<'}
nextLabel={'>'}
breakLabel={'...'}
breakClassName={'break-me'}
activeClassName={'active'}
containerClassName={'pagination'}
subContainerClassName={'pages pagination'}
initialPage={props.currentPage - 1}
pageCount={props.pageCount}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={paginationHandler}
/>
</div>
</Layout>
)
}
Blog.getInitialProps = async ({ query }) => {
const page = query.page || 1; //if page empty we request the first page
const response = await fetch(`${server}/api/posts/${page}`)
const posts = await response.json()
return {
totalCount: posts.totalCount,
pageCount: posts.pageCount,
currentPage: posts.currentPage,
perPage: posts.perPage,
posts: posts.posts,
};
}
export default withRouter(Blog)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment