src/Station.js

@@ -1,13 +1,14 @@
 import {useNavigate, useParams, useSearchParams} from "react-router-dom"
 import TrainsTable from "./TrainsTable"
-import {useEffect, useState} from "react"
-import {Box, Checkbox, FormLabel} from "@mui/material"
+import TripsFilter from "./TripsFilter"
+import {useState} from "react"
+import {Box, Button, 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, realtime, setRealtime}) {
+function DateTimeSelector({datetime, setDatetime}) {
   const navigate = useNavigate()
 
   function onStationSelected(event, station) {
@@ -17,18 +18,14 @@ function DateTimeSelector({datetime, setDatetime, realtime, setRealtime}) {
 
   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} disabled={realtime} readOnly={realtime} />
-      <Checkbox onChange={event => setRealtime(event.target.checked)} checked={realtime} />
-      <FormLabel>
-        Temps réel
-      </FormLabel>
+        <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} />
     </Box>
   </>
 }
@@ -38,18 +35,9 @@ 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 ((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) {
+  if (datetime.format() !== searchParams.get('time')) {
     searchParams.set('time', datetime.format())
-    searchParams.set('realtime', "0")
     window.history.replaceState({}, '', '?' + searchParams.toString())
   }
 
@@ -62,14 +50,11 @@ function Station() {
   })
   const station = stationQuery.data?.stopTimes[0].place ?? {name: "Chargement…"}
 
-  useEffect(() => {
-    if (realtime) {
-      const interval = setInterval(() => {
-        setDatetime(dayjs())
-      }, 5000)
-      return () => clearInterval(interval)
-      }
-  }, [realtime])
+  if (searchParams.get("time") === undefined) {
+    setInterval(() => {
+      setDatetime(dayjs())
+    }, 5000)
+  }
 
   return (
     <div className="Station">
@@ -78,10 +63,10 @@ function Station() {
       </header>
 
       <main>
-        <DateTimeSelector datetime={datetime} setDatetime={setDatetime} realtime={realtime} setRealtime={setRealtime} />
-        {/*<TripsFilter />*/}
-        <TrainsTable station={station} datetime={datetime} realtime={realtime} tableType="departures" />
-        <TrainsTable station={station} datetime={datetime} realtime={realtime} tableType="arrivals" />
+        <DateTimeSelector datetime={datetime} setDatetime={setDatetime} />
+        <TripsFilter />
+        <TrainsTable station={station} datetime={datetime} tableType="departures" />
+        <TrainsTable station={station} datetime={datetime} tableType="arrivals" />
       </main>
     </div>
   )

src/TrainsTable.js

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