diff options
| author | Ariel Costas Guerrero <94913521+arielcostas@users.noreply.github.com> | 2025-03-03 18:54:35 +0100 |
|---|---|---|
| committer | Ariel Costas Guerrero <94913521+arielcostas@users.noreply.github.com> | 2025-03-03 18:54:35 +0100 |
| commit | 3aa6eee0f54dec3e4f92be2ad335a04145ac4db8 (patch) | |
| tree | 9ccffabd2972249322ebaa6d1de26289d7a41a4c /src/pages/Home.tsx | |
| parent | d3726e50167ed07c483c542cf6739f103dda0dd5 (diff) | |
Improve the UI
Diffstat (limited to 'src/pages/Home.tsx')
| -rw-r--r-- | src/pages/Home.tsx | 99 |
1 files changed, 0 insertions, 99 deletions
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx deleted file mode 100644 index b7c1675..0000000 --- a/src/pages/Home.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { useEffect, useMemo, useState } from "react"; -import { Link, useNavigate } from "react-router-dom"; -import { Stop, StopDataProvider } from "../data/StopDataProvider"; - -const sdp = new StopDataProvider(); - -export function Home() { - const [data, setData] = useState<Stop[] | null>(null) - const navigate = useNavigate(); - - useEffect(() => { - sdp.getStops().then((stops: Stop[]) => setData(stops)) - }, []); - - const handleStopSearch = async (event: React.FormEvent) => { - event.preventDefault() - - const stopId = (event.target as HTMLFormElement).stopId.value - const searchNumber = parseInt(stopId) - if (data?.find(stop => stop.stopId === searchNumber)) { - navigate(`/${searchNumber}`) - } else { - alert("Parada no encontrada") - } - } - - const favouritedStops = useMemo(() => { - return data?.filter(stop => stop.favourite) ?? [] - }, [data]) - - const recentStops = useMemo(() => { - const recent = sdp.getRecent(); - - if (recent.length === 0) return null; - - return recent.map(stopId => data?.find(stop => stop.stopId === stopId) as Stop).reverse(); - }, [data]) - - if (data === null) return <h1>Loading...</h1> - - return ( - <> - <h1>UrbanoVigo Web</h1> - - <form action="none" onSubmit={handleStopSearch}> - <div> - <label htmlFor="stopId"> - ID - </label> - <input type="number" placeholder="ID de parada" id="stopId" /> - </div> - - <button type="submit">Buscar</button> - </form> - - <h2>Paradas favoritas</h2> - - {favouritedStops?.length == 1 && ( - <p> - Accede a una parada y márcala como favorita para verla aquí. - </p> - )} - - <ul> - {favouritedStops?.sort((a, b) => a.stopId - b.stopId).map((stop: Stop) => ( - <li key={stop.stopId}> - <Link to={`/${stop.stopId}`}> - ({stop.stopId}) {stop.name} - {stop.lines?.join(', ')} - </Link> - </li> - ))} - </ul> - - <h2>Recientes</h2> - - <ul> - {recentStops?.map((stop: Stop) => ( - <li key={stop.stopId}> - <Link to={`/${stop.stopId}`}> - ({stop.stopId}) {stop.name} - {stop.lines?.join(', ')} - </Link> - </li> - ))} - </ul> - - <h2>Paradas</h2> - - <ul> - {data?.sort((a, b) => a.stopId - b.stopId).map((stop: Stop) => ( - <li key={stop.stopId}> - <Link to={`/${stop.stopId}`}> - ({stop.stopId}) {stop.name} - {stop.lines?.join(', ')} - </Link> - </li> - ))} - </ul> - </> - ) -} |
