* Make use of dialogs for displaying alerts

Author: CodeDead

src/components/AlertDialog/index.js

@@ -0,0 +1,44 @@
+import React, {useState} from "react";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import {useSelector} from "react-redux";
+
+const AlertDialog = ({title, content}) => {
+
+    const language = useSelector(state => state.MainReducer.languages[state.MainReducer.languageIndex]);
+    const [open, setOpen] = useState(true);
+
+    /**
+     * Close the AlertDialog instance
+     */
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            aria-labelledby="alert-dialog-title"
+            aria-describedby="alert-dialog-description"
+        >
+            <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
+            <DialogContent>
+                <DialogContentText id="alert-dialog-description">
+                    {content}
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose} color="primary" autoFocus>
+                    {language.ok}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default AlertDialog;

src/components/AlertModal/index.js

@@ -12,9 +12,9 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import {useHistory} from "react-router";
 import blank from "../../components/Theme/blank.png";
-import AlertModal from "../../components/AlertModal";
 import {Updater} from "../../utils/Updater";
 import UpdateDialog from "../../components/UpdateDialog";
+import AlertDialog from "../../components/AlertDialog";
 
 const useStyles = makeStyles(theme => ({
     heroContent: {
@@ -104,7 +104,7 @@ const Home = () => {
             </div>
             <main className={classes.content}>
                 {update && update.updateAvailable ? (<UpdateDialog downloadUrl={update.updateUrl} infoUrl={update.infoUrl} newVersion={update.version} />) : null}
-                {errorMessage && errorMessage.length > 0 ? (<AlertModal title={language.errorTitle} content={errorMessage}/>) : null}
+                {errorMessage && errorMessage.length > 0 ? (<AlertDialog title={language.errorTitle} content={errorMessage}/>) : null}
                 <Container maxWidth={"lg"} className={classes.container}>
                     <Grid container spacing={2}>
                         <Grid item xs={12} md={6} lg={6}>

src/routes/Home/index.js

@@ -24,9 +24,9 @@ import MenuItem from "@material-ui/core/MenuItem";
 import Button from "@material-ui/core/Button";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import {Updater} from "../../utils/Updater";
-import AlertModal from "../../components/AlertModal";
 import BackButton from "../../components/BackButton";
 import UpdateDialog from "../../components/UpdateDialog";
+import AlertDialog from "../../components/AlertDialog";
 
 const useStyles = makeStyles(theme => ({
     content: {
@@ -146,9 +146,9 @@ const Settings = () => {
                     <UpdateDialog downloadUrl={update.updateUrl} infoUrl={update.infoUrl}
                                   newVersion={update.version} />) : null}
                 {update && !update.updateAvailable ? (
-                    <AlertModal title={language.noUpdatesTitle} content={language.noUpdatesMessage}/>) : null}
+                    <AlertDialog title={language.noUpdatesTitle} content={language.noUpdatesMessage}/>) : null}
                 {errorMessage && errorMessage.length > 0 ? (
-                    <AlertModal title={language.errorTitle} content={errorMessage}/>) : null}
+                    <AlertDialog title={language.errorTitle} content={errorMessage}/>) : null}
                 <Container maxWidth="lg" className={classes.container}>
                     <Grid container spacing={2}>
                         <Grid item xs={12} md={12} lg={12}>