diff options
Diffstat (limited to 'src/pages/StopList.tsx')
| -rw-r--r-- | src/pages/StopList.tsx | 135 |
1 files changed, 0 insertions, 135 deletions
diff --git a/src/pages/StopList.tsx b/src/pages/StopList.tsx deleted file mode 100644 index b965456..0000000 --- a/src/pages/StopList.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { useEffect, useMemo, useRef, useState } from "react"; -import StopDataProvider, { Stop } from "../data/StopDataProvider"; -import StopItem from "../components/StopItem"; -import Fuse from "fuse.js"; - -const placeholders = [ - "Urzaiz", - "Gran Vía", - "Castelao", - "García Barbón", - "Valladares", - "Florida", - "Pizarro", - "Estrada Madrid", - "Sanjurjo Badía" -]; - -export function StopList() { - const [data, setData] = useState<Stop[] | null>(null) - const [searchResults, setSearchResults] = useState<Stop[] | null>(null); - const searchTimeout = useRef<NodeJS.Timeout | null>(null); - - const randomPlaceholder = useMemo(() => placeholders[Math.floor(Math.random() * placeholders.length)], []); - const fuse = useMemo(() => new Fuse(data || [], { threshold: 0.3, keys: ['name.original'] }), [data]); - - useEffect(() => { - StopDataProvider.getStops().then((stops: Stop[]) => setData(stops)) - }, []); - - const handleStopSearch = (event: React.ChangeEvent<HTMLInputElement>) => { - const stopName = event.target.value || ""; - - if (searchTimeout.current) { - clearTimeout(searchTimeout.current); - } - - searchTimeout.current = setTimeout(() => { - if (stopName.length === 0) { - setSearchResults(null); - return; - } - - if (!data) { - console.error("No data available for search"); - return; - } - - const results = fuse.search(stopName); - const items = results.map(result => result.item); - setSearchResults(items); - }, 300); - } - - const favouritedStops = useMemo(() => { - return data?.filter(stop => stop.favourite) ?? [] - }, [data]) - - const recentStops = useMemo(() => { - // no recent items if data not loaded - if (!data) return null; - const recentIds = StopDataProvider.getRecent(); - if (recentIds.length === 0) return null; - // map and filter out missing entries - const stopsList = recentIds - .map(id => data.find(stop => stop.stopId === id)) - .filter((s): s is Stop => Boolean(s)); - return stopsList.reverse(); - }, [data]); - - if (data === null) return <h1 className="page-title">Loading...</h1> - - return ( - <div className="page-container"> - <h1 className="page-title">UrbanoVigo Web</h1> - - <form className="search-form"> - <div className="form-group"> - <label className="form-label" htmlFor="stopName"> - Buscar paradas - </label> - <input className="form-input" type="text" placeholder={randomPlaceholder} id="stopName" onChange={handleStopSearch} /> - </div> - </form> - - {searchResults && searchResults.length > 0 && ( - <div className="list-container"> - <h2 className="page-subtitle">Resultados de la búsqueda</h2> - <ul className="list"> - {searchResults.map((stop: Stop) => ( - <StopItem key={stop.stopId} stop={stop} /> - ))} - </ul> - </div> - )} - - <div className="list-container"> - <h2 className="page-subtitle">Paradas favoritas</h2> - - {favouritedStops?.length === 0 && ( - <p className="message"> - Accede a una parada y márcala como favorita para verla aquí. - </p> - )} - - <ul className="list"> - {favouritedStops?.sort((a, b) => a.stopId - b.stopId).map((stop: Stop) => ( - <StopItem key={stop.stopId} stop={stop} /> - ))} - </ul> - </div> - - {recentStops && recentStops.length > 0 && ( - <div className="list-container"> - <h2 className="page-subtitle">Recientes</h2> - - <ul className="list"> - {recentStops.map((stop: Stop) => ( - <StopItem key={stop.stopId} stop={stop} /> - ))} - </ul> - </div> - )} - - <div className="list-container"> - <h2 className="page-subtitle">Paradas</h2> - - <ul className="list"> - {data?.sort((a, b) => a.stopId - b.stopId).map((stop: Stop) => ( - <StopItem key={stop.stopId} stop={stop} /> - ))} - </ul> - </div> - </div> - ) -} |
