From cc3d1dd5d76b0c972612806bd1fbad2c102e1add Mon Sep 17 00:00:00 2001 From: Akanksha Date: Thu, 7 Nov 2024 22:07:18 +0530 Subject: [PATCH] pagination work done --- src/webapi/_data/bootcamps.json | 405 +++++++++++++++++- src/webapp/src/components/Pagination.jsx | 6 +- .../src/pages/bootcamps/BootcampsPage.jsx | 12 +- 3 files changed, 396 insertions(+), 27 deletions(-) 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/src/components/Pagination.jsx b/src/webapp/src/components/Pagination.jsx index 51fd5bb..763c352 100644 --- a/src/webapp/src/components/Pagination.jsx +++ b/src/webapp/src/components/Pagination.jsx @@ -7,23 +7,20 @@ function Pagination({ totalRec, itemsPerPage, currentPage, paginationData, onPag const [pageCount, setPageCount] = useState(Math.ceil(totalRec / itemsPerPage)); useEffect(() => { - setPageCount(Math.ceil(totalRec / itemsPerPage)); // Recalculate on totalRec change + setPageCount(Math.ceil(totalRec / itemsPerPage)); }, [totalRec, itemsPerPage]); - return (
} pageCount={pageCount} onPageChange={onPageChange} activeClassName="active" pageRangeDisplayed={1} marginPagesDisplayed={1} forcePage={currentPage - 1} - // previousLabel={} pageClassName="page-item" pageLinkClassName="page-link" previousClassName="page-item" @@ -34,7 +31,6 @@ function Pagination({ totalRec, itemsPerPage, currentPage, paginationData, onPag breakClassName="page-item" breakLinkClassName="page-link" containerClassName="pagination justify-content-between d-flex " - // activeClassName="active" renderOnZeroPageCount={null} /> diff --git a/src/webapp/src/pages/bootcamps/BootcampsPage.jsx b/src/webapp/src/pages/bootcamps/BootcampsPage.jsx index 6d45f13..543ff62 100644 --- a/src/webapp/src/pages/bootcamps/BootcampsPage.jsx +++ b/src/webapp/src/pages/bootcamps/BootcampsPage.jsx @@ -13,8 +13,6 @@ const BootcampsPage = () => { const [currentPage, setCurrentPage] = useState([1]); const [pagination, setPagination] = useState([]); - - // Load bootcamps from API useEffect(() => { const fetchBootcamps = async () => { @@ -22,14 +20,11 @@ const BootcampsPage = () => { const fields = ['photo', 'name', 'averageRating', 'location', 'careers', 'id']; var page = currentPage; var limit = itemsPerPage; - console.log('page',page); - console.log('limit',limit); const res = await bootcampService.getBootcamps(fields, page, limit); console.log('res',res); setBootcamps(res.data); setPagination(res.pagination); setTotalRec(res.total) - setItemsPerPage(res.count) setFetchError(null); } catch (error) { setFetchError(error.message); @@ -41,16 +36,11 @@ const BootcampsPage = () => { }, [currentPage]); const handlePaginationChange = (selectedPage) => { - console.log('selectedPage',selectedPage); - const newPage = selectedPage.selected + 1; // Convert index to actual page number - console.log('newPage',newPage); + const newPage = selectedPage.selected + 1; setCurrentPage([newPage]) setItemsPerPage([5]) }; - - console.log('totalRec bootcamp',totalRec); - return (