Suppress warnings

sncf-station/src/TrainsTable.js

@@ -10,15 +10,15 @@ 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";
+import {useQueries, useQuery} from "@tanstack/react-query";
+import {useCallback, useEffect, useMemo, useRef} from "react";
 
-const StyledTableRow = styled(TableRow)(({ theme, tableType }) => ({
+const StyledTableRow = styled(TableRow)(({ theme, tabletype }) => ({
   'tbody &:nth-of-type(odd)': {
-    backgroundColor: theme.palette.sncf[tableType].light,
+    backgroundColor: theme.palette.sncf[tabletype].light,
   },
   'th, &:nth-of-type(even)': {
-    backgroundColor: theme.palette.sncf[tableType].dark,
+    backgroundColor: theme.palette.sncf[tabletype].dark,
   },
   // hide last border
   '&:last-child td, &:last-child th': {
@@ -40,7 +40,7 @@ function TrainsTable({stop, date, time, tableType}) {
 function TrainsTableHeader({tableType}) {
   return <>
     <TableHead>
-      <StyledTableRow tableType={tableType}>
+      <StyledTableRow tabletype={tableType}>
         <TableCell colSpan="2" fontSize={16} fontWeight="bold">Train</TableCell>
         <TableCell fontSize={16} fontWeight="bold">Heure</TableCell>
         <TableCell fontSize={16} fontWeight="bold">Destination</TableCell>
@@ -50,39 +50,35 @@ function TrainsTableHeader({tableType}) {
 }
 
 function TrainsTableBody({stop, date, time, tableType}) {
-  const queryClient = useQueryClient()
-
-  let filterTime = (train) => {
-    if (train.departure_time === "04:56:00")
-      return false
+  const filterTime = useCallback((train) => {
     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}`
-  }
+  }, [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}`)
         .then(response => response.json())
         .then(data => data.results)
         .then(data => [...data])
-  }
+  }, [stop.id, date, time, tableType])
 
   const trainsQuery = useQuery({
     queryKey: ['trains', stop.id, tableType],
     queryFn: updateTrains,
     enabled: !!stop.id,
   })
-  const trains = trainsQuery.data ?? []
+  const trains = useMemo(() => trainsQuery.data ?? [], [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])
+    if (trains?.length > 0 && validTrains.length < trains?.length)
+      trainsQuery.refetch().then()
+  }, [trains, filterTime, trainsQuery])
 
-  let table_rows = trains.map((train) => <CSSTransition key={train.id} timeout={500} classNames="shrink">
+  const nullRef = useRef(null)
+  let table_rows = trains.map((train) => <CSSTransition key={train.id} timeout={500} classNames="shrink" nodeRef={nullRef}>
       <TrainRow train={train} tableType={tableType} />
     </CSSTransition>)
 
@@ -143,7 +139,7 @@ function TrainRow({train, tableType}) {
   let stopsNames = stops.filter(stopsFilter).map(stopTime => stopTime?.stop.name ?? "").join(", ") ?? ""
 
   return <>
-    <StyledTableRow tableType={tableType}>
+    <StyledTableRow tabletype={tableType}>
       <TableCell>
         <div>
           <Box display="flex"