Skip to content

Commit e2eb444

Browse files
nmayurnmayur
committed
pagination updates
1 parent 3062dfc commit e2eb444

File tree

4 files changed

+151
-122
lines changed

4 files changed

+151
-122
lines changed

‎pages/_app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import '../src/styles/globals.scss'
33
import type { AppProps } from 'next/app'
44
import Head from 'next/head'
55

6-
import { DefaultSeo, NextSeo } from "next-seo";
6+
import { NextSeo } from "next-seo";
77
import Footer from '../src/components/Footer';
88
import Script from 'next/script';
99
import * as gtag from '../google';

‎pages/blog/index.tsx‎

Lines changed: 4 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,7 @@
1-
import ArticleCard from "../../src/components/ArticleCards/ArticleCard";
2-
import { SORTED_ARTICLES_BY_DATE } from "../../BLOG_CONSTANTS/_ARTICLES_LIST";
3-
import { useRouter } from "next/router";
4-
import { PageLayout } from "../../src/components";
5-
import { combineClasses } from "../../src/utils/utils";
6-
import ReactPaginate from "react-paginate";
7-
import { useEffect, useState } from "react";
8-
import { iArticle } from "../../src/shared/interfaces";
9-
import { AiFillCaretRight, AiFillCaretLeft } from "react-icons/ai";
1+
import BlogIndexPage from "../../src/components/BlogIndexPage";
102

11-
const Categories = () => {
12-
const router = useRouter();
13-
const { category, author } = router.query;
14-
const categoryArticles = SORTED_ARTICLES_BY_DATE.filter(
15-
(each) => each.preview.category === category
16-
);
17-
const authorArticles = SORTED_ARTICLES_BY_DATE.filter(
18-
(each) => each.preview.author.name === author
19-
);
20-
const articles = category
21-
? categoryArticles
22-
: author
23-
? authorArticles
24-
: SORTED_ARTICLES_BY_DATE;
25-
26-
const [currentItems, setCurrentItems] = useState([] || null);
27-
const [pageCount, setPageCount] = useState(0);
28-
const [itemOffset, setItemOffset] = useState(0);
29-
const itemsPerPage = 6;
30-
31-
useEffect(() => {
32-
const endOffset = itemOffset + itemsPerPage;
33-
setCurrentItems(articles.slice(itemOffset, endOffset) as any);
34-
setPageCount(Math.ceil(articles.length / itemsPerPage));
35-
}, [itemOffset, itemsPerPage]);
36-
37-
const handlePageClick = (event: any) => {
38-
const newOffset = (event.selected * itemsPerPage) % articles.length;
39-
setItemOffset(newOffset);
40-
};
41-
42-
return (
43-
<PageLayout home>
44-
<div
45-
className={combineClasses(
46-
"container mt-10 md:pt-0 px-0 md:px-3",
47-
category ? "pt-10" : "pt-14"
48-
)}
49-
>
50-
{category || author ? (
51-
<h1
52-
className="px-2 mb-[30px] text-[45px] font-bold"
53-
style={{ textTransform: "capitalize" }}
54-
>
55-
{category || author}
56-
<hr className="mt-[10px]" />
57-
</h1>
58-
) : null}
59-
60-
<div className="flex flex-wrap">
61-
{currentItems
62-
? (currentItems as any).map((each: iArticle, i: any) => (
63-
<ArticleCard article={each.preview} path={each.path} key={i} />
64-
))
65-
: null}
66-
</div>
67-
68-
<ReactPaginate
69-
breakLabel="..."
70-
nextLabel={<AiFillCaretRight />}
71-
onPageChange={handlePageClick}
72-
pageRangeDisplayed={1}
73-
pageCount={pageCount}
74-
previousLabel={<AiFillCaretLeft />}
75-
containerClassName="pagination"
76-
activeClassName="active"
77-
/>
78-
</div>
79-
</PageLayout>
80-
);
3+
const AllArticles = () => {
4+
return <BlogIndexPage articlesPerPage={6} />;
815
};
826

83-
export default Categories;
7+
export default AllArticles;

‎src/components/BlogIndexPage/index.tsx‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import ArticleCard from "../../components/ArticleCards/ArticleCard";
2+
import { SORTED_ARTICLES_BY_DATE } from "../../../BLOG_CONSTANTS/_ARTICLES_LIST";
3+
import { useRouter } from "next/router";
4+
import { PageLayout } from "../../components";
5+
import { combineClasses } from "../../utils/utils";
6+
import ReactPaginate from "react-paginate";
7+
import { useEffect, useState } from "react";
8+
import { iArticle } from "../../shared/interfaces";
9+
import { AiFillCaretRight, AiFillCaretLeft } from "react-icons/ai";
10+
11+
const BlogIndexPage = ({ articlesPerPage = 6 }: { articlesPerPage?: number }) => {
12+
const router = useRouter();
13+
const { category, author } = router.query;
14+
const categoryArticles = SORTED_ARTICLES_BY_DATE.filter(
15+
(each) => each.preview.category === category
16+
);
17+
const authorArticles = SORTED_ARTICLES_BY_DATE.filter(
18+
(each) => each.preview.author.name === author
19+
);
20+
21+
const [ARTICLES, setARTICLES] = useState(SORTED_ARTICLES_BY_DATE);
22+
23+
useEffect(() => {
24+
setARTICLES(
25+
category
26+
? categoryArticles
27+
: author
28+
? authorArticles
29+
: SORTED_ARTICLES_BY_DATE
30+
);
31+
}, [category, author]);
32+
33+
const [currentItems, setCurrentItems] = useState(ARTICLES);
34+
const [pageCount, setPageCount] = useState(0);
35+
const [itemOffset, setItemOffset] = useState(0);
36+
37+
useEffect(() => {
38+
const endOffset = itemOffset + articlesPerPage;
39+
setCurrentItems(ARTICLES.slice(itemOffset, endOffset));
40+
setPageCount(Math.ceil(ARTICLES.length / articlesPerPage));
41+
}, [itemOffset, articlesPerPage, ARTICLES]);
42+
43+
const handlePageClick = (event: any) => {
44+
const newOffset = (event.selected * articlesPerPage) % ARTICLES.length;
45+
setItemOffset(newOffset);
46+
};
47+
48+
return (
49+
<PageLayout home>
50+
<div
51+
className={combineClasses(
52+
"container mt-10 md:pt-0 px-0 md:px-3",
53+
category ? "pt-10" : "pt-14"
54+
)}
55+
>
56+
{category || author ? (
57+
<h1
58+
className="px-2 mb-[30px] text-[45px] font-bold"
59+
style={{ textTransform: "capitalize" }}
60+
>
61+
{category || author}
62+
<hr className="mt-[10px]" />
63+
</h1>
64+
) : null}
65+
66+
<div className="flex flex-wrap">
67+
{currentItems
68+
? (currentItems as any).map((each: iArticle, i: any) => (
69+
<ArticleCard article={each.preview} path={each.path} key={i} />
70+
))
71+
: null}
72+
</div>
73+
74+
<ReactPaginate
75+
breakLabel="..."
76+
nextLabel={<AiFillCaretRight />}
77+
onPageChange={handlePageClick}
78+
pageRangeDisplayed={1}
79+
pageCount={pageCount}
80+
previousLabel={<AiFillCaretLeft />}
81+
containerClassName="pagination"
82+
activeClassName="active"
83+
/>
84+
</div>
85+
</PageLayout>
86+
);
87+
};
88+
89+
export default BlogIndexPage;

‎src/components/Misc/NavCategoryDD.tsx‎

Lines changed: 57 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,63 @@ import { combineClasses, getCategories } from "../../utils/utils";
33
import LinkTo from "../LinkTo";
44

55
interface INavCatergoryDD {
6-
openDD: boolean,
7-
setOpenDD: any,
8-
label: string,
9-
floating?: boolean
6+
openDD: boolean;
7+
setOpenDD: any;
8+
label: string;
9+
floating?: boolean;
1010
}
1111

12-
const NavCatergoryDD = ({ openDD, setOpenDD, label, floating = false }: INavCatergoryDD) => {
13-
const CATEGORIES = getCategories();
14-
return (
15-
<>
16-
<div className={"relative"}>
17-
<div className={combineClasses('flex items-center cursor-pointer', floating ? 'mx-2' : 'justify-between')} onClick={() => setOpenDD(!openDD)}>
18-
<p className='my-0'>
19-
{label}
20-
</p>
21-
<BiChevronDown className="text-[20px]" />
22-
</div>
23-
<div
24-
className={
25-
combineClasses(
26-
'overflow-auto',
27-
floating ?
28-
'absolute w-[180px] z-20 top-[30px] rounded-[4px] shadow-lg bg-white dark:bg-slate-800 border border-gray-300 dark:border-0'
29-
: 'relative',
30-
openDD ? 'h-auto' : 'h-0 border-0'
31-
)}
32-
>
33-
<LinkTo href={'/blog'} passHref className='block text-sm py-2 px-2'>
34-
All Articles
35-
</LinkTo>
36-
{
37-
CATEGORIES.map(each => (
38-
<LinkTo href={"/blog?category=" + each} key={each} passHref className='block text-sm py-2 px-2 border-t border-gray-400'>
39-
<span style={{ textTransform: 'capitalize' }}>{each}</span>
40-
</LinkTo>
41-
))
42-
}
43-
</div>
44-
</div>
45-
</>
46-
)
47-
}
12+
const NavCatergoryDD = ({
13+
openDD,
14+
setOpenDD,
15+
label,
16+
floating = false,
17+
}: INavCatergoryDD) => {
18+
const CATEGORIES = getCategories();
19+
return (
20+
<>
21+
<div className={"relative"}>
22+
<div
23+
className={combineClasses(
24+
"flex items-center cursor-pointer",
25+
floating ? "mx-2" : "justify-between"
26+
)}
27+
onClick={() => setOpenDD(!openDD)}
28+
>
29+
<p className="my-0">{label}</p>
30+
<BiChevronDown className="text-[20px]" />
31+
</div>
32+
<div
33+
className={combineClasses(
34+
"overflow-auto",
35+
floating
36+
? "absolute w-[180px] z-20 top-[30px] rounded-[4px] shadow-lg bg-white dark:bg-slate-800 border border-gray-300 dark:border-0"
37+
: "relative",
38+
openDD ? "h-auto" : "h-0 border-0"
39+
)}
40+
>
41+
<LinkTo href={"/blog"} passHref className="block text-sm py-2 px-2">
42+
<span onClick={() => setOpenDD(!openDD)}>All Articles</span>
43+
</LinkTo>
44+
{CATEGORIES.map((each) => (
45+
<LinkTo
46+
href={"/blog?category=" + each}
47+
key={each}
48+
passHref
49+
className="block text-sm py-2 px-2 border-t border-gray-400"
50+
>
51+
<span
52+
style={{ textTransform: "capitalize" }}
53+
onClick={() => setOpenDD(!openDD)}
54+
>
55+
{each}
56+
</span>
57+
</LinkTo>
58+
))}
59+
</div>
60+
</div>
61+
</>
62+
);
63+
};
4864

49-
export default NavCatergoryDD
65+
export default NavCatergoryDD;

0 commit comments

Comments
 (0)