1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
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>
</>
)
}
|
