feat: Implement a cancel button

frontend/src/actions/index.ts

@@ -192,3 +192,11 @@ export function setDashboardLRLoading(state: boolean) {
         state,
     };
 };
+
+export const REVIEW_SET_DIALOG = "REVIEW_SET_DIALOG";
+export function setReviewDialog(state: boolean) {
+    return {
+        type: REVIEW_SET_DIALOG,
+        state,
+    };
+};

frontend/src/containers/Review.ts

@@ -1,8 +1,8 @@
 import { connect } from "react-redux";
 
 import {
-    setDrawerButton, setReviewPopover, setReviewSummary, setLastReview,
+    setDrawerButton, setReviewPopover, setReviewSummary,
-    setReview, setReviewLoading
+    setReview, setReviewLoading, setReviewDialog
 } from "../actions";
 
 import { IReviewMetadata } from "../models/review";
@@ -11,6 +11,7 @@ import ReviewPage from "../pages/review";
 
 const mapStateToProps = state => {
     return {
+        dialogOpen: state.review.dialogOpen,
         metadata: state.review.metadata,
         vocab: state.review.vocab,
         current: state.review.current,
@@ -28,6 +29,7 @@ const mapDispatchToProps = dispatch => {
         setSummary: (state: boolean) => dispatch(setReviewSummary(state)),
         setReview: (current: IVocab, meta: IReviewMetadata) => dispatch(setReview(current, meta)),
         setLoading: (state: boolean) => dispatch(setReviewLoading(state)),
+        setReviewDialog: (state: boolean) => dispatch(setReviewDialog(state)),
     };
 };
 

frontend/src/index.css

@@ -61,3 +61,9 @@ body {
     
     border-color: red;
 }
+
+.review-fab {
+    position: absolute;
+    bottom: 12px;
+    right: -12px;
+}

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>;
         }
     }

frontend/src/reducers/index.ts

@@ -45,6 +45,7 @@ interface IState {
     review: {
         current: IReviewCard;
 
+        dialogOpen: boolean;
         loading: boolean;
         vocab: IVocab[];
         metadata: IReviewMetadata;
@@ -104,6 +105,7 @@ const initialState: IState = {
     review: {
         current: {} as IReviewCard,
 
+        dialogOpen: false,
         loading: true,
         vocab: [],
         metadata: {} as IReviewMetadata,
@@ -251,6 +253,12 @@ export function LateinicusApp(state: IState = initialState, action: any) {
                     loadingLR: action.state,
                 }),
             });
+        case Actions.REVIEW_SET_DIALOG:
+            return Object.assign({}, state, {
+                review: Object.assign({}, state.review, {
+                    dialogOpen: action.state,
+                }),
+            });
         default:
             // Ignore the initialization call to the reducer. By that we can
             // catch all actions that are not implemented