moved Alert Dialog to separate file

src/Addition.js

@@ -1,14 +1,8 @@
 import React, { useState, useEffect, useRef } 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 DataGrid, {Column} from 'devextreme-react/data-grid';
-
+import DataGrid, {Column} from "devextreme-react/data-grid";
+import {Alert} from "./AlertDialog.js"
 import "./App.css";
+
 let imdtRes;
 let imdtResIdx;
 let resArr = [];
@@ -323,35 +317,6 @@ function Addition() {
     document.getElementById("finishCalculation").innerHTML = message
   }
 
-  const Alert = () => {
-    return(
-    <div>
-      <Dialog
-        open={showAlert}
-        onClose={finishCalculation}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
-      >
-        <DialogTitle id="alert-dialog-title">{"Ergebnis überprüfen oder abgeben?"}</DialogTitle>
-
-        <DialogContent>
-          <DialogContentText id="alert-dialog-description">
-            Willst du dein Ergebnis nochmal überprüfen oder gleich abgeben?
-          </DialogContentText>
-        </DialogContent>
-
-        <DialogActions>
-          <Button onClick={showIdmtResults} color="primary" autoFocus>
-            Prüfen
-          </Button>
-          <Button onClick={finishCalculation} color="primary">
-            Abgeben
-          </Button>
-        </DialogActions>
-
-      </Dialog>
-    </div>
-  )};
 
 
   return (
@@ -415,7 +380,11 @@ function Addition() {
         </DataGrid>
       </div>
 
-      <Alert/>
+      <Alert
+        showAlert={showAlert}
+        finishCalc={finishCalculation}
+        showIdmtResults={showIdmtResults}
+      />
 
     </div>
   );

src/AlertDialog.js

@@ -0,0 +1,37 @@
+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 Button from "@material-ui/core/Button";
+
+export const Alert = ({showAlert, finishCalc, showIdmtResults}) => {
+  return(
+    <div>
+      <Dialog
+        open={showAlert}
+        onClose={finishCalc}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">{"Ergebnis überprüfen oder abgeben?"}</DialogTitle>
+
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+            Willst du dein Ergebnis nochmal überprüfen oder gleich abgeben?
+          </DialogContentText>
+        </DialogContent>
+
+        <DialogActions>
+          <Button onClick={showIdmtResults} color="primary" autoFocus>
+            Prüfen
+          </Button>
+          <Button onClick={finishCalc} color="primary">
+            Abgeben
+          </Button>
+        </DialogActions>
+
+      </Dialog>
+    </div>
+  )
+};