Select a room

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;
 }

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>
   </>
 }

src/App.test.js

@@ -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();
-});

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>
+}