From 02584c6a826e95533be78452262126f2e77e310f Mon Sep 17 00:00:00 2001
From: Adrien Vannson <adrien.vannson@protonmail.com>
Date: Wed, 5 Oct 2022 15:22:02 +0200
Subject: [PATCH] About dialog

---
 src/App.js | 41 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index 49949e2..8cf1f59 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,12 @@ import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
 import Container from '@mui/material/Container';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
 
 function RoomResearch() {
   return <>
@@ -13,7 +19,7 @@ function RoomResearch() {
       <Typography component="h2" variant="h5" gutterBottom>
         Rechercher une salle
       </Typography>
-      <TextField id="outlined-basic" label="Nom, code, occupants, ..." variant="outlined" fullWidth/>
+      <TextField id="outlined-basic" label="Nom, code, occupants, ..." variant="outlined" fullWidth />
       <Box
         marginTop={1}
         display="flex"
@@ -27,6 +33,16 @@ function RoomResearch() {
 }
 
 function TopBar() {
+  const [openAboutModal, setOpenAboutModal] = React.useState(false);
+
+  const handleOpenAboutModal = () => {
+    setOpenAboutModal(true);
+  };
+
+  const handleCloseAboutModal = () => {
+    setOpenAboutModal(false);
+  };
+
   return <>
     <Box sx={{ flexGrow: 1 }}>
       <AppBar position="static">
@@ -36,16 +52,35 @@ function TopBar() {
           </Typography>
           <Button color="inherit">Choix d'une carte</Button>
           <Button color="inherit">Recherche d'une salle</Button>
-          <Button color="inherit">À propos</Button>
+          <Button color="inherit" onClick={handleOpenAboutModal}>À propos</Button>
         </Toolbar>
       </AppBar>
     </Box>
+
+    <Dialog
+      open={openAboutModal}
+      onClose={handleCloseAboutModal}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title">
+        {"À propos d'ENcarteS"}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">
+          ENcarteS permet de rechercher les salles de l'ENS !
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleCloseAboutModal}>Ok</Button>
+      </DialogActions>
+    </Dialog>
   </>
 }
 
 export default function App() {
   return <>
-    <TopBar/>
+    <TopBar />
 
     <RoomResearch />
   </>