Add simpleCSS, improve usability

2 files changed, 78 insertions, 6 deletions

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 79f1ec2..14d5d7a 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,3 +1,4 @@
+import { useNavigate } from "react-router-dom";
 import useSWR from "swr";
 
 interface Stop {
@@ -8,12 +9,50 @@ interface Stop {
 	lines: string[];
 }
 
+interface CachedStopList {
+	timetsamp: number;
+	data: Stop[];
+}
+
 export function Home() {
+	const navigate = useNavigate()
 	const { data, error, isLoading } = useSWR<Stop[]>('home', async () => {
+		const cachedData = localStorage.getItem('cachedStopList')
+		if (cachedData) {
+			const parsedData: CachedStopList = JSON.parse(cachedData)
+
+			// Cache for 12 hours
+			if (Date.now() - parsedData.timetsamp < 1000 * 60 * 60 * 12) {
+				console.log("parsed data: ", parsedData.data)
+				return parsedData.data
+			} else {
+				localStorage.removeItem('cachedStopList')
+			}
+		}
+
 		const response = await fetch('/api/ListStops')
-		return response.json()
+		const body = await response.json();
+
+		localStorage.setItem('cachedStopList', JSON.stringify({
+			timestamp: Date.now(),
+			data: body
+		}));
+		
+		return body;
 	});
 
+	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")
+		}
+	}
+
 	if (isLoading) return <h1>Loading...</h1>
 	if (error) return <h1>Error</h1>
 
@@ -21,10 +60,23 @@ export function Home() {
 		<>
 			<h1>Home</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>
+
 			<ul>
-				{data?.map((stop: Stop) => (
+				{data?.sort((a, b) => a.stopId - b.stopId).map((stop: Stop) => (
 					<li key={stop.stopId}>
-						{stop.name} - {stop.lines?.join(', ')}
+						<a href={`/${stop.stopId}`}>
+							({stop.stopId}) {stop.name} - {stop.lines?.join(', ')}
+						</a>
 					</li>
 				))}
 			</ul>
diff --git a/src/pages/Stop.tsx b/src/pages/Stop.tsx
index 2ee077c..33f1a31 100644
--- a/src/pages/Stop.tsx
+++ b/src/pages/Stop.tsx
@@ -19,7 +19,7 @@ interface StopDetails {
 export function Stop(): JSX.Element {
 	const params = useParams();
 
-	const { data, error, isLoading } = useSWR<StopDetails>('home', async () => {
+	const { data, error, isLoading } = useSWR<StopDetails>(`stop-${params.stopId}`, async () => {
 		let response;
 
 		try {
@@ -31,6 +31,15 @@ export function Stop(): JSX.Element {
 		}
 	});
 
+	const absoluteArrivalTime = (minutes: number) => {
+		const now = new Date()
+		const arrival = new Date(now.getTime() + minutes * 60000)
+		return Intl.DateTimeFormat(navigator.language, {
+			hour: '2-digit',
+			minute: '2-digit'
+		}).format(arrival)
+	}
+
 	if (isLoading) return <h1>Loading...</h1>
 	if (error) return <h1>Error: {JSON.stringify(error)}</h1>
 	if (data === undefined) return <h1>No data</h1>
@@ -58,12 +67,23 @@ export function Stop(): JSX.Element {
 							<tr key={idx}>
 								<td>{estimate.line}</td>
 								<td>{estimate.route}</td>
-								<td>{estimate.minutes}</td>
-								<td>{estimate.meters}</td>
+								<td>
+									{estimate.minutes} ({absoluteArrivalTime(estimate.minutes)})
+								</td>
+								<td>
+									{estimate.meters > -1
+										? `${estimate.meters} metros`
+										: "No disponible"
+									}
+								</td>
 							</tr>
 						))}
 				</tbody>
 			</table>
+
+			<p>
+				<a href="/">Volver al inicio</a>
+			</p>
 		</>
 	)
 }