From 899605ee762df613a0c54bb698c34aac29e445b1 Mon Sep 17 00:00:00 2001 From: haseebzaki-07 Date: Thu, 7 Nov 2024 17:07:56 +0530 Subject: [PATCH] add stations pagination --- frontend/src/Pages/stations.jsx | 145 +++++++++++++++++++++++--------- 1 file changed, 106 insertions(+), 39 deletions(-) diff --git a/frontend/src/Pages/stations.jsx b/frontend/src/Pages/stations.jsx index c194f35..e874cea 100644 --- a/frontend/src/Pages/stations.jsx +++ b/frontend/src/Pages/stations.jsx @@ -1,32 +1,31 @@ - -import React, { useState , useEffect} from "react"; - -import { FaTrain } from "react-icons/fa"; // Using FontAwesome train icon -import { AiFillCaretDown, AiFillCaretUp, AiFillStar, AiOutlineStar } from "react-icons/ai"; // Star icons for favorites +import React, { useState, useEffect } from "react"; +import { FaTrain } from "react-icons/fa"; +import { AiFillStar, AiOutlineStar } from "react-icons/ai"; import { useNavigate } from "react-router-dom"; import backicon from "../assets/svg/backicon.svg"; -import { div, h1 } from "framer-motion/client"; -import allStations from "../dataset/stations.js" - +import allStations from "../dataset/stations.js"; const RailwayStations = () => { - useEffect(() => { - document.title = 'Station Saarthi | Stations'; + document.title = 'Station Saarthi | Stations'; }, []); - - // Comprehensive list of railway stations with zones - const navigate = useNavigate(); - const HomeClick = () => { navigate("/"); // Navigates to the home page }; const [stations, setStations] = useState(allStations); + const [searchTerm, setSearchTerm] = useState(""); + const [favorites, setFavorites] = useState([]); + const [selectedZone, setSelectedZone] = useState("All"); + const [loading, setLoading] = useState(false); + // Pagination States + const [currentPage, setCurrentPage] = useState(1); // Current page + const [stationsPerPage] = useState(30); // Increased the number of stations per page to 20 + // Define the zones array const zones = [ ["All", "All"], ["ECOR", "EAST COAST RAILWAY"], @@ -45,18 +44,13 @@ const RailwayStations = () => { ["WR", "WESTERN RAILWAY"], ["BR", "BANGLADESH RAILWAY"], ["CPT", "Kolkata Port Trust Rly."], - ["DFCR", "DEDICATED FREIGHT CORRIDO"], + ["DFCR", "DEDICATED FREIGHT CORRIDOR"], ["CP", "CHENNAI PORT TRUSTRAILWAY"], ["CR", "CENTRAL RAILWAY"], ["ECR", "EAST CENTRAL RAILWAY"], ["NPLR", "NEPAL RAILWAY"], ["MRK", "METRO RAILWAY KOLKATA"], ]; - const [searchTerm, setSearchTerm] = useState(""); - const [favorites, setFavorites] = useState([]); - const [selectedZone, setSelectedZone] = useState("All"); - const [loading, setLoading] = useState(false); - const [showFavorites, setShowFavorites] = useState(false); // Function to toggle favorite stations const toggleFavorite = (station) => { @@ -64,11 +58,10 @@ const RailwayStations = () => { setFavorites(favorites.filter((fav) => fav !== station)); } else { setFavorites([...favorites, station]); - console.log(favorites); } }; - // Filter stations based on search term and selected state + // Filter stations based on search term and selected zone const filteredStations = stations.filter((station) => { const matchesSearch = station.name .toLowerCase() @@ -78,14 +71,57 @@ const RailwayStations = () => { return matchesSearch && matchesState; }); + // Paginate stations: get the stations to display for the current page + const indexOfLastStation = currentPage * stationsPerPage; + const indexOfFirstStation = indexOfLastStation - stationsPerPage; + const currentStations = filteredStations.slice(indexOfFirstStation, indexOfLastStation); + + // Calculate total number of pages + const totalPages = Math.ceil(filteredStations.length / stationsPerPage); + + // Handle page change + const paginate = (pageNumber) => setCurrentPage(pageNumber); + + // Handle next and previous button clicks + const handlePrev = () => { + if (currentPage > 1) { + setCurrentPage(currentPage - 1); + } + }; + + const handleNext = () => { + if (currentPage < totalPages) { + setCurrentPage(currentPage + 1); + } + }; + + // Get pagination buttons (limit the number of visible page numbers) + const getPaginationRange = () => { + const range = []; + const maxButtonsToShow = 5; // Limit to 5 page numbers shown at once + + // Display the first page, last page, and some pages in between + let start = Math.max(currentPage - Math.floor(maxButtonsToShow / 2), 1); + let end = Math.min(start + maxButtonsToShow - 1, totalPages); + + // Adjust the range if there are too few pages before the current page + if (end - start + 1 < maxButtonsToShow) { + start = Math.max(end - maxButtonsToShow + 1, 1); + } + + // Push the page numbers into the range array + for (let i = start; i <= end; i++) { + range.push(i); + } + + return range; + }; + useEffect(() => { setLoading(true); - fetch("http://localhost:3000/api/all-stations" , "https://stationguidebackend.onrender.com") + fetch("http://localhost:3000/api/all-stations") + .then((e) => e.json()) .then((e) => { - return e.json(); - }) - .then((e) => { - console.log(e); setStations(e); }) .catch((err) => { @@ -99,7 +135,7 @@ const RailwayStations = () => { if (loading) { return (
-
+
); } @@ -108,18 +144,18 @@ const RailwayStations = () => {
{/* Header Section */}
- +
- +

Railway Stations

Find and explore railway stations across India

- + {/* Main Content: Stations Grid */}
{/* Search Bar and State Filter */} @@ -143,12 +179,12 @@ const RailwayStations = () => { ))}
- + {/* Stations Grid */}
- {filteredStations.length > 0 ? ( - filteredStations.map((station, index) => ( + {currentStations.length > 0 ? ( + currentStations.map((station, index) => (
{ )}
+ + {/* Pagination */} +
+ + + {getPaginationRange().map((page) => ( + + ))} + + +
- - {/* Favorites Section - Moved to the Last */} +

Your Favorite Stations

@@ -216,7 +284,6 @@ const RailwayStations = () => {
); - }; export default RailwayStations;