Fix realtime mode

src/Station.js

@@ -1,14 +1,14 @@
 import {useNavigate, useParams, useSearchParams} from "react-router-dom"
 import TrainsTable from "./TrainsTable"
 import TripsFilter from "./TripsFilter"
-import {useState} from "react"
-import {Box, Button, FormLabel} from "@mui/material"
+import {useEffect, useState} from "react"
+import {Box, Checkbox, FormLabel} from "@mui/material"
 import {DateTimePicker} from "@mui/x-date-pickers"
 import dayjs from "dayjs"
 import {useQuery, useQueryClient} from "@tanstack/react-query"
 import AutocompleteStation from "./AutocompleteStation"
 
-function DateTimeSelector({datetime, setDatetime}) {
+function DateTimeSelector({datetime, setDatetime, realtime, setRealtime}) {
   const navigate = useNavigate()
 
   function onStationSelected(event, station) {
@@ -18,14 +18,18 @@ function DateTimeSelector({datetime, setDatetime}) {
 
   return <>
     <Box component="form" display="flex" alignItems="center" sx={{'& .MuiTextField-root': { m: 1, width: '25ch' },}}>
-        <FormLabel>
-          Changer la gare recherchée :
-        </FormLabel>
-        <AutocompleteStation onChange={onStationSelected} />
-        <FormLabel>
-          Modifier la date et l'heure de recherche :
-        </FormLabel>
-        <DateTimePicker name="date" label="Date" onChange={setDatetime} value={datetime} />
+      <FormLabel>
+        Changer la gare recherchée :
+      </FormLabel>
+      <AutocompleteStation onChange={onStationSelected} />
+      <FormLabel>
+        Modifier la date et l'heure de recherche :
+      </FormLabel>
+      <DateTimePicker name="date" label="Date" onChange={setDatetime} value={datetime} disabled={realtime} readOnly={realtime} />
+      <Checkbox onChange={event => setRealtime(event.target.checked)} checked={realtime} />
+      <FormLabel>
+        Temps réel
+      </FormLabel>
     </Box>
   </>
 }
@@ -35,9 +39,18 @@ function Station() {
   let {theme, stationId} = useParams()
   // eslint-disable-next-line no-unused-vars
   let [searchParams, setSearchParams] = useSearchParams()
+  const [realtime, setRealtime] = useState(searchParams.get('realtime') === "1" || false)
   const [datetime, setDatetime] = useState(dayjs(searchParams.get('time') || undefined))
-  if (datetime.format() !== searchParams.get('time')) {
+  if ((searchParams.get('realtime') === null || searchParams.get('realtime') === "0")
+    && (searchParams.get('time') === null || realtime)) {
+    searchParams.set('realtime', "1")
+    searchParams.delete("time")
+    setRealtime(true)
+    window.history.replaceState({}, '', '?' + searchParams.toString())
+  }
+  else if (datetime.format() !== searchParams.get('time') && !realtime) {
     searchParams.set('time', datetime.format())
+    searchParams.set('realtime', "0")
     window.history.replaceState({}, '', '?' + searchParams.toString())
   }
 
@@ -50,11 +63,14 @@ function Station() {
   })
   const station = stationQuery.data?.stopTimes[0].place ?? {name: "Chargement…"}
 
-  if (searchParams.get("time") === undefined) {
-    setInterval(() => {
-      setDatetime(dayjs())
-    }, 5000)
-  }
+  useEffect(() => {
+    if (realtime) {
+      const interval = setInterval(() => {
+        setDatetime(dayjs())
+      }, 5000)
+      return () => clearInterval(interval)
+      }
+  }, [realtime])
 
   return (
     <div className="Station">
@@ -63,10 +79,10 @@ function Station() {
       </header>
 
       <main>
-        <DateTimeSelector datetime={datetime} setDatetime={setDatetime} />
+        <DateTimeSelector datetime={datetime} setDatetime={setDatetime} realtime={realtime} setRealtime={setRealtime} />
         <TripsFilter />
-        <TrainsTable station={station} datetime={datetime} tableType="departures" />
-        <TrainsTable station={station} datetime={datetime} tableType="arrivals" />
+        <TrainsTable station={station} datetime={datetime} realtime={realtime} tableType="departures" />
+        <TrainsTable station={station} datetime={datetime} realtime={realtime} tableType="arrivals" />
       </main>
     </div>
   )

src/TrainsTable.js

@@ -27,12 +27,12 @@ const StyledTableRow = styled(TableRow)(({ theme, tabletype }) => ({
   },
 }));
 
-function TrainsTable({station, datetime, tableType}) {
+function TrainsTable({station, datetime, realtime, tableType}) {
   return <>
     <TableContainer>
       <Table>
         <TrainsTableHeader tableType={tableType} />
-        <TrainsTableBody station={station} datetime={datetime} tableType={tableType} />
+        <TrainsTableBody station={station} datetime={datetime} realtime={realtime} tableType={tableType} />
       </Table>
     </TableContainer>
   </>
@@ -50,7 +50,7 @@ function TrainsTableHeader({tableType}) {
   </>
 }
 
-function TrainsTableBody({station, datetime, tableType}) {
+function TrainsTableBody({station, datetime, realtime, tableType}) {
   const filterTime = useCallback((train) => {
     if (tableType === "departures")
       return dayjs(train.place.departure) >= datetime
@@ -59,30 +59,35 @@ function TrainsTableBody({station, datetime, tableType}) {
   }, [datetime, tableType])
 
   const updateTrains = useCallback(() => {
-    const query_params = new URLSearchParams({
+    const params = {
       stopId: station.stopId,
       arriveBy: tableType === "arrivals",
-      time: datetime.format(),
+      direction: "LATER",
       n: 20,
-    }).toString()
+    }
+    if (!realtime)
+      params['time'] = datetime.format()
+    const query_params = new URLSearchParams(params).toString()
     return fetch(`${process.env.REACT_APP_MOTIS_SERVER}/api/v1/stoptimes?${query_params}`)
         .then(response => response.json())
         .then(data => data.stopTimes)
         .then(data => [...data])
-  }, [station.stopId, tableType, datetime])
+  }, [station.stopId, tableType, datetime, realtime])
 
   const trainsQuery = useQuery({
-    queryKey: ['trains', station.stopId, tableType, datetime],
+    queryKey: ['trains', station.stopId, tableType],
     queryFn: updateTrains,
     enabled: !!station.stopId,
   })
   const trains = useMemo(() => trainsQuery.data ?? [], [trainsQuery.data])
 
   useEffect(() => {
-    let validTrains = trains?.filter(filterTime) ?? []
-    if (trains?.length > 0 && validTrains.length < trains?.length)
-      trainsQuery.refetch().then()
-  }, [trains, filterTime, trainsQuery])
+    if (realtime) {
+      let validTrains = trains?.filter(filterTime) ?? []
+      if ((trains?.length > 0 && validTrains.length < trains?.length))
+        trainsQuery.refetch().then()
+    }
+  }, [trains, filterTime, trainsQuery, realtime])
 
   const nullRef = useRef(null)
   let table_rows = trains.map((train) => <CSSTransition key={train.id} timeout={500} classNames="shrink" nodeRef={nullRef}>