Research room

src/App.js

@@ -50,21 +50,38 @@ function ChangeFloor({ currentFloor, callbackFloorChanged }) {
 }
 
 function RoomResearch({ callbackRoomSelected }) {
+  const [currentRequest, setCurrentRequest] = React.useState("");
+  const [rooms, setRooms] = React.useState([]);
+
+  const startResearch = (event) => {
+    fetch("https://encartes.aliens-lyon.fr/api/map/find_place_by_name/" + currentRequest)
+      .then(response => response.json())
+      .then(data => {
+        setRooms(data);
+      });
+  };
+
   return <>
     <div style={{ padding: '24px' }}>
       <Typography component="h2" variant="h5" gutterBottom>
         Rechercher une salle
       </Typography>
-      <TextField id="outlined-basic" label="Nom, code, occupants, ..." variant="outlined" fullWidth />
+      <TextField
+        label="Nom, code, occupants, ..."
+        value={currentRequest}
+        onChange={(event) => {setCurrentRequest(event.target.value)}}
+        variant="outlined"
+        fullWidth
+      />
       <Box
         marginTop={1}
         display="flex"
         justifyContent="flex-end"
         alignItems="flex-end"
       >
-        <Button variant="contained">Rechercher</Button>
+        <Button variant="contained" onClick={startResearch}>Rechercher</Button>
       </Box>
-      <Rooms callbackRoomSelected={callbackRoomSelected} />
+      <Rooms rooms={rooms} callbackRoomSelected={callbackRoomSelected} />
     </div>
   </>
 }

src/Rooms.js

@@ -5,24 +5,20 @@ import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
 import TableBody from '@mui/material/TableBody';
 
-export default function Rooms({callbackRoomSelected}) {
+export default function Rooms({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>
+        {rooms.map((room) => {
+          return <TableRow hover={true} onClick={() => callbackRoomSelected(room['idRoom'])}>
+            <TableCell>{room['idRoom']}</TableCell>
           </TableRow>
+        })}
       </TableBody>
     </Table>
   </TableContainer>