feat: Implement a cancel button

frontend/src/pages/review.tsx

@@ -10,6 +10,14 @@ import Popover from "@material-ui/core/Popover";
 import LinearProgress from "@material-ui/core/LinearProgress";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import Paper from "@material-ui/core/Paper";
+import Tooltip from "@material-ui/core/Tooltip";
+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 CloseIcon from "@material-ui/icons/Close";
 
 import { withRouter } from "react-router-dom";
 
@@ -29,6 +37,7 @@ interface IProps {
 
     history: any;
 
+    dialogOpen: boolean;
     loading: boolean;
     vocab: IVocab[];
     current: IReviewCard;
@@ -37,6 +46,7 @@ interface IProps {
     popoverColor: string;
     popoverTextColor: string;
 
+    setReviewDialog: (state: boolean) => void;
     setSummary: (state: boolean) => void;
     setPopover: (state: boolean, text: string, color: string, textColor: string) => void;
     drawerButtonState: (state: boolean) => void;
@@ -93,6 +103,22 @@ const ReviewPageWithRouter = withRouter(
             });
         }
 
+        openDialog = () => {
+            this.props.setReviewDialog(true);
+        }
+        closeDialog = () => {
+            this.props.setReviewDialog(false);
+        }
+
+        cancelReview = () => {
+            this.closeDialog();
+
+            // Show the drawer button again
+            this.props.drawerButtonState(true);
+
+            this.props.history.push("/dashboard");
+        }
+
         increaseMeta = (correct: number, wrong: number): IReviewMetadata => {
             const { metadata } = this;
 
@@ -127,6 +153,10 @@ const ReviewPageWithRouter = withRouter(
                     // Go to the summary screen
                     this.props.setLastReview(this.metadata);
                     this.props.setLoading(true);
+
+                    // Show the drawer button again
+                    this.props.drawerButtonState(true);
+
                     this.props.history.push("/review/summary");
                 } else {
                     // Increase the vocab
@@ -238,6 +268,38 @@ const ReviewPageWithRouter = withRouter(
                         </Card>
                     </Grid>
                 </Grid>
+                <Tooltip
+                    title="Abbrechen"
+                    placement="top">
+                    <Button
+                        variant="fab"
+                        color="primary"
+                        className="review-fab"
+                        onClick={this.openDialog}>
+                        <CloseIcon />
+                    </Button>
+                </Tooltip>
+                <Dialog
+                    open={this.props.dialogOpen}
+                    onClose={this.closeDialog}>
+                    <DialogTitle>Willst du die Wiederholung abbrechen?</DialogTitle>
+                    <DialogContent>
+                        <DialogContentText>
+                            Wenn du jetzt abbricht, dann geht dein in dieser Wiederholung gesammelte Fortschritt
+                            verloren.
+                        </DialogContentText>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button
+                            onClick={this.closeDialog}>
+                            Zurück zur Wiederholung
+                        </Button>
+                        <Button
+                            onClick={this.cancelReview}>
+                            Abbrechen
+                        </Button>
+                    </DialogActions>
+                </Dialog>
             </div>;
         }
     }