Change users of a room

src/App.js

@@ -205,6 +205,7 @@ function EditDialog({ isOpen, setIsOpen, room }) {
   const [names, setNames] = React.useState([]);
   const [users, setUsers] = React.useState([]);
   const [newPlaceName, setNewPlaceName] = React.useState("");
+  const [newUserName, setNewUserName] = React.useState("");
 
   // Used to refresh useEffect
   const [updatesCount, setupdatesCount] = React.useState(0);
@@ -234,6 +235,16 @@ function EditDialog({ isOpen, setIsOpen, room }) {
       .then(response => refresh());
   }
 
+  const addUser = () => {
+    fetch("https://encartes.aliens-lyon.fr/api/map/add_room_user_name/" + room + "/" + encodeURI(newUserName))
+      .then(response => refresh());
+  };
+
+  const removeUser = (userName) => {
+    fetch("https://encartes.aliens-lyon.fr/api/map/del_room_user_name/" + room + "/" + encodeURI(userName))
+      .then(response => refresh());
+  }
+
   return <Dialog open={isOpen} onClose={() => { setIsOpen(false) }}>
     <DialogTitle>Salle n°{room}</DialogTitle>
     <DialogContent>
@@ -246,7 +257,7 @@ function EditDialog({ isOpen, setIsOpen, room }) {
         <TextField
           value={newPlaceName}
           onChange={(event) => { setNewPlaceName(event.target.value) }}
-          label="Nouveau nom"
+          label="Nom de la salle"
           margin="dense"
           fullWidth
         />
@@ -256,8 +267,17 @@ function EditDialog({ isOpen, setIsOpen, room }) {
 
         Utilisateurs :<br />
         {users.map(name => {
-          return <Chip label={name} variant="outlined" onDelete={() => { }} />
+          return <Chip label={name} variant="outlined" onDelete={() => { removeUser(name) }} />
         })}
+
+        <TextField
+          value={newUserName}
+          onChange={(event) => { setNewUserName(event.target.value) }}
+          label="Nom de l'utilisateur"
+          margin="dense"
+          fullWidth
+        />
+        <Button onClick={() => { addUser() }}>Ajouter</Button>
       </DialogContentText>
 
     </DialogContent>