From 6dfd04ae7eaa54725f6f3da26d57a4ad767984b9 Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <ynerant@emy.lu>
Date: Sat, 3 Feb 2024 00:52:52 +0100
Subject: [PATCH] Autocomplete stops

---
 sncf-station/src/App.js               |  3 +-
 sncf-station/src/AutocompleteStop.jsx | 42 +++++++++++++++++++++++++++
 sncf-station/src/Home.js              | 20 +++++++++++++
 sncf/api/views.py                     |  5 ++--
 4 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 sncf-station/src/AutocompleteStop.jsx
 create mode 100644 sncf-station/src/Home.js

diff --git a/sncf-station/src/App.js b/sncf-station/src/App.js
index 97d9f4b..bad617c 100644
--- a/sncf-station/src/App.js
+++ b/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",
diff --git a/sncf-station/src/AutocompleteStop.jsx b/sncf-station/src/AutocompleteStop.jsx
new file mode 100644
index 0000000..5b8fed9
--- /dev/null
+++ b/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;
diff --git a/sncf-station/src/Home.js b/sncf-station/src/Home.js
new file mode 100644
index 0000000..4366fd5
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/sncf/api/views.py b/sncf/api/views.py
index 0722bcf..904ac01 100644
--- a/sncf/api/views.py
+++ b/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])