Add names to rooms

src/App.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
 import CssBaseline from '@mui/material/CssBaseline';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
@@ -164,14 +165,60 @@ function TopBar() {
   </>
 }
 
-function EditDialog({ isOpen, setIsOpen, room }) { // onClose={handleClose}
+function EditDialog({ isOpen, setIsOpen, room }) {
+  const [names, setNames] = React.useState([]);
+  const [users, setUsers] = React.useState([]);
+  const [newPlaceName, setNewPlaceName] = React.useState("");
+  
+  // Used to refresh useEffect
+  const [updatesCount, setupdatesCount] = React.useState(0);
+
+  React.useEffect(() => {
+    if (room !== null) {
+      fetch("https://encartes.aliens-lyon.fr/api/map/get_place_info/" + room)
+        .then(response => response.json())
+        .then(data => {
+          setNames(data.names);
+          setUsers(data.users);
+        });
+    }
+  }, [room, updatesCount]);
+
+  const refresh = () => {
+    setupdatesCount(updatesCount + 1);
+  };
+
+  const addName = () => {
+    fetch("https://encartes.aliens-lyon.fr/api/map/add_place_name/" + room + "/" + encodeURI(newPlaceName))
+      .then(response => refresh());
+  };
+
   return <Dialog open={isOpen} onClose={() => { setIsOpen(false) }}>
     <DialogTitle>Salle n°{room}</DialogTitle>
     <DialogContent>
       <DialogContentText>
-        Noms :
+        Noms :<br/>
+        {names.map(name => {
+          return <Chip label={name} variant="outlined" onDelete={() => {}} />
+        })}
+
+        <TextField
+          value={newPlaceName}
+          onChange={(event) => { setNewPlaceName(event.target.value) }}
+          label="Nouveau nom"
+          margin="dense"
+          fullWidth
+        />
+        <Button onClick={() => { addName() }}>Ajouter</Button>
+
+        <Divider/>
+
+        Utilisateurs :<br/>
+        {users.map(name => {
+          return <Chip label={name} variant="outlined" onDelete={() => {}} />
+        })}
       </DialogContentText>
-      <TextField label="Nouveau nom" margin="dense" fullWidth />
+      
     </DialogContent>
     <DialogActions>
       <Button onClick={() => { setIsOpen(false) }}>Fermer</Button>