ynerant
/
trainvel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve client cache and bug fix

This commit is contained in:
Emmy D'Anello 2024-02-02 22:54:19 +01:00
parent 836f2d39ee
commit 9910efe507
Signed by: ynerant
GPG Key ID: 3A75C55819C8CF85
1 changed files with 10 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
sncf-station/src/TrainsTable.js
View File

@ -10,8 +10,8 @@ import {
Typography Typography
} from "@mui/material" } from "@mui/material"
import {CSSTransition, TransitionGroup} from 'react-transition-group' import {CSSTransition, TransitionGroup} from 'react-transition-group'
import {useQueries, useQuery, useQueryClient} from "@tanstack/react-query"; import {useQueries, useQuery} from "@tanstack/react-query";
import {useEffect, useState} from "react"; import {useCallback, useEffect, useMemo} from "react";
const StyledTableRow = styled(TableRow)(({ theme, tableType }) => ({ const StyledTableRow = styled(TableRow)(({ theme, tableType }) => ({
'tbody &:nth-of-type(odd)': { 'tbody &:nth-of-type(odd)': {
@ -50,37 +50,32 @@ function TrainsTableHeader({tableType}) {
} }
function TrainsTableBody({stop, date, time, tableType}) { function TrainsTableBody({stop, date, time, tableType}) {
const queryClient = useQueryClient() const filterTime = useCallback((train) => {
let filterTime = (train) => {
if (train.departure_time === "04:56:00")
return false
if (tableType === "departures") if (tableType === "departures")
return `${train.departure_date}T${train.departure_time_24h}` >= `${date}T${time}` return `${train.departure_date}T${train.departure_time_24h}` >= `${date}T${time}`
else else
return `${train.arrival_date}T${train.arrival_time_24h}` >= `${date}T${time}` return `${train.arrival_date}T${train.arrival_time_24h}` >= `${date}T${time}`
} }, [date, time, tableType])
function updateTrains() { const updateTrains = useCallback(() => {
return fetch(`/api/station/next_${tableType}/?stop_id=${stop.id}&date=${date}&time=${time}&offset=${0}&limit=${20}`) return fetch(`/api/station/next_${tableType}/?stop_id=${stop.id}&date=${date}&time=${time}&offset=${0}&limit=${20}`)
.then(response => response.json()) .then(response => response.json())
.then(data => data.results) .then(data => data.results)
.then(data => [...data]) .then(data => [...data])
} }, [stop.id, date, time, tableType])
const trainsQuery = useQuery({ const trainsQuery = useQuery({
queryKey: ['trains', stop.id, tableType], queryKey: ['trains', stop.id, tableType],
queryFn: updateTrains, queryFn: updateTrains,
enabled: !!stop.id, enabled: !!stop.id,
}) })
const trains = trainsQuery.data ?? [] const trains = useMemo(() => trainsQuery.data ?? [], [trainsQuery.data])
useEffect(() => { useEffect(() => {
let validTrains = trains?.filter(filterTime) ?? [] let validTrains = trains?.filter(filterTime) ?? []
console.log(validTrains.length) if (trains?.length > 0 && validTrains.length < trains?.length)
if (trains?.length > 0 && validTrains.length <= trains?.length) trainsQuery.refetch().then()
queryClient.invalidateQueries({queryKey: ['trains', stop.id, tableType]}) }, [trains, filterTime, trainsQuery])
}, [stop.id, tableType, date, time])
let table_rows = trains.map((train) => <CSSTransition key={train.id} timeout={500} classNames="shrink"> let table_rows = trains.map((train) => <CSSTransition key={train.id} timeout={500} classNames="shrink">
<TrainRow train={train} tableType={tableType} /> <TrainRow train={train} tableType={tableType} />