Add stop autocomplete component in station page

sncf-station/src/App.js

@@ -9,12 +9,13 @@ import './App.css'
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 import {createSyncStoragePersister} from "@tanstack/query-sync-storage-persister";
 import {persistQueryClient} from "@tanstack/react-query-persist-client";
+import Home from "./Home";
 
 function App() {
   const router = createBrowserRouter([
     {
       path: "/",
-      element: <div>Hello World!</div>
+      element: <Home />,
     },
     {
       path: "/station/:stopId",

sncf-station/src/AutocompleteStop.jsx

@@ -0,0 +1,42 @@
+import {Autocomplete, TextField} from "@mui/material";
+import {useRef, useState} from "react";
+
+function AutocompleteStop(params) {
+  const [options, setOptions] = useState([])
+  const previousController = useRef()
+
+  function onInputChange(event, value) {
+    if (!value) {
+      setOptions([])
+      return
+    }
+
+    if (previousController.current)
+      previousController.current.abort()
+
+    const controller = new AbortController()
+    const signal = controller.signal
+    previousController.current = controller
+    fetch("/api/gtfs/stop/?location_type=1&search=" + value, {signal})
+      .then(response => response.json())
+      .then(data => data.results)
+      .then(setOptions)
+      .catch()
+  }
+
+  return <>
+    <Autocomplete
+      id="stop"
+      options={options}
+      onInputChange={onInputChange}
+      filterOptions={(x) => x}
+      getOptionKey={option => option.id}
+      getOptionLabel={option => option.name}
+      groupBy={option => option.id.startsWith("IDFM") ? "Transilien" : "TER/TGV/Intercités"}
+      isOptionEqualToValue={(option, value) => option.id === value.id}
+      renderInput={(params) => <TextField {...params} label="Arrêt" />}
+      {...params} />
+  </>
+}
+
+export default AutocompleteStop;

sncf-station/src/Home.js

@@ -0,0 +1,20 @@
+import AutocompleteStop from "./AutocompleteStop"
+import {useNavigate} from "react-router-dom"
+
+function Home() {
+  const navigate = useNavigate()
+
+  function onStationSelected(event, stop) {
+    navigate(`/station/${stop.id}/`)
+  }
+
+  return <>
+    <h1>Horaires SNCF</h1>
+    <h2>
+      Choisissez une gare dont vous désirez connaître le tableau des prochains départs et arrivées :
+    </h2>
+    <AutocompleteStop onChange={onStationSelected} />
+  </>
+}
+
+export default Home;

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>

sncf/api/views.py

@@ -6,7 +6,7 @@ from django.views.decorators.cache import cache_control
 from django.views.decorators.http import last_modified
 from django_filters.rest_framework import DjangoFilterBackend
 from rest_framework import viewsets
-from rest_framework.filters import OrderingFilter
+from rest_framework.filters import OrderingFilter, SearchFilter
 
 from sncf.api.serializers import AgencySerializer, StopSerializer, RouteSerializer, TripSerializer, \
     StopTimeSerializer, CalendarSerializer, CalendarDateSerializer, TransferSerializer, \
@@ -33,8 +33,9 @@ class AgencyViewSet(viewsets.ReadOnlyModelViewSet):
 class StopViewSet(viewsets.ReadOnlyModelViewSet):
     queryset = Stop.objects.all()
     serializer_class = StopSerializer
-    filter_backends = [DjangoFilterBackend]
+    filter_backends = [DjangoFilterBackend, SearchFilter]
     filterset_fields = '__all__'
+    search_fields = ['name',]
 
 
 @method_decorator(name='list', decorator=[CACHE_CONTROL, LAST_MODIFIED])