dbg: Stub all 'API-Calls'

package-lock.json

@@ -135,6 +135,12 @@
       "integrity": "sha512-KU/VDjC5RwtDUZiz3d+DHXJF2lp5hB9dn552TXIyptj8SH1vXmR40mG0JgGq03IlYsOgGfcv8xrLpSQ0YUMQdA==",
       "dev": true
     },
+    "@types/history": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.0.tgz",
+      "integrity": "sha512-1A/RUAX4VtmGzNTGLSfmiPxQ3XwUSe/1YN4lW9GRa+j307oFK6MPjhlvw6jEHDodUBIvSvrA7/iHDchr5LS+0Q==",
+      "dev": true
+    },
     "@types/jest": {
       "version": "23.3.2",
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-23.3.2.tgz",
@@ -150,12 +156,6 @@
         "indefinite-observable": "^1.0.1"
       }
     },
-    "@types/node": {
-      "version": "10.9.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.9.4.tgz",
-      "integrity": "sha512-fCHV45gS+m3hH17zgkgADUSi2RR1Vht6wOZ0jyHP8rjiQra9f+mIcgwPQHllmDocYOstIEbKlxbFDYlgrTPYqw==",
-      "dev": true
-    },
     "@types/prop-types": {
       "version": "15.5.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.5.tgz",
@@ -173,6 +173,27 @@
         "csstype": "^2.2.0"
       }
     },
+    "@types/react-router": {
+      "version": "4.0.31",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-4.0.31.tgz",
+      "integrity": "sha512-57Tqu1EDMgDzHhmIEjjQZHrc/N7/+GGv6CtH1wRTLmMIy3UMxX69vQoeEz0AmK0/zkf5ecfEW1ZX8DLVQ6Gl7Q==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-4.3.1.tgz",
+      "integrity": "sha512-GbztJAScOmQ/7RsQfO4cd55RuH1W4g6V1gDW3j4riLlt+8yxYLqqsiMzmyuXBLzdFmDtX/uU2Bpcm0cmudv44A==",
+      "dev": true,
+      "requires": {
+        "@types/history": "*",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@types/react-transition-group": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-2.0.13.tgz",
@@ -500,19 +521,6 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
-    "alsatian": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/alsatian/-/alsatian-2.3.0.tgz",
-      "integrity": "sha512-e83K7JpH9Hj1+TUYyZialNKDln5gW56C82CVcd0AMt2whLFtKzYiddE5Dz2biUWjT8KzF11lkwonzf9wOCQyAA==",
-      "dev": true,
-      "requires": {
-        "@types/node": ">=4.0.0",
-        "extendo-error": "^1.0.1",
-        "glob": "^7.0.3",
-        "reflect-metadata": "^0.1.3",
-        "tap-bark": "1.0.0"
-      }
-    },
     "ansi-escapes": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
@@ -3289,12 +3297,6 @@
       "integrity": "sha512-4As8uPrjfwb7VXC+WnLCbXK7y+Ueb2B3zgNCePYfhxS1PYeaO1YTeplffTEcbfLhvFNGLAz90VvJs9yomG7bow==",
       "dev": true
     },
-    "duplexer": {
-      "version": "0.1.1",
-      "resolved": "http://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
-      "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
-      "dev": true
-    },
     "duplexer2": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
@@ -3548,12 +3550,6 @@
       "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=",
       "dev": true
     },
-    "events-to-array": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/events-to-array/-/events-to-array-1.1.2.tgz",
-      "integrity": "sha1-LUH1Y+H+QA7Uli/hpNXGp1Od9/Y=",
-      "dev": true
-    },
     "evp_bytestokey": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
@@ -3677,12 +3673,6 @@
         }
       }
     },
-    "extendo-error": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/extendo-error/-/extendo-error-1.0.1.tgz",
-      "integrity": "sha1-MDJeDPbC+l+RAj0hAO0CGCbmMX0=",
-      "dev": true
-    },
     "external-editor": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.0.1.tgz",
@@ -10701,12 +10691,6 @@
         }
       }
     },
-    "reflect-metadata": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.12.tgz",
-      "integrity": "sha512-n+IyV+nGz3+0q3/Yf1ra12KpCyi001bi4XFxSjbiWWjfqb52iTTtpGXmCCAOWWIAn9KEuFZKGqBERHmrtScZ3A==",
-      "dev": true
-    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -12065,30 +12049,6 @@
       "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=",
       "dev": true
     },
-    "tap-bark": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/tap-bark/-/tap-bark-1.0.0.tgz",
-      "integrity": "sha1-bAPcUWh/7Xh3+COtSx3dHvXrVnQ=",
-      "dev": true,
-      "requires": {
-        "@types/node": ">=0.0.2",
-        "chalk": "^1.1.3",
-        "duplexer": "^0.1.1",
-        "tap-parser": "^3.0.3",
-        "through2": "^2.0.1"
-      }
-    },
-    "tap-parser": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/tap-parser/-/tap-parser-3.0.5.tgz",
-      "integrity": "sha1-uUf2ngs+U9S5IBH2zFUuFtrcfsk=",
-      "dev": true,
-      "requires": {
-        "events-to-array": "^1.0.1",
-        "js-yaml": "^3.2.7",
-        "readable-stream": "^2"
-      }
-    },
     "tapable": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.0.0.tgz",

package.json

@@ -18,6 +18,7 @@
     },
     "devDependencies": {
         "@types/jest": "^23.3.2",
+        "@types/react-router-dom": "^4.3.1",
         "html-webpack-plugin": "3.2.0",
         "jest": "^23.6.0",
         "parcel-bundler": "^1.9.7",

src/components/app.tsx

@@ -31,6 +31,7 @@ import ReviewPage from "../pages/review";
 import SummaryPage from "../pages/summary";
 
 import { ILevel } from "../models/level";
+import { ILearner } from "../models/learner";
 import { IVocab, VocabType } from "../models/vocab";
 import { IReviewMetadata } from "../models/review";
 
@@ -40,7 +41,8 @@ interface IState {
     drawerOpen: boolean;
 }
 
-// TODO: Replace the sessionStorage with localStorage
+// TODO: Replace the sessionStorage with localStorage?
+// TODO: Cache API-Calls
 export default class Application extends React.Component<{}, IState> {
     constructor(props: any) {
         super(props);
@@ -60,6 +62,7 @@ export default class Application extends React.Component<{}, IState> {
     }
 
     getLevels(): ILevel[] {
+        console.log("STUB: Application::getLevels");
         // TODO: Actually fetch them from somewhere
         const levels = [{
             name: "Der Bauer auf dem Feld",
@@ -77,6 +80,8 @@ export default class Application extends React.Component<{}, IState> {
     }
 
     getLastReview(): IReviewMetadata {
+        console.log("STUB: Application::getLastReview");
+
         // TODO: Actually fetch this
         return {
             correct: 5,
@@ -86,6 +91,28 @@ export default class Application extends React.Component<{}, IState> {
     }
 
     getLearners(): ILearner[] {
+        console.log("STUB: Application::getLearners");
+
+        // TODO: Implement
+        return [{
+            username: "Polynomdivision",
+            level: 5,
+            score: 400,
+        }, {
+            username: "Polynomdivision2",
+            level: 3,
+            score: 500,
+        }, {
+            username: "Der eine Typ",
+            level: 7,
+            score: 100,
+        }];
+    }
+
+    getTopTenLearners(): ILearner[] {
+        console.log("STUB: Application::getTopTenLearners");
+
+        // TODO: Implement
         return [{
             username: "Polynomdivision",
             level: 5,
@@ -102,6 +129,8 @@ export default class Application extends React.Component<{}, IState> {
     }
 
     getNextLevel(): ILevel {
+        console.log("STUB: Application::getNextLevel");
+
         // TODO: Actually fetch data
         return {
             name: "???",
@@ -112,6 +141,8 @@ export default class Application extends React.Component<{}, IState> {
     }
 
     getLevelVocab(id: string): IVocab[] {
+        console.log("STUB: Application::getLevelVocab");
+
         // TODO: Actually implement this
         // TODO: Don't fetch this when it was already fetched once.
         return [{
@@ -141,6 +172,8 @@ export default class Application extends React.Component<{}, IState> {
     }
 
     login(username: string, password: string): Promise<boolean> {
+        console.log("STUB: Application::login");
+
         return new Promise((res, rej) => {
             // TODO
             this.setState({
@@ -284,7 +317,7 @@ export default class Application extends React.Component<{}, IState> {
                             return <Dashboard
                                 nextLevel={this.getNextLevel}
                                 lastReview={this.getLastReview}
-                                learners={this.getLearners()} />
+                                getTopTen={this.getTopTenLearners} />
                         }} />
                     <AuthRoute
                         isAuth={this.isAuthenticated}

src/components/scoreboard.tsx

@@ -10,10 +10,10 @@ import Typography from "@material-ui/core/Typography";
 import { ILearner } from "../models/learner";
 
 interface IProps {
-    learners: ILearner[];
+    topTen: ILearner[];
 }
 
-export default class Scoreboard extends React.Component<{}> {
+export default class Scoreboard extends React.Component<IProps> {
     private unique = 0;
     private nr = 1;
 
@@ -46,7 +46,7 @@ export default class Scoreboard extends React.Component<{}> {
     }
 
     render() {
-        const sortedLearners = this.props.learners.sort((a, b) => {
+        const sortedLearners = this.props.topTen.sort((a, b) => {
             if (a.score > b.score) {
                 return -1;
             } else if (a.score < b.score) {

src/pages/dashboard.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { Redirect } from "react-router";
+import { Link } from "react-router-dom";
 
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
@@ -17,22 +17,10 @@ import { IReviewMetadata } from "../models/review";
 interface IProps {
     nextLevel: () => ILevel;
     lastReview: () => IReviewMetadata;
-    learners: ILearner[];
+    getTopTen: () => ILearner[];
-}
-
-interface IState {
-    toLevel: number;
-}
-
-export default class Dashboard extends React.Component<IProps, IState> {
-    constructor(props: any) {
-        super(props);
-
-        this.state = {
-            toLevel: -1;
-        };
 }
 
+export default class Dashboard extends React.Component<IProps> {
     render() {
         const small = window.matchMedia("(max-width: 700px)").matches;
         const direction = small ? "column" : "row";
@@ -40,11 +28,6 @@ export default class Dashboard extends React.Component<IProps, IState> {
         const level = this.props.nextLevel();
 
         return <div>
-            {
-                this.state.toLevel !== -1 ? (
-                    <Redirect to={`/level/${this.state.toLevel}`} />
-                ) : undefined
-            }
             <Grid container direction={direction} spacing={16}>
                 <Grid item lg={4}>
                     <Paper className="paper">
@@ -54,12 +37,10 @@ export default class Dashboard extends React.Component<IProps, IState> {
                         <Typography component="p">
                             {level.desc}
                         </Typography>
-                        <Button className="lesson-card-btn"
+                        <Button
-                            onClick={() => {
+                            component={Link}
-                                this.setState({
+                            to={`/level/${level.level}`}
-                                    toLevel: level.level,
+                            className="lesson-card-btn">
-                                });
-                            }}>
                             Zum Level
                     </Button>
                     </Paper>
@@ -70,7 +51,7 @@ export default class Dashboard extends React.Component<IProps, IState> {
                             Rangliste: Top 10
                     </Typography>
 
-                        <Scoreboard learners={this.props.learners.slice(0, 10)} />
+                        <Scoreboard topTen={this.props.getTopTen()} />
                     </Paper>
                 </Grid>
                 <Grid item lg={4}>