Edit dialog

src/App.js

@@ -85,19 +85,25 @@ function RoomResearch({ callbackRoomSelected }) {
   </>
 }
 
-function RoomInformation({ roomId }) {
+function RoomInformation({ roomId, setIsEditDialogOpen }) {
   const [names, setNames] = React.useState([]);
   const [users, setUsers] = React.useState([]);
 
   React.useEffect(() => {
-    fetch("https://encartes.aliens-lyon.fr/api/map/get_place_info/" + roomId)
-      .then(response => response.json())
-      .then(data => {
-        setNames(data.names);
-        setUsers(data.users);
-      });
+    if (roomId !== null) {
+      fetch("https://encartes.aliens-lyon.fr/api/map/get_place_info/" + roomId)
+        .then(response => response.json())
+        .then(data => {
+          setNames(data.names);
+          setUsers(data.users);
+        });
+    }
   }, [roomId]);
 
+  if (roomId === null) {
+    return;
+  }
+
   return <div style={{ padding: '24px' }}>
     <Typography component="h2" variant="h5" gutterBottom>
       Salle sélectionnée
@@ -112,6 +118,7 @@ function RoomInformation({ roomId }) {
           : 'Utilisée par ' + users.join(', ')
       }</li>
     </ul>
+    <a onClick={() => { setIsEditDialogOpen(true) }}>Modifier</a>
   </div>
 }
 
@@ -157,12 +164,32 @@ function TopBar() {
   </>
 }
 
+function EditDialog({ isOpen, setIsOpen, room }) { // onClose={handleClose}
+  return <Dialog open={isOpen} onClose={() => { setIsOpen(false) }}>
+    <DialogTitle>Salle n°{room}</DialogTitle>
+    <DialogContent>
+      <DialogContentText>
+        Noms :
+      </DialogContentText>
+      <TextField label="Nouveau nom" margin="dense" fullWidth />
+    </DialogContent>
+    <DialogActions>
+      <Button onClick={() => { setIsOpen(false) }}>Fermer</Button>
+    </DialogActions>
+  </Dialog>
+}
 
 export default function App() {
   const [currentFloor, setCurrentFloor] = React.useState(6);
   const [selectedRoom, setSelectedRoom] = React.useState(null);
+  const [isEditDialogOpen, setIsEditDialogOpen] = React.useState(false);
 
   return <>
+    <EditDialog
+      isOpen={isEditDialogOpen}
+      setIsOpen={setIsEditDialogOpen}
+      room={selectedRoom}
+    />
     <TopBar />
     <div style={{ flexGrow: '1', display: 'flex', flexDirection: 'line', flexWrap: 'nowrap' }}>
       <Map
@@ -179,7 +206,10 @@ export default function App() {
           setSelectedRoom(room);
         }} />
         <Divider />
-        <RoomInformation roomId={selectedRoom} />
+        <RoomInformation
+          roomId={selectedRoom}
+          setIsEditDialogOpen={setIsEditDialogOpen}
+        />
       </div>
     </div>
   </>