From 2120275e14ae9dbfa1d79dd9799414c2de1c019a Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <ynerant@emy.lu>
Date: Fri, 2 Feb 2024 23:10:53 +0100
Subject: [PATCH] Suppress warnings

---
 sncf-station/src/TrainsTable.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/sncf-station/src/TrainsTable.js b/sncf-station/src/TrainsTable.js
index 3238f9c..68a5904 100644
--- a/sncf-station/src/TrainsTable.js
+++ b/sncf-station/src/TrainsTable.js
@@ -11,14 +11,14 @@ import {
 } from "@mui/material"
 import {CSSTransition, TransitionGroup} from 'react-transition-group'
 import {useQueries, useQuery} from "@tanstack/react-query";
-import {useCallback, useEffect, useMemo} from "react";
+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>
@@ -77,7 +77,8 @@ function TrainsTableBody({stop, date, time, tableType}) {
       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>)
 
@@ -138,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"