Add stop autocomplete component in station page

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>