From 1e7dd4c5171f12b9238c3785db75948833a90f0b Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <ynerant@emy.lu>
Date: Mon, 29 Jan 2024 01:33:42 +0100
Subject: [PATCH] Add enter and exit animations

---
 sncf-station/package-lock.json  |  1 +
 sncf-station/package.json       |  1 +
 sncf-station/src/App.css        | 19 +++++++++++++++++++
 sncf-station/src/App.js         |  1 +
 sncf-station/src/Station.js     |  8 ++++----
 sncf-station/src/TrainsTable.js | 20 +++++++++++++-------
 6 files changed, 39 insertions(+), 11 deletions(-)
 create mode 100644 sncf-station/src/App.css

diff --git a/sncf-station/package-lock.json b/sncf-station/package-lock.json
index baf68ab..fa311ce 100644
--- a/sncf-station/package-lock.json
+++ b/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"
       }
diff --git a/sncf-station/package.json b/sncf-station/package.json
index 0e81e2c..4161155 100644
--- a/sncf-station/package.json
+++ b/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"
   },
diff --git a/sncf-station/src/App.css b/sncf-station/src/App.css
new file mode 100644
index 0000000..6957a81
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/sncf-station/src/App.js b/sncf-station/src/App.js
index dbdd5d8..f50e521 100644
--- a/sncf-station/src/App.js
+++ b/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([
diff --git a/sncf-station/src/Station.js b/sncf-station/src/Station.js
index c53f492..fed9001 100644
--- a/sncf-station/src/Station.js
+++ b/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 timeNow = now.toTimeString().split(' ')[0].substring(0, 5)
+  let dateNow = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
+  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 timeNow = now.toTimeString().split(' ')[0].substring(0, 5)
+      let dateNow = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
+      let timeNow = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
       setDate(dateNow)
       setTime(timeNow)
     }, 60000)
diff --git a/sncf-station/src/TrainsTable.js b/sncf-station/src/TrainsTable.js
index f852b16..104b16b 100644
--- a/sncf-station/src/TrainsTable.js
+++ b/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>
-    {table_rows}
-  </TableBody>
+  return <>
+    <TableBody>
+      <TransitionGroup component={null}>
+        {table_rows}
+      </TransitionGroup>
+    </TableBody>
+  </>
 }
 
 function TrainRow({train, tableType}) {