Use local cache to optimize display

2024-02-02 00:50:50 +01:00 · 2024-02-02 00:50:50 +01:00 · 311a29cf4b
parent edbc01122d
commit 311a29cf4b
5 changed files with 179 additions and 85 deletions
--- a/sncf-station/package-lock.json
+++ b/sncf-station/package-lock.json
@ -12,6 +12,9 @@
        "@emotion/styled": "^11.11.0",
        "@mui/material": "^5.15.6",
        "@mui/x-date-pickers": "^6.19.2",
+        "@tanstack/query-sync-storage-persister": "^5.18.0",
+        "@tanstack/react-query": "^5.18.0",
+        "@tanstack/react-query-persist-client": "^5.18.0",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
@ -4181,6 +4184,71 @@
        "url": "https://github.com/sponsors/gregberge"
      }
    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.18.0.tgz",
+      "integrity": "sha512-8c6nxeAnGHxIDZIyDmHdmgFt4D+LprAQaJmjsnM4szcIjsWOyFlzxdqQUuQ/XuQRvUgqYaqlJTtDADlSS7pTPQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-persist-client-core": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.18.0.tgz",
+      "integrity": "sha512-CXmUP8GYW1LL9tQC8vmuaK3XKWR3GaP8Bhy2bpgbIX5aOTN0qWL4zVema4hclgNahpTlY13P67Biab8ieB6frA==",
+      "dependencies": {
+        "@tanstack/query-core": "5.18.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-sync-storage-persister": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-5.18.0.tgz",
+      "integrity": "sha512-a+ztQhpnWRmQN8kn/IVscgxmSnBZER2TbrLkocZGzowecxT+Lm0RzbX+Dl2lVz92XXHFmhAjAXhWG61rbqQTng==",
+      "dependencies": {
+        "@tanstack/query-core": "5.18.0",
+        "@tanstack/query-persist-client-core": "5.18.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.18.0.tgz",
+      "integrity": "sha512-7FKxNfxxKEL7n3ADpwp81Fy4FX85hNkYVzQQVQsF0JAPl93c3d1gmNZMIbEtOqgYfom1/ontGh3FiZGYj3xyWA==",
+      "dependencies": {
+        "@tanstack/query-core": "5.18.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/react-query-persist-client": {
+      "version": "5.18.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.18.0.tgz",
+      "integrity": "sha512-XS3C3tMcnBosptRhn4kN5RBs6j8iRiE7tVr7XN73We4o3VNo86+zEe4iOwO+ziTq0Dawnc4kCjUVS3tZ2DiKhg==",
+      "dependencies": {
+        "@tanstack/query-persist-client-core": "5.18.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.18.0",
+        "react": "^18.0.0"
+      }
+    },
    "node_modules/@testing-library/dom": {
      "version": "9.3.4",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
--- a/sncf-station/package.json
+++ b/sncf-station/package.json
@ -7,6 +7,9 @@
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.15.6",
    "@mui/x-date-pickers": "^6.19.2",
+    "@tanstack/query-sync-storage-persister": "^5.18.0",
+    "@tanstack/react-query": "^5.18.0",
+    "@tanstack/react-query-persist-client": "^5.18.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
--- a/sncf-station/src/App.js
+++ b/sncf-station/src/App.js
@ -6,6 +6,9 @@ import {frFR, LocalizationProvider} from "@mui/x-date-pickers"
 import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"
 import 'dayjs/locale/fr'
 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";

 function App() {
  const router = createBrowserRouter([
@ -40,11 +43,32 @@ function App() {
      [prefersDarkMode],
    );

+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        gcTime: 1000 * 60 * 60 * 24, // 3 hours
+        staleTime: 1000 * 60 * 60 * 3, // 3 hours
+        notifyOnChangeProps: ['data', 'error'],
+      },
+    },
+  })
+
+  const localStoragePersister = createSyncStoragePersister({
+    storage: window.localStorage,
+  })
+
+  persistQueryClient({
+    queryClient,
+    persister: localStoragePersister,
+  })
+
  return <>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <LocalizationProvider dateAdapter={AdapterDayjs} localeText={frFR.components.MuiLocalizationProvider.defaultProps.localeText} adapterLocale="fr">
+        <QueryClientProvider client={queryClient}>
          <RouterProvider router={router} />
+        </QueryClientProvider>
      </LocalizationProvider>
    </ThemeProvider>
  </>
--- a/sncf-station/src/Station.js
+++ b/sncf-station/src/Station.js
@ -1,9 +1,10 @@
 import {useParams, useSearchParams} from "react-router-dom"
 import TrainsTable from "./TrainsTable"
-import {useEffect, useState} from "react";
-import {Box, Button, FormControl, FormControlLabel, FormGroup, FormLabel} from "@mui/material";
-import {DatePicker, DateTimePicker, TimePicker} from "@mui/x-date-pickers";
+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";

 function DateTimeSelector({date, time}) {
  return <>
@ -20,7 +21,6 @@ function DateTimeSelector({date, time}) {

 function Station() {
  let {stopId} = useParams()
-  let [stop, setStop] = useState({'name': "Chargement…"})
  let [searchParams, _setSearchParams] = useSearchParams()
  const now = new Date()
  let dateNow = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
@ -28,13 +28,14 @@ function Station() {
  let [date, setDate] = useState(searchParams.get('date') || dateNow)
  let [time, setTime] = useState(searchParams.get('time') || timeNow)

-  useEffect(() => {
-    fetch(`http://localhost:8000/api/gtfs/stop/${stopId}/`)
-      .then(response => response.json())
-      .then(data => {
-        setStop(data)
+  useQueryClient()
+  const stopQuery = useQuery({
+    queryKey: ['stop', stopId],
+    queryFn: () => fetch(`http://localhost:8000/api/gtfs/stop/${stopId}/`)
+      .then(response => response.json()),
+    enabled: !!stopId,
  })
-  }, [stopId])
+  const stop = stopQuery.data ?? {name: "Chargement…"}

  if (time === timeNow) {
    setInterval(() => {
@ -43,7 +44,7 @@ function Station() {
      let timeNow = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
      setDate(dateNow)
      setTime(timeNow)
-    }, 60000)
+    }, 5000)
  }

  return (
--- a/sncf-station/src/TrainsTable.js
+++ b/sncf-station/src/TrainsTable.js
@ -1,4 +1,3 @@
-import {useEffect, useState} from "react"
 import {
  Box,
  styled,
@ -11,6 +10,8 @@ import {
  Typography
 } from "@mui/material"
 import {CSSTransition, TransitionGroup} from 'react-transition-group'
+import {useQueries, useQuery, useQueryClient} from "@tanstack/react-query";
+import {useEffect, useState} from "react";

 const StyledTableRow = styled(TableRow)(({ theme, tableType }) => ({
  'tbody &:nth-of-type(odd)': {
@ -49,27 +50,37 @@ function TrainsTableHeader({tableType}) {
 }

 function TrainsTableBody({stop, date, time, tableType}) {
-  const [trains, setTrains] = useState([])
+  const queryClient = useQueryClient()

-  useEffect(() => {
-    if (stop.id !== undefined) {
-      let validTrains = trains.filter(train => {
+  let filterTime = (train) => {
+    if (train.departure_time === "04:56:00")
+      return false
    if (tableType === "departures")
      return `${train.departure_date}T${train.departure_time_24h}` >= `${date}T${time}`
    else
      return `${train.arrival_date}T${train.arrival_time_24h}` >= `${date}T${time}`
-      })
-      if (trains.length > 0 && validTrains.length === trains.length)
-        return
-      console.log(`${trains.length - validTrains.length} trains deleted`)
-      fetch(`http://localhost:8000/api/station/next_${tableType}/?stop_id=${stop.id}&date=${date}&time=${time}&offset=${validTrains.length}&limit=${20 - validTrains.length}`)
+  }
+
+  function updateTrains() {
+    return fetch(`http://localhost:8000/api/station/next_${tableType}/?stop_id=${stop.id}&date=${date}&time=${time}&offset=${0}&limit=${20}`)
        .then(response => response.json())
        .then(data => data.results)
-        .then(data => {
-          setTrains(trains => [...validTrains, ...data])
-        })
+        .then(data => [...data])
  }
-  }, [stop, tableType, date, time])
+
+  const trainsQuery = useQuery({
+    queryKey: ['trains', stop.id, tableType],
+    queryFn: updateTrains,
+    enabled: !!stop.id,
+  })
+  const trains = trainsQuery.data ?? []
+
+  useEffect(() => {
+    let validTrains = trains?.filter(filterTime) ?? []
+    console.log(validTrains.length)
+    if (trains?.length > 0 && validTrains.length <= trains?.length)
+      queryClient.invalidateQueries({queryKey: ['trains', stop.id, tableType]})
+  }, [stop.id, tableType, date, time])

  let table_rows = trains.map((train) => <CSSTransition key={train.id} timeout={500} classNames="shrink">
      <TrainRow train={train} tableType={tableType} />
@ -85,64 +96,51 @@ function TrainsTableBody({stop, date, time, tableType}) {
 }

 function TrainRow({train, tableType}) {
-  const [trip, setTrip] = useState({})
-  const [route, setRoute] = useState({})
-  const [stopTimes, setStopTimes] = useState([])
-  const [trainType, setTrainType] = useState("")
+  const tripQuery = useQuery({
+    queryKey: ['trip', train.trip],
+    queryFn: () => fetch(`http://localhost:8000/api/gtfs/trip/${train.trip}/`)
+        .then(response => response.json()),
+    enabled: !!train.trip,
+  })
+  const trip = tripQuery.data ?? {}

-  useEffect(() => {
-    if (train.trip !== undefined) {
-      fetch(`http://localhost:8000/api/gtfs/trip/${train.trip}/`)
+  const routeQuery = useQuery({
+    queryKey: ['route', trip.route],
+    queryFn: () => fetch(`http://localhost:8000/api/gtfs/route/${trip.route}/`)
+        .then(response => response.json()),
+    enabled: !!trip.route,
+  })
+  const route = routeQuery.data ?? {}
+  const trainType = getTrainType(train, route)
+
+  const stopTimesQuery = useQuery({
+    queryKey: ['stop_times', trip.id],
+    queryFn: () => fetch(`http://localhost:8000/api/gtfs/stop_time/?trip=${trip.id}&order=stop_sequence&limit=1000`)
        .then(response => response.json())
-        .then(t => {
-          t.stop_times = []
-          setTrip(t)
+        .then(data => data.results),
+    enabled: !!trip.id,
  })
-    }
-  }, [train.trip])
+  const stopTimes = stopTimesQuery.data ?? []
+  const stopIds = stopTimes.map(stop_time => stop_time.stop)

-  useEffect(() => {
-    if (trip.route !== undefined) {
-      fetch(`http://localhost:8000/api/gtfs/route/${trip.route}/`)
-        .then(response => response.json())
-        .then(data => {
-          setRoute(data)
+  const stopQueries = useQueries({
+    queries: stopIds.map(stopId => ({
+      queryKey: ['stop', stopId],
+      queryFn: () => fetch(`http://localhost:8000/api/gtfs/stop/${stopId}/`)
+        .then(response => response.json()),
+      enabled: !!stopId,
+    })),
  })
-    }
-  }, [trip.route])
+  const stops = stopTimes.map(((stopTime, i) => ({...stopTime, stop: stopQueries[i]?.data ?? {"name": "…"}}))) ?? []

-  useEffect(() => {
-    if (route !== undefined) {
-      setTrainType(getTrainType(train, route))
-    }
-  }, [train, route]);
+  let headline = stops[tableType === "departures" ? stops.length - 1 : 0]?.stop ?? {name: "Chargement…"}

-  useEffect(() => {
-    if (trip.route !== undefined) {
-      fetch(`http://localhost:8000/api/gtfs/stop_time/?trip=${trip.id}&order=stop_sequence&limit=1000`)
-        .then(response => response.json())
-        .then(data => data.results)
-        .then(stop_times => {
-          Promise.all(stop_times.map(stop_time =>
-            fetch(`http://localhost:8000/api/gtfs/stop/${stop_time.stop}/`).then(response => response.json())
-          )).then(stops => {
-            setStopTimes(stop_times.map((stop_time, index) => {
-              stop_time.stop = stops[index]
-              return stop_time
-            }))
-          })
-        })
-    }
-  }, [trip.route])
-
-  let headline = stopTimes[tableType === "departures" ? stopTimes.length - 1 : 0]?.stop ?? {name: "Chargement…"}
-
-  let stops_filter
+  let stopsFilter
  if (tableType === "departures")
-    stops_filter = (stop_time) => stop_time.stop_sequence > train.stop_sequence && stop_time.drop_off_type === 0
+    stopsFilter = (stop_time) => stop_time.stop_sequence > train.stop_sequence && stop_time.drop_off_type === 0
  else
-    stops_filter = (stop_time) => stop_time.stop_sequence < train.stop_sequence && stop_time.pickup_type === 0
-  let stops_names = stopTimes.filter(stops_filter).map(stop_time => stop_time?.stop.name ?? "").join(", ")
+    stopsFilter = (stop_time) => stop_time.stop_sequence < train.stop_sequence && stop_time.pickup_type === 0
+  let stopsNames = stops.filter(stopsFilter).map(stopTime => stopTime?.stop.name ?? "").join(", ") ?? ""

  return <>
    <StyledTableRow tableType={tableType}>
@ -176,8 +174,8 @@ function TrainRow({train, tableType}) {
        </Box>
      </TableCell>
      <TableCell>
-        <Typography fontSize={24} fontWeight="bold">{headline.name}</Typography>
-        <span className="stops">{stops_names}</span>
+        <Typography fontSize={24} fontWeight="bold" data-stop-id={headline.id}>{headline.name}</Typography>
+        <span className="stops">{stopsNames}</span>
      </TableCell>
    </StyledTableRow>
  </>