PagiNation total count

src/views/Board/BoardList.tsx

@@ -1,14 +1,14 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext, useRef } from "react";
 import axios from "axios";
 import { useNavigate } from "react-router-dom"; // Import the useHistory hook
 import { Board } from "../../interface/BoardListDto";
-import { ProgressSpinner } from "primereact/progressspinner";
 import { Button } from "primereact/button";
 import { DataTable } from "primereact/datatable";
 import { Column } from "primereact/column";
 import { InputText } from "primereact/inputtext";
 import { errorHandle } from "../../Common/ErrorHandle";
 import { Dropdown } from "primereact/dropdown";
+import { Paginator } from "primereact/paginator";
 import { SearchOptioninterface } from "../../interface/SearchOption";
 import { dateFormatFunc } from "../../Common/DateFormat";
 import { ActiveIndexContext } from "../../context/ActiveIndexContext";
@@ -21,15 +21,19 @@ import "../../css/BoardList.css";
 const BoardList = () => {
   const [board, setBoard] = useState<Board[]>([]);
   const [boardCategory, setBoardCategory] = useState<BoardCategoryDto[]>([]);
-  const navigate = useNavigate();
   const [inputSearch, setInputSearch] = useState<string>("");
+  const pagiNation = useRef<number>(1);
+  const [totalCount, setTotalCount] = useState<number>(0);
+  const [first, setFirst] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
   const [selectedSearchOption, setSelectedSearchOption] =
     useState<SearchOptioninterface>();
   const { activeIndex, setActiveIndex }: ActiveIndexContextProviderProps =
     useContext(ActiveIndexContext);
   const [cookies, setCookie, removeCookie] = useCookies(["id"]);
   const accessToken = cookies.id;
-  const headers = {Authorization:'Bearer '+accessToken}
+  const headers = {Authorization:'Bearer '+accessToken};
+  const navigate = useNavigate();
   axios.defaults.baseURL = "http://localhost:5000";
 
 
@@ -40,12 +44,14 @@ const BoardList = () => {
 
   const { isSuccess, isError, isLoading, isFetching, data, error } = useQuery(
     'getBoardList',
-    () => axios.get("/board", {headers}),
+    () => axios.get(`/board/?pageNo=${pagiNation.current}`, {headers}),
     {
       onSuccess: (data) => {
         console.log("onSuccess", data);
         console.log(data.data);
+        console.log(data.data.totalPage);
         setBoard(data.data.items);
+        setTotalCount(data.data.totalPage);
       },
       onError: (error) => {
         console.log("onError", error);
@@ -72,6 +78,7 @@ const BoardList = () => {
   }
 
   useEffect(() => {
+    // setFirst(pagiNation.current);
     if(isSuccess && data){
       setBoard(data.data.items);
     }
@@ -146,6 +153,26 @@ const BoardList = () => {
 
   }
 
+  const changePage = async (newPage: number) => {
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      const response = await axios.get(`/board/?pageNo=${newPage}`, { headers });
+      console.log(response);
+      setBoard(response.data.items);
+      setTotalCount(response.data.totalPage);
+    } catch (error) {
+      console.log("Error fetching data:", error);
+    }
+  };
+
+  const onPageChange = (event:any) => {
+    console.log(event);
+    setFirst(event.first);
+    setRowsPerPage(event.rows);
+    pagiNation.current = event.page;
+    changePage(event.page);
+  };
+
   return (
     <div className="card">
       <div style={{marginBottom: "1rem"}}>
@@ -196,7 +223,7 @@ const BoardList = () => {
       <DataTable
         value={board}
         tableStyle={{ minWidth: "50rem" }}
-        paginator
+        // paginator
         rows={10}
         onRowClick={boardState}
       >
@@ -206,6 +233,12 @@ const BoardList = () => {
         <Column field="nickname" header="Nickname"></Column>
         <Column field="dateTime" header="Time"></Column>
       </DataTable>
+      <Paginator
+        first={first}
+        rows={rowsPerPage}
+        totalRecords={totalCount}
+        onPageChange={onPageChange}
+      />
     </div>
   );
 };