feat: Add a 'No Vocab' dialog

This commit is contained in:
Alexander Polynomdivision 2018-10-16 14:47:41 +02:00
parent 8b2aba5d91
commit 1b5fd669de
4 changed files with 48 additions and 24 deletions

View File

@ -128,6 +128,14 @@ export function setReviewPopover(state: boolean, text: string, color: string, te
};
};
export const REVIEW_SET_MODAL = "REVIEW_SET_MODAL";
export function setReviewModal(state: boolean) {
return {
type: REVIEW_SET_MODAL,
state,
};
};
export const REVIEW_SET_LOADING = "REVIEW_SET_LOADING";
export function setReviewLoading(state: boolean) {
return {

View File

@ -2,7 +2,8 @@ import { connect } from "react-redux";
import {
setDrawerButton, setReviewPopover, setReviewSummary,
setReview, setReviewLoading, setReviewDialog, setReviewHelp
setReview, setReviewLoading, setReviewDialog, setReviewHelp,
setReviewModal
} from "../actions";
import { IReviewMetadata } from "../models/review";
@ -21,6 +22,8 @@ const mapStateToProps = state => {
popoverTextColor: state.review.popoverTextColor,
loading: state.review.loading,
showHelp: state.review.showHelp,
modalShow: state.review.modalShow,
};
};
const mapDispatchToProps = dispatch => {
@ -32,6 +35,8 @@ const mapDispatchToProps = dispatch => {
setLoading: (state: boolean) => dispatch(setReviewLoading(state)),
setReviewDialog: (state: boolean) => dispatch(setReviewDialog(state)),
setShowHelp: (state: boolean) => dispatch(setReviewHelp(state)),
setModal: (state: boolean) => dispatch(setReviewModal(state)),
};
};

View File

@ -8,8 +8,6 @@ import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
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";
@ -322,7 +320,30 @@ const ReviewPageWithRouter = withRouter(
render() {
if (this.props.loading) {
return <Loader />;
return <div>
<Dialog
open={this.props.modalShow}
onClose={() => { }}>
<DialogTitle>Deine Vokabelliste ist leer</DialogTitle>
<DialogContent>
<DialogContentText>
Du hast noch keine Vokabeln, die du wiederholen könntest.
Vokabeln werden nach dem erfolgreichen beenden eines Levels
der Vokabelliste hinzugefügt
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
onClick={this.closeModal}
color="primary">
Verstanden
</Button>
</DialogActions>
</Dialog>
<Loader />
</div>;
}
const { question, qtype } = this.props.current;
@ -431,26 +452,6 @@ const ReviewPageWithRouter = withRouter(
) : undefined
}
<Dialog
open={true}
onClose={() => { }}>
<DialogTitle>Deine Vokabelliste ist leer</DialogTitle>
<DialogContent>
<DialogContentText>
Du hast noch keine Vokabeln, die du wiederholen könntest.
Vokabeln werden nach dem erfolgreichen beenden eines Levels
der Vokabelliste hinzugefügt
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
onClick={this.closeModal}
color="primary">
Verstanden
</Button>
</DialogActions>
</Dialog>
<Dialog
open={this.props.dialogOpen}
onClose={this.closeDialog}>

View File

@ -56,6 +56,8 @@ interface IState {
popoverColor: string;
popoverTextColor: string;
showHelp: boolean;
modalShow: boolean;
};
vocab: {
@ -131,6 +133,8 @@ const initialState: IState = {
popoverColor: "",
popoverTextColor: "",
showHelp: false,
modalShow: true,
},
vocab: {
@ -351,6 +355,12 @@ export function LateinicusApp(state: IState = initialState, action: any) {
searchTerm: action.term,
}),
});
case Actions.REVIEW_SET_MODAL:
return Object.assign({}, state, {
review: Object.assign({}, state.review, {
modalShow: action.state,
}),
});
default:
// Ignore the initialization call to the reducer. By that we can
// catch all actions that are not implemented