From d7b95157504141aeac2097d023e36906ebf6e9a6 Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <ynerant@emy.lu>
Date: Sat, 3 Feb 2024 01:00:29 +0100
Subject: [PATCH] Add stop autocomplete component in station page

---
 sncf-station/src/Station.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/sncf-station/src/Station.js b/sncf-station/src/Station.js
index d25b011..080af9f 100644
--- a/sncf-station/src/Station.js
+++ b/sncf-station/src/Station.js
@@ -1,14 +1,25 @@
-import {useParams, useSearchParams} from "react-router-dom"
+import {useNavigate, useParams, useSearchParams} from "react-router-dom"
 import TrainsTable from "./TrainsTable"
 import {useState} from "react";
 import {Box, Button, FormLabel} from "@mui/material";
 import {DatePicker, TimePicker} from "@mui/x-date-pickers";
 import dayjs from "dayjs";
 import {useQuery, useQueryClient} from "@tanstack/react-query";
+import AutocompleteStop from "./AutocompleteStop";
+
+function DateTimeSelector({stop, date, time}) {
+  const navigate = useNavigate()
+
+  function onStationSelected(event, stop) {
+    navigate(`/station/${stop.id}/`)
+  }
 
-function DateTimeSelector({date, time}) {
   return <>
     <Box component="form" display="flex" alignItems="center" sx={{'& .MuiTextField-root': { m: 1, width: '25ch' },}}>
+        <FormLabel>
+          Changer la gare recherchée :
+        </FormLabel>
+        <AutocompleteStop onChange={onStationSelected} />
         <FormLabel>
           Modifier la date et l'heure de recherche :
         </FormLabel>
@@ -54,7 +65,7 @@ function Station() {
       </header>
 
       <main>
-        <DateTimeSelector date={date} time={time} />
+        <DateTimeSelector stop={stop} date={date} time={time} />
         <TrainsTable stop={stop} date={date} time={time} tableType="departures" />
         <TrainsTable stop={stop} date={date} time={time} tableType="arrivals" />
       </main>