From 628a310d111b90d766e237dcff941b2f015e5032 Mon Sep 17 00:00:00 2001 From: Prakhar Date: Mon, 9 Oct 2023 12:51:22 +0530 Subject: [PATCH] added pagination --- db.json | 199 ++++++++++---------- package-lock.json | 47 ++--- package.json | 1 + src/components/displayTable/DataDisplay.tsx | 38 +++- src/utils/forminputhandling.ts | 15 +- 5 files changed, 152 insertions(+), 148 deletions(-) diff --git a/db.json b/db.json index 4cae262..980cd60 100644 --- a/db.json +++ b/db.json @@ -2,8 +2,9 @@ "quiz": [ { "id": 1, + "dateCreated": "8/7/2023", "student": { - "testTakers": "csdchsdcn", + "testTakers": "1500", "program": "Himachal Students", "batch": "DL-12-Alpha-Eng-23", "grade": "9", @@ -11,7 +12,7 @@ "stream": "Medical" }, "test": { - "name": "cdsjcnjsnc", + "name": "Physics Rotational", "id": "1", "sessionId": "cdsc", "sessionLink": "cdscdsc", @@ -36,188 +37,194 @@ }, { "student": { - "testTakers": "54654", - "program": "Haryana Students", - "batch": "DL-12-Photon-Eng-23", - "grade": "10", - "course": "Catalyst", + "testTakers": "1000", + "program": "Himachal Students", + "batch": "DL-12-Catalyst-Eng-23", + "grade": "9", + "course": "Certification", "stream": "Maths" }, "test": { - "name": "sfaa", + "name": "Organic Chemistry", "type": "assessment", "format": "major_test", - "purpose": "endline", + "purpose": "baseline", "platform": "Quiz", - "markingScheme": "4,-1", + "markingScheme": "1,0", "optionalLimit": "na" }, "timeline": { - "startDate": "2023-09-19", - "endDate": "2023-09-17", - "startTime": "15:35", - "endTime": "16:35", - "reportSchedule": "lgkhk", - "reportLink": "a", + "startDate": "2023-09-11", + "endDate": "2023-09-09", + "startTime": "14:04", + "endTime": "16:04", + "reportSchedule": "sample", + "reportLink": "tobeGenerated", "isEnabled": true, "sessionType": "infinite", - "synced": false + "synced": true }, + "dateCreated": "9/7/2023", "id": 2 }, { "student": { - "testTakers": "54654", - "program": "Delhi Students", - "batch": "DL-12-Alpha-med-23", + "testTakers": "700", + "program": "Himachal Students", + "batch": "DL-12-Catalyst-Eng-23", "grade": "9", - "course": "Hiring", - "stream": "Medical" + "course": "Certification", + "stream": "Science" }, "test": { - "name": "Prakhar Bansal Resume", - "type": "homework", - "format": "major_test", - "purpose": "monthly_test", + "name": "Biology", + "type": "assessment", + "format": "part_test", + "purpose": "endline", "platform": "Quiz", - "markingScheme": "4,-1", + "markingScheme": "1,0", "optionalLimit": "neet" }, "timeline": { - "startDate": "2023-09-18", - "endDate": "2023-09-20", - "startTime": "14:54", - "endTime": "17:54", - "reportSchedule": "dad", - "reportLink": "halhala", + "startDate": "2023-09-19", + "endDate": "2023-09-24", + "startTime": "18:52", + "endTime": "21:52", + "reportSchedule": "To be generated", + "reportLink": "Sample link", "isEnabled": false, "sessionType": "infinite", - "synced": true + "synced": false }, + "dateCreated": "9/7/2023", "id": 3 }, { "student": { "testTakers": "1000", "program": "Haryana Students", - "batch": "DL-12-Photon-Eng-23", + "batch": "DL-12-Alpha-med-23", "grade": "9", - "course": "Hiring", + "course": "Catalyst", "stream": "Maths" }, "test": { - "name": "faf", - "type": "homework", + "name": "canem", + "type": "assessment", "format": "part_test", - "purpose": "endline", + "purpose": "weekly_test", "platform": "Quiz", "markingScheme": "4,-1", "optionalLimit": "na" }, "timeline": { - "startDate": "2023-09-06", - "endDate": "2023-09-23", - "startTime": "15:03", - "endTime": "18:03", - "reportSchedule": "ljalfa", - "reportLink": "add", + "startDate": "2023-10-04", + "endDate": "2023-10-07", + "startTime": "12:00", + "endTime": "10:02", + "reportSchedule": "lgkhk", + "reportLink": "faass", "isEnabled": true, "sessionType": "infinite", "synced": true }, + "dateCreated": "10/3/2023", "id": 4 }, { "student": { - "testTakers": "1500", - "program": "Delhi Students", + "testTakers": "1000", + "program": "Haryana Students", "batch": "DL-12-Alpha-med-23", - "grade": "11", - "course": "Certification", - "stream": "Physics" + "grade": "9", + "course": "Catalyst", + "stream": "Maths" }, "test": { "name": "canem", - "type": "omr_assessment", - "format": "evaluation_test", - "purpose": "reshuffling_test", + "type": "assessment", + "format": "part_test", + "purpose": "weekly_test", "platform": "Quiz", - "markingScheme": "1,0", - "optionalLimit": "jee" + "markingScheme": "4,-1", + "optionalLimit": "na" }, "timeline": { - "startDate": "2023-09-25", - "endDate": "2023-09-30", - "startTime": "17:38", - "endTime": "19:38", - "reportSchedule": "afa", - "reportLink": "ss", - "isEnabled": false, - "sessionType": "standard", - "synced": false + "startDate": "2023-10-04", + "endDate": "2023-10-07", + "startTime": "12:00", + "endTime": "10:02", + "reportSchedule": "lgkhk", + "reportLink": "faass", + "isEnabled": true, + "sessionType": "infinite", + "synced": true }, + "dateCreated": "10/3/2023", "id": 5 }, { "student": { - "testTakers": "54654", + "testTakers": "1000", "program": "Haryana Students", - "batch": "DL-12-Alpha-Eng-23", - "grade": "10", - "course": "NEET", - "stream": "Medical" + "batch": "DL-12-Alpha-med-23", + "grade": "9", + "course": "Catalyst", + "stream": "Maths" }, "test": { - "name": "sfaa", + "name": "canem", "type": "assessment", - "format": "major_test", + "format": "part_test", "purpose": "weekly_test", "platform": "Quiz", - "markingScheme": "1,0", + "markingScheme": "4,-1", "optionalLimit": "na" }, "timeline": { - "startDate": "2023-09-19", - "endDate": "2023-09-23", - "startTime": "16:14", - "endTime": "19:14", - "reportSchedule": "FFFF", - "reportLink": "FFFFH", - "isEnabled": false, + "startDate": "2023-10-04", + "endDate": "2023-10-07", + "startTime": "12:00", + "endTime": "10:02", + "reportSchedule": "lgkhk", + "reportLink": "faass", + "isEnabled": true, "sessionType": "infinite", "synced": true }, + "dateCreated": "10/3/2023", "id": 6 }, { "student": { - "testTakers": "8989", - "program": "Himachal Students", - "batch": "DL-12-Photon-Eng-23", - "grade": "10", + "testTakers": "1000", + "program": "Haryana Students", + "batch": "DL-12-Alpha-med-23", + "grade": "9", "course": "Catalyst", "stream": "Maths" }, "test": { - "name": "foo", - "type": "homework", - "format": "major_test", - "purpose": "endline", + "name": "canem", + "type": "assessment", + "format": "part_test", + "purpose": "weekly_test", "platform": "Quiz", - "markingScheme": "1,0", - "optionalLimit": "neet" + "markingScheme": "4,-1", + "optionalLimit": "na" }, "timeline": { - "startDate": "2023-09-11", - "endDate": "2023-09-15", - "startTime": "17:24", - "endTime": "19:24", - "reportSchedule": "Hello", - "reportLink": "hellosa", + "startDate": "2023-10-04", + "endDate": "2023-10-07", + "startTime": "12:00", + "endTime": "10:02", + "reportSchedule": "lgkhk", + "reportLink": "faass", "isEnabled": true, - "sessionType": "standard", + "sessionType": "infinite", "synced": true }, + "dateCreated": "10/3/2023", "id": 7 } ] diff --git a/package-lock.json b/package-lock.json index 86d93d0..2f20f5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "react-dom": "18.2.0", "react-feather": "^2.0.10", "react-hook-form": "^7.45.4", + "react-paginate": "^8.2.0", "react-select": "^5.7.4", "typescript": "^5.1.6" }, @@ -2930,11 +2931,6 @@ "node": ">= 0.6" } }, - "node_modules/fs": { - "version": "0.0.1-security", - "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz", - "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w==" - }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -4545,15 +4541,6 @@ "node": ">= 0.8" } }, - "node_modules/path": { - "version": "0.12.7", - "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz", - "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==", - "dependencies": { - "process": "^0.11.1", - "util": "^0.10.3" - } - }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -4899,14 +4886,6 @@ "node": ">= 0.8.0" } }, - "node_modules/process": { - "version": "0.11.10", - "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", - "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==", - "engines": { - "node": ">= 0.6.0" - } - }, "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", @@ -5061,6 +5040,17 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-paginate": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-8.2.0.tgz", + "integrity": "sha512-sJCz1PW+9PNIjUSn919nlcRVuleN2YPoFBOvL+6TPgrH/3lwphqiSOgdrLafLdyLDxsgK+oSgviqacF4hxsDIw==", + "dependencies": { + "prop-types": "^15" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18" + } + }, "node_modules/react-select": { "version": "5.7.4", "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.4.tgz", @@ -6166,24 +6156,11 @@ } } }, - "node_modules/util": { - "version": "0.10.4", - "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", - "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==", - "dependencies": { - "inherits": "2.0.3" - } - }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, - "node_modules/util/node_modules/inherits": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==" - }, "node_modules/utils-merge": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", diff --git a/package.json b/package.json index 32af18b..fa70773 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "react-dom": "18.2.0", "react-feather": "^2.0.10", "react-hook-form": "^7.45.4", + "react-paginate": "^8.2.0", "react-select": "^5.7.4", "typescript": "^5.1.6" }, diff --git a/src/components/displayTable/DataDisplay.tsx b/src/components/displayTable/DataDisplay.tsx index e9a28ea..0327d7b 100644 --- a/src/components/displayTable/DataDisplay.tsx +++ b/src/components/displayTable/DataDisplay.tsx @@ -2,6 +2,8 @@ import React, { useState, useEffect } from "react"; import { RowType } from "@/types/types"; import TableRow from "./Row"; import { getData } from "@/utils/forminputhandling"; +import ReactPaginate from "react-paginate"; +import { instance } from "@/utils/rootclient"; type DataDisplayProps = { getData: () => Promise; @@ -9,15 +11,21 @@ type DataDisplayProps = { const DataDisplay: React.FC = ({ getData }) => { const [data, setData] = useState([]); + const [totalItems, setTotalItems] = useState(0); + const [currentPage, setCurrentPage] = useState(0); + const itemsPerPage = 5; useEffect(() => { const fetchData = async () => { - const result = await getData(); // using the passed getData function - setData(result); + const response = await instance.get( + `/quiz?_page=${currentPage + 1}&_limit=${itemsPerPage}` + ); + setData(response.data); + const total = parseInt(response.headers["x-total-count"], 10); + setTotalItems(total); }; - fetchData(); - }, [getData]); + }, [currentPage, getData]); return (
@@ -41,6 +49,28 @@ const DataDisplay: React.FC = ({ getData }) => { ))} + setCurrentPage(selected)} + containerClassName={ + "pagination flex flex-wrap justify-center items-center my-4" + } + pageClassName={"mx-1"} + previousClassName={ + "mx-1 bg-[#B52326] text-white rounded px-2 py-1 sm:px-3 sm:py-2 hover: bg-[#B52326]" + } + nextClassName={ + "mx-1 bg-[#B52326] text-white rounded px-2 py-1 sm:px-3 sm:py-2 hover:bg- bg-[#B52326]" + } + activeClassName={" bg-[#B52326] text-white rounded px-3 py-2"} + disabledClassName={"opacity-50 cursor-not-allowed"} + />
); diff --git a/src/utils/forminputhandling.ts b/src/utils/forminputhandling.ts index b385d57..144d535 100644 --- a/src/utils/forminputhandling.ts +++ b/src/utils/forminputhandling.ts @@ -2,9 +2,8 @@ import { RowType } from "@/types/types"; import { instance } from "./rootclient"; // get data from the db -async function getData() { - const { data } = await instance.get("/quiz"); - +async function getData(page = 1, limit = 5) { + const { data } = await instance.get(`/quiz?_page=${page}&_limit=${limit}`); return data; } @@ -21,13 +20,3 @@ async function postFormData(formData: RowType) { } export { getData, postFormData }; - -// import { SessionData } from "../types/FormTypes"; // Adjust the import based on where your types are defined -// import { instance } from "./rootclient"; - -// async function getData(): Promise { -// const { data } = await instance.get("/session"); // Assuming the endpoint is `/session` to get all sessions -// return data; -// } - -// export { getData };