PavlikPolivka/blog.js

## blog.js
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)
	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)