Add enter and exit animations

sncf-station/package-lock.json

@@ -20,6 +20,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.21.3",
         "react-scripts": "5.0.1",
+        "react-transition-group": "^4.4.5",
         "sass": "^1.70.0",
         "web-vitals": "^2.1.4"
       }

sncf-station/package.json

@@ -15,6 +15,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
+    "react-transition-group": "^4.4.5",
     "sass": "^1.70.0",
     "web-vitals": "^2.1.4"
   },

sncf-station/src/App.css

@@ -0,0 +1,19 @@
+.shrink-enter {
+  transform: translateY(100%);
+  opacity: 0;
+}
+.shrink-enter-active {
+  transform: translateY(0);
+  opacity: 1;
+  transition: transform 500ms ease-out, opacity 500ms ease-out;
+}
+.shrink-exit {
+  transform: translateY(0);
+  height: 100%;
+  opacity: 1;
+}
+.shrink-exit-active {
+  transform: translateY(-100%);
+  opacity: 0;
+  transition: transform 500ms ease-in, opacity 500ms ease-in;
+}

sncf-station/src/App.js

@@ -5,6 +5,7 @@ import React, {useMemo} from "react"
 import {frFR, LocalizationProvider} from "@mui/x-date-pickers"
 import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"
 import 'dayjs/locale/fr'
+import './App.css'
 
 function App() {
   const router = createBrowserRouter([

sncf-station/src/Station.js

@@ -23,8 +23,8 @@ function Station() {
   let [stop, setStop] = useState({'name': "Chargement…"})
   let [searchParams, _setSearchParams] = useSearchParams()
   const now = new Date()
-  let dateNow = now.toISOString().split('T')[0]
+  let dateNow = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
-  let timeNow = now.toTimeString().split(' ')[0].substring(0, 5)
+  let timeNow = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
   let [date, setDate] = useState(searchParams.get('date') || dateNow)
   let [time, setTime] = useState(searchParams.get('time') || timeNow)
 
@@ -39,8 +39,8 @@ function Station() {
   if (time === timeNow) {
     setInterval(() => {
       const now = new Date()
-      let dateNow = now.toISOString().split('T')[0]
+      let dateNow = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
-      let timeNow = now.toTimeString().split(' ')[0].substring(0, 5)
+      let timeNow = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
       setDate(dateNow)
       setTime(timeNow)
     }, 60000)

sncf-station/src/TrainsTable.js

@@ -1,7 +1,6 @@
-import {useEffect, useState} from "react";
+import {useEffect, useState} from "react"
 import {
   Box,
-  Paper,
   styled,
   Table,
   TableBody,
@@ -10,7 +9,8 @@ import {
   TableHead,
   TableRow,
   Typography
-} from "@mui/material";
+} from "@mui/material"
+import {CSSTransition, TransitionGroup} from 'react-transition-group'
 
 const StyledTableRow = styled(TableRow)(({ theme, tableType }) => ({
   'tbody &:nth-of-type(odd)': {
@@ -62,11 +62,17 @@ function TrainsTableBody({stop, date, time, tableType}) {
     }
   }, [stop, tableType, date, time])
 
-  let table_rows = trains.map((train) => <TrainRow train={train} tableType={tableType} />)
+  let table_rows = trains.map((train) => <CSSTransition key={train.id} timeout={500} classNames="shrink">
+      <TrainRow train={train} tableType={tableType} />
+    </CSSTransition>)
 
-  return <TableBody>
+  return <>
+    <TableBody>
+      <TransitionGroup component={null}>
         {table_rows}
+      </TransitionGroup>
     </TableBody>
+  </>
 }
 
 function TrainRow({train, tableType}) {