Resolve "Fix alert dialogs"

client/src/pages/admin/users/EditUser.tsx

 import {
   Button,
   createStyles,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
   FormControl,
   InputLabel,
   makeStyles,
@@ -8,6 +13,8 @@ import {
   Popover,
   TextField,
   Theme,
+  useMediaQuery,
+  useTheme,
 } from '@material-ui/core'
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz'
 import { Alert, AlertTitle } from '@material-ui/lab'
@@ -62,6 +69,11 @@ type UserIdProps = {
 }
 
 const EditUser = ({ user }: UserIdProps) => {
+  // for dialog alert
+  const [openAlert, setOpen] = React.useState(false)
+  const theme = useTheme()
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'))
+
   const dispatch = useAppDispatch()
   const classes = useStyles()
 
@@ -87,21 +99,25 @@ const EditUser = ({ user }: UserIdProps) => {
     setAnchorEl(event.currentTarget)
   }
   const handleClose = () => {
+    setOpen(false)
     setAnchorEl(null)
   }
 
+  const handleVerifyDelete = () => {
+    setOpen(true)
+  }
+
   const handleDeleteUsers = async () => {
-    if (confirm('Are u sure?')) {
-      await axios
-        .delete(`/auth/delete/${user.id}`)
-        .then(() => {
-          setAnchorEl(null)
-          dispatch(getSearchUsers())
-        })
-        .catch(({ response }) => {
-          console.warn(response.data)
-        })
-    }
+    setOpen(false)
+    await axios
+      .delete(`/auth/delete/${user.id}`)
+      .then(() => {
+        setAnchorEl(null)
+        dispatch(getSearchUsers())
+      })
+      .catch(({ response }) => {
+        console.warn(response.data)
+      })
   }
 
   const handleSubmit = async (values: formType, actions: FormikHelpers<formType>) => {
@@ -273,7 +289,7 @@ const EditUser = ({ user }: UserIdProps) => {
                   Ändra
                 </Button>
                 <Button
-                  onClick={handleDeleteUsers}
+                  onClick={handleVerifyDelete}
                   className={classes.deleteButton}
                   fullWidth
                   variant="contained"
@@ -281,6 +297,27 @@ const EditUser = ({ user }: UserIdProps) => {
                 >
                   Ta bort
                 </Button>
+                <Dialog
+                  fullScreen={fullScreen}
+                  open={openAlert}
+                  onClose={handleClose}
+                  aria-labelledby="responsive-dialog-title"
+                >
+                  <DialogTitle id="responsive-dialog-title">{'Ta bort användare?'}</DialogTitle>
+                  <DialogContent>
+                    <DialogContentText>
+                      Är du säker på att du vill ta bort användaren och all dess information från systemet?
+                    </DialogContentText>
+                  </DialogContent>
+                  <DialogActions>
+                    <Button autoFocus onClick={handleClose} color="primary">
+                      Avbryt
+                    </Button>
+                    <Button onClick={handleDeleteUsers} color="primary" autoFocus>
+                      Ta bort
+                    </Button>
+                  </DialogActions>
+                </Dialog>
 
                 {formik.errors.error && (
                   <Alert severity="error">

client/src/pages/admin/users/ResponsiveDialog.tsx

+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { useTheme } from '@material-ui/core/styles';
+
+export default function ResponsiveDialog() {
+  const [open, setOpen] = React.useState(false);
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+        Open responsive dialog
+      </Button>
+      <Dialog
+        fullScreen={fullScreen}
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="responsive-dialog-title"
+      >
+        <DialogTitle id="responsive-dialog-title">{"Use Google's location service?"}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Let Google help apps determine location. This means sending anonymous location data to
+            Google, even when no apps are running.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button autoFocus onClick={handleClose} color="primary">
+            Disagree
+          </Button>
+          <Button onClick={handleClose} color="primary" autoFocus>
+            Agree
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}
\ No newline at end of file

client/src/pages/views/PresenterViewPage.tsx

-import { List, ListItem, Popover, Tooltip, Typography } from '@material-ui/core'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  List,
+  ListItem,
+  Popover,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@material-ui/core'
 import AssignmentIcon from '@material-ui/icons/Assignment'
 import BackspaceIcon from '@material-ui/icons/Backspace'
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
@@ -31,6 +45,11 @@ import {
 } from './styled'
 
 const PresenterViewPage: React.FC = () => {
+  // for dialog alert
+  const [openAlert, setOpen] = React.useState(false)
+  const theme = useTheme()
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'))
+
   const teams = useAppSelector((state) => state.presentation.teams)
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
   const { id, code }: ViewParams = useParams()
@@ -50,9 +69,14 @@ const PresenterViewPage: React.FC = () => {
     setAnchorEl(event.currentTarget)
   }
   const handleClose = () => {
+    setOpen(false)
     setAnchorEl(null)
   }
 
+  const handleVerifyExit = () => {
+    setOpen(true)
+  }
+
   const startCompetition = () => {
     socketStartPresentation()
     const haveStarted = true
@@ -61,22 +85,42 @@ const PresenterViewPage: React.FC = () => {
   }
 
   const endCompetition = () => {
-    if (confirm('Är du säker på att du vill avsluta tävlingen för alla?')) {
-      const haveStarted = false
-      socketEndPresentation()
-      history.push('/admin')
-      window.location.reload(false) // TODO: fix this ugly hack, we "need" to refresh site to be able to run the competition correctly again
-    }
+    setOpen(false)
+    const haveStarted = false
+    socketEndPresentation()
+    history.push('/admin')
+    window.location.reload(false) // TODO: fix this ugly hack, we "need" to refresh site to be able to run the competition correctly again
   }
 
   return (
     <PresenterContainer>
       <PresenterHeader>
         <Tooltip title="Avsluta tävling" arrow>
-          <PresenterButton onClick={endCompetition} variant="contained" color="secondary">
+          <PresenterButton onClick={handleVerifyExit} variant="contained" color="secondary">
             <BackspaceIcon fontSize="large" />
           </PresenterButton>
         </Tooltip>
+        <Dialog
+          fullScreen={fullScreen}
+          open={openAlert}
+          onClose={handleClose}
+          aria-labelledby="responsive-dialog-title"
+        >
+          <DialogTitle id="responsive-dialog-title">{'Vill du avsluta tävlingen?'}</DialogTitle>
+          <DialogContent>
+            <DialogContentText>
+              Genom att avsluta tävlingen kommer den avslutas för alla. Du kommer gå tillbaka till startsidan.
+            </DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button autoFocus onClick={handleClose} color="primary">
+              Avbryt
+            </Button>
+            <Button onClick={endCompetition} color="primary" autoFocus>
+              Avsluta tävling
+            </Button>
+          </DialogActions>
+        </Dialog>
         <SlideCounter>
           <Typography variant="h3">
             {presentation.slide.id} / {presentation.competition.slides.length}

client/src/pages/views/components/SlideDisplay.tsx

 import { Typography } from '@material-ui/core'
-import React, { useEffect } from 'react'
-import { useAppDispatch, useAppSelector } from '../../../hooks'
+import React from 'react'
+import { useAppSelector } from '../../../hooks'
 import { SlideContainer } from './styled'
 
 const SlideDisplay: React.FC = () => {
   const currentSlide = useAppSelector((state) => state.presentation.slide)
-  const dispatch = useAppDispatch()
-  useEffect(() => {}, [])
 
   return (
     <div>