Skip to content

Commit

Permalink
Refactor pagination control to component
Browse files Browse the repository at this point in the history
  • Loading branch information
BvChung committed May 12, 2023
1 parent 89ad582 commit 8bbe9f8
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 22 deletions.
51 changes: 51 additions & 0 deletions components/paginationControl.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React from "react";
import { memberType } from "../types/types";
import { AiOutlineArrowLeft, AiOutlineArrowRight } from "react-icons/ai";

type paginationControlProps = {
dataPage: number;
setDataPage: React.Dispatch<React.SetStateAction<number>>;
presentableData: memberType[][];
};

export const PaginationControl = ({
dataPage,
setDataPage,
presentableData,
}: paginationControlProps) => {
function decrementDataPage() {
if (dataPage === 0) return;

setDataPage((prev) => prev - 1);
}

function incrementDataPage() {
if (dataPage === presentableData.length - 1) return;

setDataPage((prev) => prev + 1);
}

return (
<div className="mt-3 flex items-center justify-end">
<button
className="mr-3 rounded-md p-2 text-red-600 hover:bg-gray-500 hover:bg-opacity-30 disabled:text-gray-400 disabled:text-opacity-40 disabled:hover:bg-transparent"
onClick={decrementDataPage}
disabled={dataPage === 0 ? true : false}
>
<AiOutlineArrowLeft className="h-6 w-6" />
</button>

<p className="flex w-fit justify-center font-medium">
Page {dataPage + 1} of {presentableData.length}
</p>

<button
className="ml-3 rounded-md p-2 text-red-600 hover:bg-gray-500 hover:bg-opacity-30 disabled:text-gray-400 disabled:text-opacity-40 disabled:hover:bg-transparent"
onClick={incrementDataPage}
disabled={dataPage === presentableData.length - 1 ? true : false}
>
<AiOutlineArrowRight className="h-6 w-6" />
</button>
</div>
);
};
29 changes: 7 additions & 22 deletions pages/dashboard/members.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { TextInput } from "../../components/textInput";
import { searchSortPaginate } from "../../utils/searchSortPaginate";
import router from "next/router";
import { AiOutlineArrowLeft, AiOutlineArrowRight } from "react-icons/ai";
import { PaginationControl } from "../../components/paginationControl";

const Members: NextPage = () => {
const { data, error, isLoading } = useSWR("/api/members", fetcher);
Expand Down Expand Up @@ -81,7 +82,7 @@ const Members: NextPage = () => {

let presentableData;
if (data) {
presentableData = searchSortPaginate(data, sspConfig);
presentableData = searchSortPaginate(data, sspConfig) as memberType[][];
}

if (error) {
Expand Down Expand Up @@ -218,27 +219,11 @@ const Members: NextPage = () => {
}}
/>

<div className="mt-3 flex items-center justify-end">
<button
className="mr-3 rounded-md p-2 text-red-600 hover:bg-gray-500 hover:bg-opacity-30 disabled:text-gray-400 disabled:text-opacity-40 disabled:hover:bg-transparent"
onClick={decrementDataPage}
disabled={dataPage === 0 ? true : false}
>
<AiOutlineArrowLeft className="h-6 w-6" />
</button>

<p className="flex w-fit justify-center font-medium">
Page {dataPage + 1} of {presentableData.length}
</p>

<button
className="ml-3 rounded-md p-2 text-red-600 hover:bg-gray-500 hover:bg-opacity-30 disabled:text-gray-400 disabled:text-opacity-40 disabled:hover:bg-transparent"
onClick={incrementDataPage}
disabled={dataPage === presentableData.length - 1 ? true : false}
>
<AiOutlineArrowRight className="h-6 w-6" />
</button>
</div>
<PaginationControl
dataPage={dataPage}
presentableData={presentableData}
setDataPage={setDataPage}
/>
</>
) : (
<div className="mt-4 flex flex-col place-content-center">
Expand Down

0 comments on commit 8bbe9f8

Please sign in to comment.