pagination

src/Pages/EquipmentDocumentation/ViewEquipmentDocumentation.js

@@ -2,6 +2,7 @@ import {
   Button,
   Card,
   Col,
+  Pagination,
   Popover,
   Result,
   Row,
@@ -44,11 +45,15 @@ export default function ViewEquipmentDocumentations({
     useState(null);
   const [isEquipmentDocumentationLoading, setIsEquipmentDocumentationLoading] =
     useState(false);
+  const [paginationPage, setPaginationPage] = useState(1);
 
-  const fetchDocumentation = () => {
+  const fetchDocumentation = (page = 1) => {
     setIsEquipmentDocumentationLoading(true);
 
-    myFetch(`/equipment/documentations/${paramStockId}`, "GET").then((data) => {
+    myFetch(
+      `/equipment/documentations/${paramStockId}?page=${page}`,
+      "GET"
+    ).then((data) => {
       const updatedData = { ...data };
 
       // sort by date
@@ -62,7 +67,19 @@ export default function ViewEquipmentDocumentations({
     });
   };
 
-  useEffect(() => fetchDocumentation(), [paramStockId]);
+  useEffect(() => {
+    if (paginationPage === 1) {
+      fetchDocumentation(1);
+    } else {
+      setPaginationPage(1);
+    }
+  }, [paramStockId]);
+
+  // triggers on page load
+  //useEffect(() => fetchDocumentation(), [paramStockId]);
+
+  // triggers on pagination change
+  useEffect(() => fetchDocumentation(paginationPage), [paginationPage]);
 
   const CreateEquipmentDocumentationButton = ({ buttonBlock }) => {
     if (
@@ -309,6 +326,14 @@ export default function ViewEquipmentDocumentations({
         )
       )}
 
+      <Pagination
+        style={{ marginTop: AppStyle.app.margin, textAlign: "right" }}
+        showSizeChanger={false}
+        defaultCurrent={paginationPage}
+        onChange={(page) => setPaginationPage(page)}
+        total={equipmentDocumentationResponse.TotalPages * 10}
+      />
+
       <EditEquipmentDocumentationModal
         isOpen={isEditEquipmentDocumentationModalOpen}
         stockItemId={paramStockId}