Split code in different files

src/App.js

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import 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';
@@ -12,169 +10,20 @@ import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
 import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
-import MenuItem from '@mui/material/MenuItem';
-import Select from '@mui/material/Select';
-import TextField from '@mui/material/TextField';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 
-import EditIcon from '@mui/icons-material/Edit';
-import SearchIcon from '@mui/icons-material/Search';
 import SettingsBrightnessIcon from '@mui/icons-material/SettingsBrightness';
 
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 import './App.css'
 
+import ChangeFloor from './ChangeFloor';
+import EditDialog from './EditDialog';
 import Map from './Map.js';
-import Rooms from './Rooms.js';
+import RoomInformation from './RoomInformation';
-import API_URL from './config.js';
+import RoomResearch from './RoomResearch';
-
-function ChangeFloor({ currentFloor, callbackFloorChanged }) {
-  const [sites, setSites] = React.useState([]);
-  const handleFloorChanged = (event) => {
-    callbackFloorChanged(event.target.value);
-  };
-
-  React.useEffect(() => {
-    fetch(API_URL + "get_all_floors/")
-      .then(response => response.json())
-      .then(data => {
-        setSites(data);
-
-        // Display a floor
-        callbackFloorChanged(data[0].buildings[0].floors[0].id)
-      });
-  }, [callbackFloorChanged]);
-
-  if (currentFloor === undefined) return;
-
-  var items = [];
-
-  sites.forEach(site => {
-    site.buildings.forEach(building => {
-      building.floors.forEach(floor => {
-        items.push(
-          <MenuItem value={floor.id} key={floor.id}>
-            {site.name} / {building.name} / {floor.name}
-          </MenuItem>
-        )
-      })
-    })
-
-  });
-
-  return <>
-    <div style={{ padding: '24px' }}>
-      <Typography component="h2" variant="h5" gutterBottom>
-        Changer d'étage
-      </Typography>
-      <Select
-        value={currentFloor}
-        label="Étage"
-        onChange={handleFloorChanged}
-        fullWidth
-      >
-        {items}
-      </Select>
-    </div>
-  </>
-}
-
-function RoomResearch({ callbackRoomSelected }) {
-  const [currentRequest, setCurrentRequest] = React.useState("");
-  const [rooms, setRooms] = React.useState([]);
-
-  const startResearch = (event) => {
-    fetch(API_URL + "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
-        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 startIcon={<SearchIcon />} variant="contained" onClick={startResearch}>
-          Rechercher
-        </Button>
-      </Box>
-      <Rooms rooms={rooms} callbackRoomSelected={callbackRoomSelected} />
-    </div>
-  </>
-}
-
-function RoomInformation({ roomId, setIsEditDialogOpen }) {
-  const [names, setNames] = React.useState([]);
-  const [users, setUsers] = React.useState([]);
-
-  React.useEffect(() => {
-    if (roomId !== undefined) {
-      fetch(API_URL + "get_place_info/" + roomId)
-        .then(response => response.json())
-        .then(data => {
-          setNames(data.names);
-          setUsers(data.users);
-        });
-    }
-  }, [roomId]);
-
-  if (roomId === undefined) {
-    return;
-  }
-
-  return <div style={{ padding: '24px' }}>
-    <Typography component="h2" variant="h5" gutterBottom>
-      Salle sélectionnée
-    </Typography>
-
-    <Typography component="h3" variant="h6" gutterBottom>Noms</Typography>
-    {
-      names.length === 0
-        ? <em>Aucun nom défini</em>
-        : names.map(name => {
-            return <React.Fragment key={name}>
-              <Chip label={name} variant="outlined" />
-              <br/>
-            </React.Fragment>
-          })
-    }
-
-    <Typography component="h3" variant="h6" gutterBottom>Utilisateurs</Typography>
-    <div>
-    {
-      users.length === 0
-        ? <em>Aucun utilisateur défini</em>
-        : users.map(name => {
-            return <React.Fragment key={name}>
-              <Chip label={name} variant="outlined" />
-              <br/>
-            </React.Fragment>
-          })
-    }
-    </div>
-
-    <Button startIcon={<EditIcon />} onClick={() => { setIsEditDialogOpen(true) }}>
-      Modifier
-    </Button>
-  </div>
-}
 
 function TopBar({ toggleTheme }) {
   const [openAboutModal, setOpenAboutModal] = React.useState(false);
@@ -221,99 +70,6 @@ function TopBar({ toggleTheme }) {
   </>
 }
 
-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);
-
-  React.useEffect(() => {
-    if (room !== undefined) {
-      fetch(API_URL + "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(API_URL + "add_place_name/" + room + "/" + encodeURI(newPlaceName))
-      .then(response => refresh());
-  };
-
-  const removeName = (placeName) => {
-    fetch(API_URL + "del_place_name/" + room + "/" + encodeURI(placeName))
-      .then(response => refresh());
-  }
-
-  const addUser = () => {
-    fetch(API_URL + "add_room_user_name/" + room + "/" + encodeURI(newUserName))
-      .then(response => refresh());
-  };
-
-  const removeUser = (userName) => {
-    fetch(API_URL + "del_room_user_name/" + room + "/" + encodeURI(userName))
-      .then(response => refresh());
-  }
-
-  return <Dialog open={isOpen} onClose={() => { setIsOpen(false) }}>
-    <DialogTitle>Salle n°{room}</DialogTitle>
-    <DialogContent>
-      Noms :<br />
-      {names.map(name => {
-        return <Chip
-          label={name}
-          key={name}
-          variant="outlined"
-          onDelete={() => { removeName(name) }}
-        />
-      })}
-
-      <TextField
-        value={newPlaceName}
-        onChange={(event) => { setNewPlaceName(event.target.value) }}
-        label="Nom de la salle"
-        margin="dense"
-        fullWidth
-      />
-      <Button onClick={() => { addName() }}>Ajouter</Button>
-
-      <Divider />
-
-      Utilisateurs :<br />
-      {users.map(name => {
-        return <Chip
-          label={name}
-          key={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>
-    </DialogContent>
-    <DialogActions>
-      <Button onClick={() => { setIsOpen(false) }}>Fermer</Button>
-    </DialogActions>
-  </Dialog>
-}
-
 function App({ toggleTheme }) {
   const [currentFloor, setCurrentFloor] = React.useState(undefined);
   const [selectedRoom, setSelectedRoom] = React.useState(undefined);

src/ChangeFloor.js

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
+
+import API_URL from './config.js';
+
+export default function ChangeFloor({ currentFloor, callbackFloorChanged }) {
+    const [sites, setSites] = React.useState([]);
+    const handleFloorChanged = (event) => {
+      callbackFloorChanged(event.target.value);
+    };
+  
+    React.useEffect(() => {
+      fetch(API_URL + "get_all_floors/")
+        .then(response => response.json())
+        .then(data => {
+          setSites(data);
+  
+          // Display a floor
+          callbackFloorChanged(data[0].buildings[0].floors[0].id)
+        });
+    }, [callbackFloorChanged]);
+  
+    if (currentFloor === undefined) return;
+  
+    var items = [];
+  
+    sites.forEach(site => {
+      site.buildings.forEach(building => {
+        building.floors.forEach(floor => {
+          items.push(
+            <MenuItem value={floor.id} key={floor.id}>
+              {site.name} / {building.name} / {floor.name}
+            </MenuItem>
+          )
+        })
+      })
+  
+    });
+  
+    return <>
+      <div style={{ padding: '24px' }}>
+        <Typography component="h2" variant="h5" gutterBottom>
+          Changer d'étage
+        </Typography>
+        <Select
+          value={currentFloor}
+          label="Étage"
+          onChange={handleFloorChanged}
+          fullWidth
+        >
+          {items}
+        </Select>
+      </div>
+    </>
+  }

src/EditDialog.js

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Divider from '@mui/material/Divider';
+import TextField from '@mui/material/TextField';
+
+import API_URL from './config.js';
+
+export default 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);
+  
+    React.useEffect(() => {
+      if (room !== undefined) {
+        fetch(API_URL + "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(API_URL + "add_place_name/" + room + "/" + encodeURI(newPlaceName))
+        .then(response => refresh());
+    };
+  
+    const removeName = (placeName) => {
+      fetch(API_URL + "del_place_name/" + room + "/" + encodeURI(placeName))
+        .then(response => refresh());
+    }
+  
+    const addUser = () => {
+      fetch(API_URL + "add_room_user_name/" + room + "/" + encodeURI(newUserName))
+        .then(response => refresh());
+    };
+  
+    const removeUser = (userName) => {
+      fetch(API_URL + "del_room_user_name/" + room + "/" + encodeURI(userName))
+        .then(response => refresh());
+    }
+  
+    return <Dialog open={isOpen} onClose={() => { setIsOpen(false) }}>
+      <DialogTitle>Salle n°{room}</DialogTitle>
+      <DialogContent>
+        Noms :<br />
+        {names.map(name => {
+          return <Chip
+            label={name}
+            key={name}
+            variant="outlined"
+            onDelete={() => { removeName(name) }}
+          />
+        })}
+  
+        <TextField
+          value={newPlaceName}
+          onChange={(event) => { setNewPlaceName(event.target.value) }}
+          label="Nom de la salle"
+          margin="dense"
+          fullWidth
+        />
+        <Button onClick={() => { addName() }}>Ajouter</Button>
+  
+        <Divider />
+  
+        Utilisateurs :<br />
+        {users.map(name => {
+          return <Chip
+            label={name}
+            key={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>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => { setIsOpen(false) }}>Fermer</Button>
+      </DialogActions>
+    </Dialog>
+  }

src/RoomInformation.js

@@ -0,0 +1,64 @@
+import React from 'react';
+
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Typography from '@mui/material/Typography';
+import EditIcon from '@mui/icons-material/Edit';
+
+import API_URL from './config.js';
+
+export default function RoomInformation({ roomId, setIsEditDialogOpen }) {
+    const [names, setNames] = React.useState([]);
+    const [users, setUsers] = React.useState([]);
+  
+    React.useEffect(() => {
+      if (roomId !== undefined) {
+        fetch(API_URL + "get_place_info/" + roomId)
+          .then(response => response.json())
+          .then(data => {
+            setNames(data.names);
+            setUsers(data.users);
+          });
+      }
+    }, [roomId]);
+  
+    if (roomId === undefined) {
+      return;
+    }
+  
+    return <div style={{ padding: '24px' }}>
+      <Typography component="h2" variant="h5" gutterBottom>
+        Salle sélectionnée
+      </Typography>
+  
+      <Typography component="h3" variant="h6" gutterBottom>Noms</Typography>
+      {
+        names.length === 0
+          ? <em>Aucun nom défini</em>
+          : names.map(name => {
+              return <React.Fragment key={name}>
+                <Chip label={name} variant="outlined" />
+                <br/>
+              </React.Fragment>
+            })
+      }
+  
+      <Typography component="h3" variant="h6" gutterBottom>Utilisateurs</Typography>
+      <div>
+      {
+        users.length === 0
+          ? <em>Aucun utilisateur défini</em>
+          : users.map(name => {
+              return <React.Fragment key={name}>
+                <Chip label={name} variant="outlined" />
+                <br/>
+              </React.Fragment>
+            })
+      }
+      </div>
+  
+      <Button startIcon={<EditIcon />} onClick={() => { setIsEditDialogOpen(true) }}>
+        Modifier
+      </Button>
+    </div>
+  }

src/RoomResearch.js

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import SearchIcon from '@mui/icons-material/Search';
+
+import Rooms from './Rooms.js';
+import API_URL from './config.js';
+
+export default function RoomResearch({ callbackRoomSelected }) {
+    const [currentRequest, setCurrentRequest] = React.useState("");
+    const [rooms, setRooms] = React.useState([]);
+  
+    const startResearch = (event) => {
+      fetch(API_URL + "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
+          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 startIcon={<SearchIcon />} variant="contained" onClick={startResearch}>
+            Rechercher
+          </Button>
+        </Box>
+        <Rooms rooms={rooms} callbackRoomSelected={callbackRoomSelected} />
+      </div>
+    </>
+  }