From 5936213e0078382754b69ccc9ceeecd40d1cc056 Mon Sep 17 00:00:00 2001
From: Adrien Vannson <adrien.vannson@protonmail.com>
Date: Tue, 17 Jan 2023 17:01:20 +0100
Subject: [PATCH] Select a room

---
 src/App.css     | 39 ++-------------------------------------
 src/App.js      | 11 +++++++----
 src/App.test.js |  8 --------
 src/Rooms.js    | 29 +++++++++++++++++++++++++++++
 4 files changed, 38 insertions(+), 49 deletions(-)
 delete mode 100644 src/App.test.js
 create mode 100644 src/Rooms.js

diff --git a/src/App.css b/src/App.css
index 74b5e05..b544e18 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,3 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.MuiTableRow-hover {
+  cursor: pointer;
 }
diff --git a/src/App.js b/src/App.js
index 688346a..5dfa6fd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,10 +15,12 @@ import Typography from '@mui/material/Typography';
 
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
-// Leaflet
-import Map from './Map.js'
+import './App.css'
 
-function RoomResearch() {
+import Map from './Map.js';
+import Rooms from './Rooms.js';
+
+function RoomResearch({callbackRoomSelected}) {
   return <>
     <div style={{ padding: '24px' }}>
       <Typography component="h2" variant="h5" gutterBottom>
@@ -33,6 +35,7 @@ function RoomResearch() {
       >
         <Button variant="contained">Rechercher</Button>
       </Box>
+      <Rooms callbackRoomSelected={callbackRoomSelected}/>
     </div>
   </>
 }
@@ -100,7 +103,7 @@ export default function App() {
 
     <div style={{ flexGrow: '1', display: 'flex', flexDirection: 'line', flexWrap: 'nowrap' }}>
       <Map callbackRoomSelected={handleRoomSelected} selectedRoom={selectedRoom}/>
-      <RoomResearch />
+      <RoomResearch callbackRoomSelected={setSelectedRoom}/>
     </div>
   </>
 }
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/Rooms.js b/src/Rooms.js
new file mode 100644
index 0000000..39913d9
--- /dev/null
+++ b/src/Rooms.js
@@ -0,0 +1,29 @@
+import TableContainer from '@mui/material/TableContainer';
+import Table from '@mui/material/Table';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+import TableBody from '@mui/material/TableBody';
+
+export default function Rooms({callbackRoomSelected}) {
+  return <TableContainer variant="outlined">
+    <Table aria-label="demo table">
+      <TableHead>
+        <TableRow>
+          <TableCell>Salle</TableCell>
+          <TableCell>Occupants</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow hover={true} onClick={() => callbackRoomSelected('salle-M-GN1-3-av')}>
+          <TableCell>Amphi A</TableCell>
+          <TableCell>Maths</TableCell>
+        </TableRow>
+        <TableRow hover={true} onClick={() => callbackRoomSelected('salle-M-GN1-3-ae')}>
+          <TableCell>Amphi B</TableCell>
+          <TableCell>Infos</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </TableContainer>
+}