feat: Add a 'No Vocab' dialog
This commit is contained in:
parent
8b2aba5d91
commit
1b5fd669de
@ -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 {
|
||||
|
@ -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)),
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -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}>
|
||||
|
@ -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
|
||||
|
Reference in New Issue
Block a user