Show informations about the selected room

src/App.js

@@ -86,6 +86,39 @@ function RoomResearch({ callbackRoomSelected }) {
   </>
 }
 
+function RoomInformation({ roomId }) {
+  const [names, setNames] = React.useState([]);
+  const [users, setUsers] = React.useState([]);
+
+  React.useEffect(() => {
+    fetch("https://encartes.aliens-lyon.fr/api/map/show_place_info/" + roomId)
+      .then(response => response.json())
+      .then(data => {
+        setNames(data['names']);
+        setUsers(data['users']);
+      })
+      .catch(error => {
+        // TODO: error tooltip
+      });
+  }, [roomId]);
+
+  return <div style={{ padding: '24px' }}>
+      <Typography component="h2" variant="h5" gutterBottom>
+        Salle sélectionnée
+      </Typography>
+      <ul>
+        <li>{
+          names.length == 0 ? <em>Aucun nom défini</em> : names.join(', ')
+        }</li>
+        <li>{
+          users.length == 0
+            ? <em>Aucun utilisateur défini</em>
+            : 'Utilisée par ' + users.join(', ')
+        }</li>
+      </ul>
+    </div>
+}
+
 function TopBar() {
   const [openAboutModal, setOpenAboutModal] = React.useState(false);
 
@@ -144,6 +177,8 @@ export default function App() {
           setCurrentFloor(floor);
           setSelectedRoom(room);
         }} />
+        <Divider />
+        <RoomInformation roomId={selectedRoom} />
       </div>
     </div>
   </>