Lateinicus/src/components/app.tsx

import * as React from "react";

import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";

import { BrowserRouter, Route, Redirect } from "react-router-dom";

import AuthRoute from "../security/AuthRoute";

import Dashboard from "../pages/dashboard";
import LoginPage from "../pages/login";
import LessonsPage from "../pages/lessons";

import { ILesson } from "../models/lesson";

interface IState {
    loggedIn: boolean;
}

export default class Application extends React.Component<{}, IState> {
    constructor(props: any) {
        super(props);

        this.state = {
            loggedIn: false,
        };

        this.login = this.login.bind(this);
        this.isAuthenticated = this.isAuthenticated.bind(this);
    }

    lessons(): ILesson[] {
        const lessons = [{
            name: "Der Bauer auf dem Feld",
            desc: "So fängt alles an: Du bist ein einfacher Bauer und musst dich die Karriereleiter mit deinen freshen Latein-Skills hinaufarbeiten",
            level: 1,
            done: true,
        }, {
            name: "???",
            desc: "Warum schreibe ich überhaupt was?dsd dddddddddddddddddddddd",
            level: 2,
            done: false,
        }];

        return lessons;
    }

    login(username: string, password: string): Promise<boolean> {
        return new Promise((res, rej) => {
            // TODO
            this.setState({
                loggedIn: true
            });
            res();
        });
    }

    // Checks whether the user is logged in
    isAuthenticated() {
        // TODO: Security?
        return this.state.loggedIn === true;
    }

    render() {
        return <BrowserRouter
            basename="/">
            <div className="flex">
                <AppBar position="static">
                    <Toolbar>
                        <Typography className="flex" variant="title" color="inherit">
                            Lateinicus
                    </Typography>
                    </Toolbar>
                </AppBar>

                <div className="content">
                    <Route exact path="/" component={() => <Redirect to="/login" />} />
                    <Route exact path="/login" component={() => {
                        return <LoginPage loggedIn={this.state.loggedIn} login={this.login} />
                    }} />
                    <AuthRoute isAuth={this.isAuthenticated} path="/dashboard" component={() => <Dashboard lessons={this.lessons()} />} />
                    <AuthRoute isAuth={this.isAuthenticated} path="/lessons" component={() => <LessonsPage lessons={this.lessons()} />} />
                </div>
            </div>
        </BrowserRouter>;
    }
};