feat: Implement a cancel button
This commit is contained in:
parent
2f5e572f8e
commit
7339e1ccac
@ -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,
|
||||
};
|
||||
};
|
||||
|
@ -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)),
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -61,3 +61,9 @@ body {
|
||||
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.review-fab {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: -12px;
|
||||
}
|
||||
|
@ -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>;
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
|
Reference in New Issue
Block a user