feat: Implement routing

src/pages/dashboard.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+import Button from "@material-ui/core/Button";
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+
+import { ILesson } from "../models/lesson";
+
+interface IProps {
+    lessons: ILesson[];
+}
+
+export default class Dashboard extends React.Component<{}> {
+    constructor(props: any) {
+        super(props);
+    }
+
+    render() {
+        const small = window.matchMedia("(max-width: 700px)").matches;
+        const cName = small ? "lesson-card-xs" : "lesson-card-lg";
+
+        let key = 0;
+        const lessonToCard = (lesson: ILesson) => {
+            return <Grid item key={key++}>
+                <Card style={{
+                    width: small ? window.width - 32 : "300px"
+                }}>
+                    <CardContent className={cName}>
+                        <Typography variant="title">{`Level ${lesson.level}`}</Typography>
+                        <Typography variant="title" component="p">{lesson.name}</Typography>
+                        <br />
+                        <Typography component="p">
+                            {lesson.desc}
+                        </Typography>
+                    </CardContent>
+                    <CardActions>
+                        <Button className="lesson-card-btn">
+                            Zum Level
+                        </Button>
+                    </CardActions>
+                </Card>
+            </Grid>;
+        };
+
+        return <Grid container spacing={16} direction="row">
+            {this.props.lessons.map(lessonToCard)}
+        </Grid>
+    }
+};

src/pages/lessons.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+import Button from "@material-ui/core/Button";
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+
+import { ILesson } from "../models/lesson";
+
+interface IProps {
+    lessons: ILesson[];
+}
+
+export default class Dashboard extends React.Component<{}> {
+    constructor(props: any) {
+        super(props);
+    }
+
+    render() {
+        const small = window.matchMedia("(max-width: 700px)").matches;
+        const cName = small ? "lesson-card-xs" : "lesson-card-lg";
+
+        let key = 0;
+        const lessonToCard = (lesson: ILesson) => {
+            return <Grid item key={key++}>
+                <Card style={{
+                    width: small ? window.width - 32 : "300px"
+                }}>
+                    <CardContent className={cName}>
+                        <Typography variant="title">{`Level ${lesson.level}`}</Typography>
+                        <Typography variant="title" component="p">{lesson.name}</Typography>
+                        <br />
+                        <Typography component="p">
+                            {lesson.desc}
+                        </Typography>
+                    </CardContent>
+                    <CardActions>
+                        <Button className="lesson-card-btn">
+                            Zum Level
+                        </Button>
+                    </CardActions>
+                </Card>
+            </Grid>;
+        };
+
+        return <Grid container spacing={16} direction="row">
+            {this.props.lessons.map(lessonToCard)}
+        </Grid>
+    }
+};

src/pages/login.tsx

@@ -8,8 +8,11 @@ import Button from "@material-ui/core/Button";
 import LinearProgress from "@material-ui/core/LinearProgress";
 import Snackbar from "@material-ui/core/Snackbar";
 
+import { Redirect } from "react-router-dom";
+
 interface IProps {
     login: (username: string, password: string) => Promise<boolean>;
+    loggedIn: boolean;
 }
 
 interface IState {
@@ -63,7 +66,7 @@ export default class LoginPage extends React.Component<{}, IState> {
 
         const { username, password } = this.state;
         this.props.login(username, password).then((res) => {
-            load(false);
+            // Don't even do anything here!
         }, (err) => {
             load(false);
             showSnackbar("Failed to log in");
@@ -121,6 +124,11 @@ export default class LoginPage extends React.Component<{}, IState> {
                 onClose={snackbarClose}
                 message={this.state.snack}
                 autoHideDuration={6000} />
+            {
+                this.props.loggedIn ? (
+                    <Redirect to="/dashboard" />
+                ) : undefined
+            }
         </div>;
     }
 };