feat: Implement a cancel button

This commit is contained in:
Alexander Polynomdivision 2018-09-24 16:16:33 +02:00
parent 2f5e572f8e
commit 7339e1ccac
5 changed files with 88 additions and 2 deletions

View File

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

View File

@ -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)),
};
};

View File

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

View File

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

View File

@ -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