feat: Implement getNextLevel and getTopTenLearners

frontend/src/pages/dashboard.tsx

@@ -6,52 +6,93 @@ 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 { ILevel } from "../models/level";
-import { ILearner } from "../models/learner";
+import { ILearner, TopTen } from "../models/learner";
 import { IReviewMetadata } from "../models/review";
 
 interface IProps {
-    nextLevel: () => ILevel;
+    getNextLevel: () => Promise<ILevel>;
     getLastReview: () => IReviewMetadata;
-    getTopTen: () => ILearner[];
+    getTopTen: () => Promise<ILearner[]>;
+
+    nextLevel: ILevel;
+    loadingNextLevel: boolean;
+    setLoadingNL: (state: boolean) => void;
+    setNextLevel: (level: ILevel) => void;
+    topTen: TopTen[];
+    loadingTopTen: boolean;
+    setLoadingTT: (state: boolean) => void;
+    setTopTen: (topten: TopTen[]) => void;
 }
 
 export default class Dashboard extends React.Component<IProps> {
+    componentDidMount() {
+        this.props.setLoadingNL(true);
+
+        this.props.getNextLevel().then(res => {
+            this.props.setLoadingNL(false);
+            this.props.setNextLevel(res);
+        }, err => {
+            console.log("Failed to fetch next level!", err);
+        });
+
+        this.props.getTopTen().then(res => {
+            this.props.setLoadingTT(false);
+            this.props.setTopTen(res);
+        }, err => {
+            console.log("Failed to fetch Top Ten");
+        });
+    }
+
     render() {
         const small = window.matchMedia("(max-width: 700px)").matches;
         const direction = small ? "column" : "row";
 
-        const level = this.props.nextLevel();
+        const level = this.props.nextLevel;
 
         return <div>
             <Grid container direction={direction} spacing={16}>
                 <Grid item lg={4}>
                     <Paper className="paper">
-                        <Typography variant="title">{`Level ${level.level}`}</Typography>
-                        <Typography variant="title" component="p">{level.name}</Typography>
-                        <br />
-                        <Typography component="p">
-                            {level.desc}
-                        </Typography>
-                        <Button
-                            component={Link}
-                            to={`/level/${level.level}`}
-                            className="lesson-card-btn">
-                            Zum Level
-                    </Button>
+                        {this.props.loadingNextLevel ? (
+                            <CircularProgress />
+                        ) : (
+                                <div>
+                                    <Typography variant="title">{`Level ${level.level}`}</Typography>
+                                    <Typography variant="title" component="p">{level.name}</Typography>
+                                    <br />
+                                    <Typography component="p">
+                                        {level.desc}
+                                    </Typography>
+                                    <Button
+                                        component={Link}
+                                        to={`/level/${level.level}`}
+                                        className="lesson-card-btn">
+                                        Zum Level
+                                    </Button>
+                                </div>
+
+                            )}
                     </Paper>
                 </Grid>
                 <Grid item lg={4}>
                     <Paper className="paper">
-                        <Typography variant="title" component="p">
-                            Rangliste: Top 10
-                    </Typography>
+                        {this.props.loadingTopTen ? (
+                            <CircularProgress />
+                        ) : (
+                                <div>
+                                    <Typography variant="title" component="p">
+                                        Rangliste: Top 10
+                                  </Typography>
 
-                        <Scoreboard topTen={this.props.getTopTen()} />
+                                    <Scoreboard topTen={this.props.topTen} />
+                                </div>
+                            )}
                     </Paper>
                 </Grid>
                 <Grid item lg={4}>

frontend/src/pages/login.tsx

@@ -46,7 +46,7 @@ const LoginPageWithRouter = withRouter(
                 } else {
                     this.props.history.push("/dashboard");
                 }
-            }, (err: IResponse) => {
+            }).catch((err: IResponse) => {
                 this.props.setLoading(false);
                 this.props.setSnackbar(true, "Failed to log in");
             });