Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: pagination on all pages #105

Merged
merged 2 commits into from
Aug 16, 2022
Merged

refactor: pagination on all pages #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5a7db86
chore: remove unused var
grevicoc Aug 16, 2022
fabba9c
resolve conflicts
grevicoc Aug 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/MerchPost.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { MerchPostProps } from '@/types/interface';
import { trimString } from '@/util/util';
import Carousel from './Carousel';

const MerchPost: React.FC<MerchPostProps> = ({ item }: MerchPostProps) => (
Expand All @@ -20,7 +21,7 @@ const MerchPost: React.FC<MerchPostProps> = ({ item }: MerchPostProps) => (
</div>
<div className="h-[25%] text-center bg-Yellow ">
<p className="font-Heading font-semibold text-caption md:text-body md:pt-1">
{item.title}
{trimString(item.title, 30)}
</p>
<p className="font-Body text-caption_smaller md:text-caption font-normal">
{item.price}
Expand Down
134 changes: 82 additions & 52 deletions src/components/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,88 +3,118 @@ import { PaginationProps } from '@/types/interface';
import { BsChevronLeft, BsChevronRight } from 'react-icons/bs';
import { PAGINATION_PER_PAGE } from '@/types/constant';
import { iconSize } from '@/types/enum';
import { generateArray, setupFirstPage } from '@/util/util';

const generateNumbers = (currentPage: number, totalPage: number) => {
let startPage;
let endPage;
if (totalPage > PAGINATION_PER_PAGE) {
startPage =
currentPage - Math.floor(PAGINATION_PER_PAGE / 2) > 0
? currentPage - Math.floor(PAGINATION_PER_PAGE / 2)
: 1;
endPage =
currentPage + Math.floor(PAGINATION_PER_PAGE / 2) > totalPage
? totalPage
: currentPage + Math.floor(PAGINATION_PER_PAGE / 2);
endPage =
endPage === startPage + PAGINATION_PER_PAGE - 1
? endPage
: startPage + PAGINATION_PER_PAGE - 1;
endPage = endPage > totalPage ? totalPage : endPage;
startPage =
startPage === endPage - PAGINATION_PER_PAGE + 1
? startPage
: endPage - PAGINATION_PER_PAGE + 1;
} else {
startPage = 1;
endPage = totalPage;
}

const numbers: number[] = [];
for (let i = startPage; i < endPage + 1; i += 1) {
numbers.push(i);
}

return numbers;
};

const Pagination: React.FC<PaginationProps> = ({
pagination,
page: currentPage,
setPage,
}) => {
const { pages: pageCount } = pagination;
const startPage = setupFirstPage(currentPage, PAGINATION_PER_PAGE);
const endPage = Math.min(startPage + PAGINATION_PER_PAGE, pageCount + 1);
// console.log(pagination);
const [listOfPages, setListOfPages] = useState<number[]>(
generateArray(startPage, endPage)
generateNumbers(1, pageCount)
);

const isChevronLeft = startPage > 1;
const isChevronRight = endPage - 1 < pageCount;
const [showLeftChevron, setShowLeftChevron] = useState(false);
const [showRightChevron, setShowRightChevron] = useState(false);

useEffect(() => {
setListOfPages(generateArray(startPage, endPage));
}, [startPage, endPage]);
const numbers = generateNumbers(currentPage, pageCount);
setShowLeftChevron(numbers[0] !== 1);
setShowRightChevron(
numbers[PAGINATION_PER_PAGE - 1] !== undefined &&
numbers[PAGINATION_PER_PAGE - 1] !== pageCount
);
setListOfPages(numbers);
}, [currentPage]);

const displayPages = listOfPages.map((pageNumber) => {
const isActive = pageNumber === currentPage;
return (
<button
key={`button${pageNumber}`}
className="mx-2"
className={`z-20 w-[13%] ${
isActive ? 'bg-Orange rounded-md' : ''
} flex justify-center items-center`}
onClick={() => {
setPage(pageNumber);
}}
type="button"
>
<p
className={`font-Subheading text-title px-2 text-Black hover:text-Yellow transition ${
isActive
? 'text-Yellow border-solid rounded-lg border-2 border-Orange bg-Orange'
: null
}`}
>
<p className="font-sans font-medium text-caption px-2 text-black transition">
{pageNumber}
</p>
</button>
);
});

return (
<div className="flex flex-row justify-center items-center self-center">
<button
type="button"
onClick={() => {
setListOfPages(
generateArray(
startPage - PAGINATION_PER_PAGE,
startPage
)
);
setPage(startPage - 1);
}}
className={!isChevronLeft ? 'hidden' : undefined}
>
<BsChevronLeft size={iconSize.medium} />
</button>
<>
<div className="w-[13%] flex justify-center items-center">
<button
type="button"
onClick={() => {
setPage(currentPage - 1 > 0 ? currentPage - 1 : 1);
}}
className={`${
!showLeftChevron ? 'hidden' : undefined
} z-20 w-full flex justify-center items-center`}
>
<BsChevronLeft size={iconSize.medium} />
</button>
</div>
{displayPages}
<button
type="button"
onClick={() => {
setListOfPages(
generateArray(
endPage,
Math.min(
endPage + PAGINATION_PER_PAGE,
pageCount + 1
)
)
);
setPage(endPage);
}}
className={!isChevronRight ? 'hidden' : undefined}
>
<BsChevronRight size={iconSize.medium} />
</button>
</div>
<div className="w-[13%] flex justify-center items-center">
<button
type="button"
onClick={() => {
setPage(
currentPage + 1 > pageCount
? pageCount
: currentPage + 1
);
}}
className={`${
!showRightChevron ? 'hidden' : undefined
} z-20 w-full flex justify-center items-center`}
>
<BsChevronRight size={iconSize.medium} />
</button>
</div>
</>
);
};

Expand Down
76 changes: 36 additions & 40 deletions src/pages/Catalogue/Catalogue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,26 @@
import PageTransition from '@/components/PageTransition';
import VistockHome from '@/components/VistockHome';
import React, { useEffect, useState } from 'react';
import { Pagination as PaginationType } from '@tryghost/content-api';
import MerchPost from '@/components/MerchPost';
import { CATALOGUE_TITLE, MAX_POST } from '@/types/constant';
import Pagination from '@/components/Pagination';
import { CATALOGUE_TITLE } from '@/types/constant';
import { data } from './MerchList';

const LIMIT_CATALOGUE = 6;

const Catalogue: React.FC<{}> = () => {
const [page, setPage] = useState<number>(1);
const [pagination, setPagination] = useState<PaginationType>({
page,
limit: MAX_POST,
pages: Math.ceil(data.length / MAX_POST),
total: data.length,
next: page !== Math.ceil(data.length / MAX_POST) ? page + 1 : null,
prev: page !== 1 ? page - 1 : null,
});
const [currentPage, setCurrentPage] = useState(1);
const [merchs, setMerchs] = useState<JSX.Element[]>([]);

useEffect(() => {
setPagination({
...pagination,
page,
pages: Math.ceil(data.length / MAX_POST),
total: data.length,
next: page !== Math.ceil(data.length / MAX_POST) ? page + 1 : null,
prev: page !== 1 ? page - 1 : null,
});
}, [page, data]);
const offsetData = (currentPage - 1) * LIMIT_CATALOGUE;
const shownData = data.slice(offsetData, offsetData + LIMIT_CATALOGUE);
const shownPosts = shownData.map((item) => (
<MerchPost key={item.title} item={item} />
));
setMerchs(shownPosts);
}, [currentPage]);

return (
<PageTransition>
<div>
Expand All @@ -37,28 +31,30 @@ const Catalogue: React.FC<{}> = () => {
{CATALOGUE_TITLE}
</p>
<div className="py-10">
<div className="flex justify-center">
<div className="grid place-items-stretch lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-6 bg-LightBrown py-6 px-6 rounded-lg">
{data
.slice(
(page - 1) * MAX_POST,
page * MAX_POST
)
.map((item) => (
<MerchPost
key={item.title}
item={item}
/>
))}
<div className="container max-w-max xl:max-w-screen-xl mx-auto">
<div className="flex justify-center relative pt-9">
<div className="bg-LightBrown absolute top-0 right-[10%] lg:right-[14%] rounded-md flex flex-row justify-between items-center self-center w-44 h-10">
<Pagination
pagination={{
pages: Math.ceil(
data.length /
LIMIT_CATALOGUE
),
page: 0,
limit: 0,
prev: 0,
next: 0,
total: 0,
}}
page={currentPage}
setPage={setCurrentPage}
/>
</div>
<div className="grid place-items-stretch xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-2 sm:grid-cols-1 gap-6 bg-LightBrown py-6 px-6 rounded-lg">
{merchs}
</div>
</div>
</div>
<div className="my-4">
<Pagination
pagination={pagination}
page={page}
setPage={setPage}
/>
</div>
</div>
</div>
</div>
Expand Down
30 changes: 15 additions & 15 deletions src/pages/Homepage/Homepage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,24 +75,24 @@ const Homepage: React.FC<{}> = () => {
<VistockHome />
<div className="py-10">
<div className="container max-w-[92.5vw] xl:max-w-screen-xl mx-auto">
<div className="my-4">
<Pagination
pagination={posts.meta.pagination}
page={page}
setPage={setPage}
/>
</div>
<div className="flex justify-center">
<div className="flex justify-center drop-shadow-2xl rounded-lg pt-9 relative">
<div className="bg-LightBrown absolute top-0 right-[10%] lg:right-[6%] rounded-md flex flex-row justify-between items-center self-center w-44 h-10">
<Pagination
pagination={posts.meta.pagination}
page={page}
setPage={setPage}
/>
</div>
<div className="grid place-items-stretch lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-6 bg-LightBrown py-6 px-6 rounded-lg">
{blogPostElements}
</div>
</div>
<div className="my-4">
<Pagination
pagination={posts.meta.pagination}
page={page}
setPage={setPage}
/>
{/* <div className="bg-LightBrown absolute right-8 rounded-md flex flex-row justify-between items-center self-center w-44 h-10">
<Pagination
pagination={posts.meta.pagination}
page={page}
setPage={setPage}
/>
</div> */}
</div>
<div className="relative bg-LightBrown py-6 px-2 mt-16 rounded-lg flex flex-col justify-center">
<div className="flex relative h-[36px] justify-center my-auto">
Expand Down
Loading