diff --git a/frontend/src/actions/index.ts b/frontend/src/actions/index.ts
index ae1cfb7..81fecbb 100644
--- a/frontend/src/actions/index.ts
+++ b/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,
+ };
+};
diff --git a/frontend/src/containers/Review.ts b/frontend/src/containers/Review.ts
index 9404a63..4476240 100644
--- a/frontend/src/containers/Review.ts
+++ b/frontend/src/containers/Review.ts
@@ -1,8 +1,8 @@
import { connect } from "react-redux";
import {
- setDrawerButton, setReviewPopover, setReviewSummary, setLastReview,
- setReview, setReviewLoading
+ setDrawerButton, setReviewPopover, setReviewSummary,
+ 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)),
};
};
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6901b67..a9c93ef 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -61,3 +61,9 @@ body {
border-color: red;
}
+
+.review-fab {
+ position: absolute;
+ bottom: 12px;
+ right: -12px;
+}
diff --git a/frontend/src/pages/review.tsx b/frontend/src/pages/review.tsx
index b27a7b7..8112944 100644
--- a/frontend/src/pages/review.tsx
+++ b/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(
+
+
+
+
;
}
}
diff --git a/frontend/src/reducers/index.ts b/frontend/src/reducers/index.ts
index 4be3c03..a448c71 100644
--- a/frontend/src/reducers/index.ts
+++ b/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