From 7339e1ccac75a37a60ab73193943be6c1c9f5410 Mon Sep 17 00:00:00 2001 From: Alexander Polynomdivision Date: Mon, 24 Sep 2018 16:16:33 +0200 Subject: [PATCH] feat: Implement a cancel button --- frontend/src/actions/index.ts | 8 ++++ frontend/src/containers/Review.ts | 6 ++- frontend/src/index.css | 6 +++ frontend/src/pages/review.tsx | 62 +++++++++++++++++++++++++++++++ frontend/src/reducers/index.ts | 8 ++++ 5 files changed, 88 insertions(+), 2 deletions(-) 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( + + + + + Willst du die Wiederholung abbrechen? + + + Wenn du jetzt abbricht, dann geht dein in dieser Wiederholung gesammelte Fortschritt + verloren. + + + + + + + ; } } 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