feat: Move the loading panel to a component

frontend/src/components/loading.tsx

@@ -1,7 +1,17 @@
 import * as React from "react";
 
+import CircularProgress from "@material-ui/core/CircularProgress";
+import Paper from "@material-ui/core/Paper";
+import Grid from "@material-ui/core/Grid";
+
 export default class Loader extends React.Component<{}> {
     render() {
-        return <div className="loader" />;
+        return <div className="center">
+            <Paper className="paper">
+                <Grid container direction="column" spacing={8}>
+                    <CircularProgress />
+                </Grid>
+            </Paper>
+        </div>;
     }
 }

frontend/src/index.css

@@ -21,7 +21,7 @@ body {
 
 }
 
-.login-center {
+.center {
     display: flex;
     justify-content: center;
     align-content: center;

frontend/src/pages/dashboard.tsx

@@ -6,13 +6,13 @@ import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import Button from "@material-ui/core/Button";
 import Paper from "@material-ui/core/Paper";
-import CircularProgress from "@material-ui/core/CircularProgress";
 
 import Scoreboard from "../components/scoreboard";
 import SummaryTable from "../components/SummaryTable";
+import Loader from "../components/loading";
 
 import { ILevel } from "../models/level";
-import { ILearner, TopTen } from "../models/learner";
+import { TopTen } from "../models/learner";
 import { IReviewMetadata } from "../models/review";
 
 interface IProps {
@@ -41,23 +41,7 @@ export default class Dashboard extends React.Component<IProps> {
 
     render() {
         if (this.props.loading) {
-            return <div>
-                <Grid
-                    container
-                    spacing={0}
-                    direction="column"
-                    alignItems="center"
-                    justify="center"
-                    style={{ minHeight: '100vh' }}>
-                    <Grid item xs={12}>
-                        <Paper className="paper">
-                            <Grid container direction="column" spacing={8}>
-                                <CircularProgress />
-                            </Grid>
-                        </Paper>
-                    </Grid>
-                </Grid>
-            </div>;
+            return <Loader />;
         }
 
         const small = window.matchMedia("(max-width: 700px)").matches;

frontend/src/pages/level.tsx

@@ -18,6 +18,7 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 
 import { withRouter } from "react-router-dom";
 
+import Loader from "../components/loading";
 import VocabularyData from "../components/VocabularyData";
 
 import { TrackerEvent } from "../models/tracker";
@@ -146,24 +147,7 @@ const LevelPageWithRouter = withRouter(
 
         render() {
             if (this.props.loading) {
-                return <div>
-                    <Grid
-                        container
-                        spacing={0}
-                        direction="column"
-                        alignItems="center"
-                        justify="center"
-                        style={{ minHeight: '100vh' }}>
-                        <Grid item xs={12}>
-                            <Paper className="paper">
-                                <Grid container direction="column" spacing={8}>
-                                    <CircularProgress />
-                                </Grid>
-                            </Paper>
-                        </Grid>
-                    </Grid>
-
-                </div>;
+                return <Loader />;
             }
 
             const vocabTypeToStr = {

frontend/src/pages/levelList.tsx

@@ -8,7 +8,8 @@ import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import Paper from "@material-ui/core/Paper";
 import Snackbar from "@material-ui/core/Snackbar";
-import CircularProgress from "@material-ui/core/CircularProgress";
+
+import Loader from "../components/loading";
 
 import { withRouter } from "react-router-dom";
 
@@ -52,23 +53,7 @@ const LevelListWithRouter = withRouter(
 
         render() {
             if (this.props.loading) {
-                return <div>
-                    <Grid
-                        container
-                        spacing={0}
-                        direction="column"
-                        alignItems="center"
-                        justify="center"
-                        style={{ minHeight: '100vh' }}>
-                        <Grid item xs={12}>
-                            <Paper className="paper">
-                                <Grid container direction="column" spacing={8}>
-                                    <CircularProgress />
-                                </Grid>
-                            </Paper>
-                        </Grid>
-                    </Grid>
-                </div>;
+                return <Loader />;
             }
 
             const small = window.matchMedia("(max-width: 700px)").matches;

frontend/src/pages/login.tsx

@@ -83,7 +83,7 @@ const LoginPageWithRouter = withRouter(
             };
 
             return <div>
-                <div className="login-center">
+                <div className="center">
                     <Paper className="paper">
                         <Typography variant="title">Login</Typography>
                         <Grid container direction="column" spacing={8}>

frontend/src/pages/review.tsx

@@ -21,6 +21,7 @@ import CloseIcon from "@material-ui/icons/Close";
 
 import { withRouter } from "react-router-dom";
 
+import Loader from "../components/loading";
 import VocabularyData from "../components/VocabularyData";
 import {
     IVocab, IReviewCard, vocabToReviewCard, reviewQTypeToStr, VocabType
@@ -34,7 +35,7 @@ import { trackAction } from "../api/tracker";
 import lev from "js-levenshtein";
 import {
     LEVENSHTEIN_MAX_DISTANCE, MAX_ERROR_THRESHOLD,
-    REVIEW_HELP_MOD, BACKEND_URL
+    REVIEW_HELP_MOD
 } from "../config.in";
 
 import { Queue } from "../utils/queue";
@@ -59,6 +60,7 @@ interface IProps {
     popoverColor: string;
     popoverTextColor: string;
     showHelp: boolean;
+    modalShow: boolean;
 
     setReviewDialog: (state: boolean) => void;
     setSummary: (state: boolean) => void;
@@ -67,6 +69,7 @@ interface IProps {
     setReview: (curent: IReviewCard, meta: IReviewMetadata) => void;
     setLoading: (state: boolean) => void;
     setShowHelp: (state: boolean) => void;
+    setModal: (state: boolean) => void;
 }
 
 const ReviewPageWithRouter = withRouter(
@@ -112,12 +115,7 @@ const ReviewPageWithRouter = withRouter(
             getVocab().then((res: IVocab[]) => {
                 // Check if we received any vocabulary
                 if (res.length === 0) {
-                    // TODO: Replace with a snackbar
-                    alert("Du hast noch keine Vokabeln in der Review Queue");
-
-                    // Reset the button state
-                    this.props.drawerButtonState(true);
-                    this.props.history.push("/dashboard");
+                    this.openModal();
                     return;
                 }
 
@@ -148,6 +146,16 @@ const ReviewPageWithRouter = withRouter(
             this.props.setReviewDialog(false);
         }
 
+        openModal = () => {
+            this.props.setModal(true);
+        }
+        closeModal = () => {
+            // Reset the button state
+            this.props.setModal(false);
+            this.props.drawerButtonState(true);
+            this.props.history.push("/dashboard");
+        }
+
         cancelReview = () => {
             this.closeDialog();
 
@@ -314,24 +322,7 @@ const ReviewPageWithRouter = withRouter(
 
         render() {
             if (this.props.loading) {
-                return <div>
-                    <Grid
-                        container
-                        spacing={0}
-                        direction="column"
-                        alignItems="center"
-                        justify="center"
-                        style={{ minHeight: '100vh' }}>
-                        <Grid item xs={12}>
-                            <Paper className="paper">
-                                <Grid container direction="column" spacing={8}>
-                                    <CircularProgress />
-                                </Grid>
-                            </Paper>
-                        </Grid>
-                    </Grid>
-
-                </div>;
+                return <Loader />;
             }
 
             const { question, qtype } = this.props.current;
@@ -439,6 +430,27 @@ const ReviewPageWithRouter = withRouter(
                         this.helpDialog()
                     ) : 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}>