diff --git a/src/Pages/EquipmentDocumentation/ViewEquipmentDocumentation.js b/src/Pages/EquipmentDocumentation/ViewEquipmentDocumentation.js index 0605c50..1ee12a4 100644 --- a/src/Pages/EquipmentDocumentation/ViewEquipmentDocumentation.js +++ b/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({ ) )} + setPaginationPage(page)} + total={equipmentDocumentationResponse.TotalPages * 10} + /> +