feat: Add a 'No Vocab' dialog

frontend/src/actions/index.ts

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

frontend/src/containers/Review.ts

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

frontend/src/pages/review.tsx

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

frontend/src/reducers/index.ts

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