Replace Bootstrap with Material UI

sncf-station/src/Station.js

@@ -1,35 +1,27 @@
-import './sncf.scss'
 import {useParams, useSearchParams} from "react-router-dom"
 import TrainsTable from "./TrainsTable"
 import {useEffect, useState} from "react";
+import {Box, Button, FormControl, FormControlLabel, FormGroup, FormLabel} from "@mui/material";
+import {DatePicker, DateTimePicker, TimePicker} from "@mui/x-date-pickers";
+import dayjs from "dayjs";
 
 function DateTimeSelector({date, time}) {
   return <>
-    <form>
-      <div className="form-group row">
-        <div className="col-sm-2">
-          Modifier la date et l'heure de recherche
-        </div>
-        <label htmlFor="date" className="col-sm-1 col-form-label">Date</label>
-        <div className="col-sm-1">
-          <input type="date" name="date" className="form-control" id="date" defaultValue={date} />
-        </div>
-        <label htmlFor="time" className="col-sm-1 col-form-label">Heure</label>
-        <div className="col-sm-1">
-          <input type="time" name="time" className="form-control" id="time" defaultValue={time} />
-        </div>
-        <div className="col-sm-1">
-          <button type="submit" className="btn btn-primary">Rechercher</button>
-        </div>
-      </div>
-    </form>
+    <Box component="form" display="flex" alignItems="center" sx={{'& .MuiTextField-root': { m: 1, width: '25ch' },}}>
+        <FormLabel>
+          Modifier la date et l'heure de recherche :
+        </FormLabel>
+        <DatePicker name="date" label="Date" format="YYYY-MM-DD" defaultValue={dayjs(`${date}`)} />
+        <TimePicker name="time" label="Heure" format="HH:mm" defaultValue={dayjs(`${date} ${time}`)} />
+        <Button type="submit">Rechercher</Button>
+    </Box>
   </>
 }
 
 function Station() {
   let {stopId} = useParams()
   let [stop, setStop] = useState({'name': "Chargement…"})
-  let [searchParams, setSearchParams] = useSearchParams()
+  let [searchParams, _setSearchParams] = useSearchParams()
   const now = new Date()
   let dateNow = now.toISOString().split('T')[0]
   let timeNow = now.toTimeString().split(' ')[0].substring(0, 5)
@@ -44,6 +36,16 @@ function Station() {
       })
   }, [stopId])
 
+  if (time === timeNow) {
+    setInterval(() => {
+      const now = new Date()
+      let dateNow = now.toISOString().split('T')[0]
+      let timeNow = now.toTimeString().split(' ')[0].substring(0, 5)
+      setDate(dateNow)
+      setTime(timeNow)
+    }, 60000)
+  }
+
   return (
     <div className="Station">
       <header className="App-header">