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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import { useEffect, useMemo, useRef, useState } from "react";
import StopDataProvider, { type Stop } from "../data/StopDataProvider";
import StopItem from "../components/StopItem";
import Fuse from "fuse.js";
import './stoplist.css';
import { useTranslation } from "react-i18next";
export default function StopList() {
const { t } = useTranslation();
const [data, setData] = useState<Stop[] | null>(null)
const [searchResults, setSearchResults] = useState<Stop[] | null>(null);
const searchTimeout = useRef<NodeJS.Timeout | null>(null);
const randomPlaceholder = useMemo(() => t('stoplist.search_placeholder'), [t]);
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>
)
}
|
