diff --git a/src/webapi/_data/bootcamps.json b/src/webapi/_data/bootcamps.json
index 7ffdfa1..4fe0d22 100644
--- a/src/webapi/_data/bootcamps.json
+++ b/src/webapi/_data/bootcamps.json
@@ -8,7 +8,12 @@
"phone": "(111) 111-1111",
"email": "enroll@devworks.com",
"address": "233 Bay State Rd Boston MA 02215",
- "careers": ["Web Development", "UI/UX", "Business", "Engineering"],
+ "careers": [
+ "Web Development",
+ "UI/UX",
+ "Business",
+ "Engineering"
+ ],
"housing": true,
"jobAssistance": true,
"jobGuarantee": false,
@@ -23,7 +28,11 @@
"phone": "(222) 222-2222",
"email": "enroll@moderntech.com",
"address": "220 Pawtucket St, Lowell, MA 01854",
- "careers": ["Web Development", "UI/UX", "Mobile Development"],
+ "careers": [
+ "Web Development",
+ "UI/UX",
+ "Mobile Development"
+ ],
"housing": false,
"jobAssistance": true,
"jobGuarantee": false,
@@ -38,7 +47,12 @@
"phone": "(333) 333-3333",
"email": "enroll@codemasters.com",
"address": "85 South Prospect Street Burlington VT 05405",
- "careers": ["Web Development", "Data Science", "Business", "Engineering"],
+ "careers": [
+ "Web Development",
+ "Data Science",
+ "Business",
+ "Engineering"
+ ],
"housing": false,
"jobAssistance": false,
"jobGuarantee": false,
@@ -53,7 +67,12 @@
"phone": "(444) 444-4444",
"email": "enroll@devcentral.com",
"address": "45 Upper College Rd Kingston RI 02881",
- "careers": ["Mobile Development", "Web Development", "Data Science", "Business"],
+ "careers": [
+ "Mobile Development",
+ "Web Development",
+ "Data Science",
+ "Business"
+ ],
"housing": false,
"jobAssistance": true,
"jobGuarantee": true,
@@ -68,7 +87,11 @@
"phone": "(103) 103-1030",
"email": "enroll@dotnetmastery.com",
"address": "123 Microsoft Ave Redmond WA 98052",
- "careers": ["Web Development", ".NET Development", "Cloud Computing"],
+ "careers": [
+ "Web Development",
+ ".NET Development",
+ "Cloud Computing"
+ ],
"housing": false,
"jobAssistance": true,
"jobGuarantee": false,
@@ -83,7 +106,11 @@
"phone": "(555) 555-5555",
"email": "enroll@justwebdev.com",
"address": "456 Innovation Blvd, San Francisco, CA 94105",
- "careers": ["Web Development", "UI/UX", "Full Stack Development"],
+ "careers": [
+ "Web Development",
+ "UI/UX",
+ "Full Stack Development"
+ ],
"housing": true,
"jobAssistance": true,
"jobGuarantee": false,
@@ -98,7 +125,11 @@
"phone": "(666) 666-6666",
"email": "enroll@hardcorejs.com",
"address": "789 Code Street, Seattle, WA 98101",
- "careers": ["Web Development", "Full Stack Development", "JavaScript Engineering"],
+ "careers": [
+ "Web Development",
+ "Full Stack Development",
+ "JavaScript Engineering"
+ ],
"housing": false,
"jobAssistance": true,
"jobGuarantee": false,
@@ -113,7 +144,11 @@
"phone": "(777) 777-7777",
"email": "enroll@devopsaks.com",
"address": "123 Cloud Lane, Austin, TX 73301",
- "careers": ["DevOps", "Cloud Engineering", "Kubernetes Specialist"],
+ "careers": [
+ "DevOps",
+ "Cloud Engineering",
+ "Kubernetes Specialist"
+ ],
"housing": false,
"jobAssistance": true,
"jobGuarantee": false,
@@ -122,16 +157,364 @@
{
"_id": "5d726e9b7b292f5f8ceff800",
"user": "5c8a1d5b0190b214360dc031",
- "name": "Azure OpenAI Bootcamp",
+ "name": "Azure OpenAI Bootcamp Basic",
"description": "The Azure OpenAI Bootcamp is designed to teach you how to harness the power of artificial intelligence using Microsoft’s Azure OpenAI services. Learn how to build and integrate AI models, natural language processing, and machine learning into real-world applications.",
"website": "https://azureopenai.com",
"phone": "(888) 888-8888",
"email": "enroll@azureopenai.com",
"address": "456 AI Blvd, Seattle, WA 98101",
- "careers": ["AI Engineer", "Data Scientist", "Machine Learning Specialist"],
+ "careers": [
+ "AI Engineer",
+ "Data Scientist",
+ "Machine Learning Specialist"
+ ],
+ "housing": true,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": true
+ },
+ {
+ "_id": "5d726e9b7b292f5f8ceff801",
+ "user": "5c8a1d5b0190b214360dc031",
+ "name": "Azure OpenAI Bootcamp Advance",
+ "description": "The Azure OpenAI Bootcamp is designed to teach you how to harness the power of artificial intelligence using Microsoft’s Azure OpenAI services. Learn how to build and integrate AI models, natural language processing, and machine learning into real-world applications.",
+ "website": "https://azureopenai.com",
+ "phone": "(888) 888-8888",
+ "email": "enroll@azureopenai.com",
+ "address": "456 AI Blvd, Seattle, WA 98101",
+ "careers": [
+ "AI Engineer",
+ "Data Scientist",
+ "Machine Learning Specialist"
+ ],
+ "housing": true,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": true
+ },
+ {
+ "_id": "5d726eee7b292f5f8ceff802",
+ "user": "5c8a1d5b0190b214360dc031",
+ "name": "Cyber Security Academy",
+ "description": "Become a cybersecurity expert with our comprehensive bootcamp. Learn critical penetration testing, ethical hacking, and network defense skills to protect organizations from cyber threats.",
+ "website": "https://cybersecurityacademy.com",
+ "phone": "(999) 999-9999",
+ "email": "enroll@cybersecurityacademy.com",
+ "address": "1 Main St, New York, NY 10001",
+ "careers": [
+ "Cybersecurity",
+ "Information Security",
+ "Network Security"
+ ],
+ "housing": false,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": true
+ },
+ {
+ "_id": "5d726ef47b292f5f8ceff803",
+ "user": "5c8a1d5b0190b214360dc031",
+ "name": "Data Science Immersive",
+ "description": "Master the art of data science with this intensive bootcamp. Learn data wrangling, analysis, visualization, machine learning, and deep learning using Python and popular libraries.",
+ "website": "https://datascienceimmersive.com",
+ "phone": "(000) 000-0000",
+ "email": "enroll@datascienceimmersive.com",
+ "address": "123 Data St, San Jose, CA 95110",
+ "careers": [
+ "Data Science",
+ "Machine Learning Engineer",
+ "Data Analyst"
+ ],
+ "housing": true,
+ "jobAssistance": false,
+ "jobGuarantee": true,
+ "acceptGi": false
+ },
+ {
+ "_id": "5d726ef97b292f5f8ceff804",
+ "name": "Product Management Intensive",
+ "user": "5c8a1d5b0190b214360dc031",
+ "description": "Upskill yourself for a product management career with this comprehensive bootcamp. Learn product strategy, user experience (UX) design, Agile methodologies, and how to bring innovative products to market.",
+ "website": "https://productmanagementintensive.com",
+ "phone": "(111) 111-1112",
+ "email": "enroll@productmanagementintensive.com",
+ "address": "456 Product Rd, Austin, TX 78701",
+ "careers": [
+ "Product Management",
+ "UX/UI Design",
+ "Marketing"
+ ],
+ "housing": false,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": true
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff805",
+ "name": "Blockchain Development Bootcamp",
+ "user": "5c8a1d5b0190b214360dc031",
+ "description": "Dive into the world of blockchain technology with this in-depth bootcamp. Learn about distributed ledger systems, smart contracts, and how to build decentralized applications (dApps).",
+ "website": "https://blockchaindevbootcamp.com",
+ "phone": "(222) 222-2223",
+ "email": "enroll@blockchaindevbootcamp.com",
+ "address": "789 Blockchain Way, Miami, FL 33133",
+ "careers": [
+ "Blockchain Development",
+ "Cryptocurrency",
+ "Web3 Development"
+ ],
+ "housing": false,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": false
+ },
+ {
+ "_id": "5d726f0b7b292f5f8ceff806",
+ "name": "UX/UI Design for Beginners",
+ "user": "5c8a1d5b0190b214360dc031",
+ "description": "This beginner-friendly bootcamp is your gateway to the exciting world of UX/UI design. Learn the fundamentals of user interface (UI) and user experience (UX) design, design thinking, and prototyping tools.",
+ "website": "https://uxuidesignbeginners.com",
+ "phone": "(333) 333-3334",
+ "email": "enroll@uxuidesignbeginners.com",
+ "address": "000 Design Ave, Chicago, IL 60601",
+ "careers": [
+ "UX/UI Design",
+ "Graphic Design",
+ "Front-End Development"
+ ],
+ "housing": false,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": false
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff806",
+ "name": "Blockchain Development Bootcamp",
+ "user": "5c8a1d5b0190b214360dc031",
+ "description": "Dive into the world of blockchain technology with this in-depth bootcamp. Learn about distributed ledger systems, smart contracts, and how to build decentralized applications (dApps).",
+ "website": "https://blockchaindevbootcamp.com",
+ "phone": "(222) 222-2223",
+ "email": "enroll@blockchaindevbootcamp.com",
+ "address": "789 Blockchain Way, Miami, FL 33133",
+ "careers": [
+ "Blockchain Development",
+ "Cryptocurrency",
+ "Web3 Development"
+ ],
+ "housing": false,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": false
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff807",
+ "name": "Full Stack Web Development Bootcamp",
+ "user": "5c8a1d5b0190b214360dc032",
+ "description": "Master the front-end and back-end of web development in this comprehensive bootcamp. Learn HTML, CSS, JavaScript, Node.js, and more to build modern web applications.",
+ "website": "https://fullstackwebdevbootcamp.com",
+ "phone": "(333) 333-3334",
+ "email": "enroll@fullstackwebdevbootcamp.com",
+ "address": "123 Coding Lane, San Francisco, CA 94103",
+ "careers": [
+ "Front-End Development",
+ "Back-End Development",
+ "Full Stack Development"
+ ],
+ "housing": true,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": true
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff808",
+ "name": "Data Science Bootcamp",
+ "user": "5c8a1d5b0190b214360dc033",
+ "description": "Become a data scientist with this intensive bootcamp. Learn Python, data analysis tools, machine learning algorithms, and more to extract insights from data.",
+ "website": "https://datasciencebootcamp.com",
+ "phone": "(444) 444-4445",
+ "email": "enroll@datasciencebootcamp.com",
+ "address": "456 Analytics Avenue, Seattle, WA 98104",
+ "careers": [
+ "Data Science",
+ "Machine Learning",
+ "Data Analysis"
+ ],
+ "housing": false,
+ "jobAssistance": true,
+ "jobGuarantee": true,
+ "acceptGi": false
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff809",
+ "name": "Cybersecurity Bootcamp",
+ "user": "5c8a1d5b0190b214360dc034",
+ "description": "Learn the skills to protect networks and systems from cyberattacks in this cybersecurity bootcamp. Gain hands-on experience with penetration testing, incident response, and more.",
+ "website": "https://cybersecuritybootcamp.com",
+ "phone": "(555) 555-5556",
+ "email": "enroll@cybersecuritybootcamp.com",
+ "address": "789 Security Street, New York, NY 10001",
+ "careers": [
+ "Cybersecurity",
+ "Information Security",
+ "Network Security"
+ ],
+ "housing": false,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": true
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff810",
+ "name": "Digital Marketing Bootcamp",
+ "user": "5c8a1d5b0190b214360dc035",
+ "description": "Master the art and science of digital marketing in this bootcamp. Learn SEO, SEM, social media marketing, email marketing, and more to drive traffic and conversions.",
+ "website": "https://digitalmarketingbootcamp.com",
+ "phone": "(666) 666-6667",
+ "email": "enroll@digitalmarketingbootcamp.com",
+ "address": "1011 Marketing Way, Los Angeles, CA 90034",
+ "careers": [
+ "Digital Marketing",
+ "SEO",
+ "Social Media Marketing"
+ ],
+ "housing": false,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": false
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff811",
+ "name": "UX/UI Design Bootcamp",
+ "user": "5c8a1d5b0190b214360dc036",
+ "description": "Design beautiful and user-friendly interfaces with this UX/UI design bootcamp. Learn design principles, tools like Figma and Adobe XD, and user research techniques.",
+ "website": "https://uxuidesignbootcamp.com",
+ "phone": "(777) 777-7778",
+ "email": "enroll@uxuidesignbootcamp.com",
+ "address": "222 Design Street, Chicago, IL 60601",
+ "careers": ["UX Designer", "UI Designer", "Product Designer"],
+ "housing": true,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": true
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff812",
+ "name": "Software Engineering Bootcamp",
+ "user": "5c8a1d5b0190b214360dc037",
+ "description": "Build a strong foundation in software engineering with this comprehensive bootcamp. Learn programming languages like Java, Python, and C++, data structures, algorithms, and software development methodologies.",
+ "website": "https://softwareengineeringbootcamp.com",
+ "phone": "(888) 888-8889",
+ "email": "enroll@softwareengineeringbootcamp.com",
+ "address": "333 Code Avenue, Boston, MA 02110",
+ "careers": ["Software Engineer", "Web Developer", "Mobile Developer"],
+ "housing": false,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": false
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff813",
+ "name": "Artificial Intelligence Bootcamp",
+ "user": "5c8a1d5b0190b214360dc038",
+ "description": "Explore the world of AI and machine learning with this bootcamp. Learn Python, TensorFlow, PyTorch, and other tools to build intelligent systems.",
+ "website": "https://aibutcamp.com",
+ "phone": "(999) 999-9990",
+ "email": "enroll@aibutcamp.com",
+ "address": "444 AI Lane, Toronto, ON M5G 1M1",
+ "careers": ["Machine Learning Engineer", "Data Scientist", "AI Researcher"],
+ "housing": true,
+ "jobAssistance": true,
+ "jobGuarantee": true,
+ "acceptGi": true
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff814",
+ "name": "Product Management Bootcamp",
+ "user": "5c8a1d5b0190b214360dc039",
+ "description": "Learn the art and science of product management in this bootcamp. Discover how to define product strategy, conduct market research, and manage product development cycles.",
+ "website": "https://productmanagementbootcamp.com",
+ "phone": "(111) 111-1111",
+ "email": "enroll@productmanagementbootcamp.com",
+ "address": "555 Product Way, Austin, TX 78701",
+ "careers": ["Product Manager", "Product Owner", "Product Designer"],
+ "housing": false,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": false
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff815",
+ "name": "Game Development Bootcamp",
+ "user": "5c8a1d5b0190b214360dc040",
+ "description": "Create your own games with this game development bootcamp. Learn game engines like Unity and Unreal Engine, game design principles, and programming for game development.",
+ "website": "https://gamedevbootcamp.com",
+ "phone": "(222) 222-2222",
+ "email": "enroll@gamedevbootcamp.com",
+ "address": "666 Game Lane, Vancouver, BC V6B 2Y2",
+ "careers": ["Game Developer", "Game Designer", "Game Programmer"],
+ "housing": true,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": true
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff816",
+ "name": "Graphic Design Bootcamp",
+ "user": "5c8a1d5b0190b214360dc041",
+ "description": "Master the art of visual communication with this graphic design bootcamp. Learn design principles, typography, software like Adobe Photoshop and Illustrator, and how to create impactful visuals.",
+ "website": "https://graphicdesignbootcamp.com",
+ "phone": "(333) 333-3333",
+ "email": "enroll@graphicdesignbootcamp.com",
+ "address": "123 Design Studio, Atlanta, GA 30303",
+ "careers": ["Graphic Designer", "UI/UX Designer", "Multimedia Designer"],
+ "housing": false,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": true
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff817",
+ "name": "3D Animation Bootcamp",
+ "user": "5c8a1d5b0190b214360dc042",
+ "description": "Bring your characters and stories to life with this 3D animation bootcamp. Learn software like Maya and Blender, 3D modeling, animation principles, and character rigging.",
+ "website": "https://3danimationbootcamp.com",
+ "phone": "(444) 444-4444",
+ "email": "enroll@3danimationbootcamp.com",
+ "address": "456 Animation Studios, Denver, CO 80202",
+ "careers": ["3D Animator", "Visual Effects Artist", "Motion Graphics Artist"],
+ "housing": true,
+ "jobAssistance": true,
+ "jobGuarantee": true,
+ "acceptGi": false
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff818",
+ "name": "Digital Photography Bootcamp",
+ "user": "5c8a1d5b0190b214360dc043",
+ "description": "Capture stunning photographs with this digital photography bootcamp. Learn camera settings, lighting principles, composition techniques, and post-processing software like Adobe Lightroom.",
+ "website": "https://digitalphotographybootcamp.com",
+ "phone": "(555) 555-5555",
+ "email": "enroll@digitalphotographybootcamp.com",
+ "address": "789 Photography Studio, San Diego, CA 92101",
+ "careers": ["Photographer", "Videographer", "Photo Editor"],
+ "housing": false,
+ "jobAssistance": true,
+ "jobGuarantee": false,
+ "acceptGi": false
+ },
+ {
+ "_id": "5d726f027b292f5f8ceff819",
+ "name": "Music Production Bootcamp",
+ "user": "5c8a1d5b0190b214360dc044",
+ "description": "Create professional-sounding music with this music production bootcamp. Learn DAW software like Ableton Live and Logic Pro, music theory, sound design, and mixing techniques.",
+ "website": "https://musicproductionbootcamp.com",
+ "phone": "(666) 666-6666",
+ "email": "enroll@musicproductionbootcamp.com",
+ "address": "1011 Music Studio, Nashville, TN 37219",
+ "careers": ["Music Producer", "Audio Engineer", "Sound Designer"],
"housing": true,
"jobAssistance": true,
"jobGuarantee": false,
"acceptGi": true
}
-]
+]
\ No newline at end of file
diff --git a/src/webapp/.gitignore b/src/webapp/.gitignore
index 4d29575..8de7864 100644
--- a/src/webapp/.gitignore
+++ b/src/webapp/.gitignore
@@ -21,3 +21,4 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
+/package-lock.json
\ No newline at end of file
diff --git a/src/webapp/package-lock.json b/src/webapp/package-lock.json
index f6b3aab..f337d9b 100644
--- a/src/webapp/package-lock.json
+++ b/src/webapp/package-lock.json
@@ -16,6 +16,7 @@
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-loader-spinner": "^6.1.6",
+ "react-paginate": "^8.2.0",
"react-router-dom": "^6.26.1",
"react-scripts": "5.0.1",
"react-toastify": "^10.0.6",
@@ -15837,6 +15838,17 @@
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
"license": "MIT"
},
+ "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-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
diff --git a/src/webapp/package.json b/src/webapp/package.json
index 33d0a66..9f7dab0 100644
--- a/src/webapp/package.json
+++ b/src/webapp/package.json
@@ -11,6 +11,7 @@
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-loader-spinner": "^6.1.6",
+ "react-paginate": "^8.2.0",
"react-router-dom": "^6.26.1",
"react-scripts": "5.0.1",
"react-toastify": "^10.0.6",
diff --git a/src/webapp/src/components/Pagination.jsx b/src/webapp/src/components/Pagination.jsx
index d4aed5b..763c352 100644
--- a/src/webapp/src/components/Pagination.jsx
+++ b/src/webapp/src/components/Pagination.jsx
@@ -1,35 +1,42 @@
-import React from 'react';
-const Pagination = () => {
+import React, { useEffect, useState } from 'react';
+import { Row, Col, Form, Button } from 'react-bootstrap';
+import ReactPaginate from 'react-paginate';
+
+function Pagination({ totalRec, itemsPerPage, currentPage, paginationData, onPageChange }) {
+
+ const [pageCount, setPageCount] = useState(Math.ceil(totalRec / itemsPerPage));
+
+ useEffect(() => {
+ setPageCount(Math.ceil(totalRec / itemsPerPage));
+ }, [totalRec, itemsPerPage]);
+
return (
-
+
+
+
+
+
+
+
+
);
};
diff --git a/src/webapp/src/pages/bootcamps/BootcampsPage.jsx b/src/webapp/src/pages/bootcamps/BootcampsPage.jsx
index 99c7ed5..6b1eede 100644
--- a/src/webapp/src/pages/bootcamps/BootcampsPage.jsx
+++ b/src/webapp/src/pages/bootcamps/BootcampsPage.jsx
@@ -2,19 +2,29 @@ import React, { useState, useEffect } from 'react';
import { Oval } from 'react-loader-spinner';
import { Bootcamp } from '../../components';
import bootcampService from '../../services/bootcampService';
+import Pagination from '../../components/Pagination';
const BootcampsPage = () => {
const [bootcamps, setBootcamps] = useState([]);
const [fetchError, setFetchError] = useState(null);
const [loading, setLoading] = useState(true);
+ const [totalRec, setTotalRec] = useState();
+ const [itemsPerPage, setItemsPerPage] = useState([5]); // Default items per page
+ const [currentPage, setCurrentPage] = useState([1]);
+ const [pagination, setPagination] = useState([]);
// Load bootcamps from API
useEffect(() => {
const fetchBootcamps = async () => {
try {
const fields = ['photo', 'name', 'averageRating', 'location', 'careers', 'id'];
- const res = await bootcampService.getBootcamps(fields);
+ var page = currentPage;
+ var limit = itemsPerPage;
+ const res = await bootcampService.getBootcamps(fields, page, limit);
+ console.log('res',res);
setBootcamps(res.data);
+ setPagination(res.pagination);
+ setTotalRec(res.total)
setFetchError(null);
} catch (error) {
setFetchError(error.message);
@@ -23,7 +33,19 @@ const BootcampsPage = () => {
}
};
fetchBootcamps();
- }, []);
+
+ // Update the URL
+ const url = new URL(window.location.href);
+ url.searchParams.set('page', currentPage);
+ url.searchParams.set('limit', itemsPerPage);
+ window.history.pushState({}, '', url.toString());
+ }, [currentPage]);
+
+ const handlePaginationChange = (selectedPage) => {
+ const newPage = selectedPage.selected + 1;
+ setCurrentPage([newPage])
+ setItemsPerPage([5])
+ };
return (
@@ -43,6 +65,7 @@ const BootcampsPage = () => {
))}
)}
+
);
diff --git a/src/webapp/src/services/bootcampService.js b/src/webapp/src/services/bootcampService.js
index 2b48ba1..745d54a 100644
--- a/src/webapp/src/services/bootcampService.js
+++ b/src/webapp/src/services/bootcampService.js
@@ -2,9 +2,11 @@ import { getAuthHeaders } from '../helpers/auth';
import { fetchApiEndPoint } from '../utils/configService';
const bootcampService = {
- getBootcamps: async (fields) => {
+ getBootcamps: async (fields, page, limit) => {
const query = fields ? `?select=${fields.join(',')}` : '';
- const uri = await fetchApiEndPoint(`/bootcamps${query}`);
+ const Page = page ? `page=${page.join(',')}` : '';
+ const Limit = limit ? `limit=${limit.join(',')}` : '';
+ const uri = await fetchApiEndPoint(`/bootcamps${query}&${Page}&${Limit}`);
const res = await fetch(uri);
if (!res.ok) {
console.log(`Failed to fetch bootcamps: ${res.status}`);