This repository has been archived on 2022-03-12. You can view files and clone it, but cannot push or open issues or pull requests.
Lateinicus/src/components/app.tsx

121 lines
3.7 KiB
TypeScript
Raw Normal View History

2018-08-24 17:03:08 +00:00
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 IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
2018-08-24 17:03:08 +00:00
2018-08-26 14:23:48 +00:00
import { BrowserRouter, Route, Redirect } from "react-router-dom";
import AuthRoute from "../security/AuthRoute";
import Dashboard from "../pages/dashboard";
2018-08-24 17:03:08 +00:00
import LoginPage from "../pages/login";
2018-08-26 14:23:48 +00:00
import LessonsPage from "../pages/lessons";
import { ILesson } from "../models/lesson";
2018-08-24 17:03:08 +00:00
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);
2018-08-26 14:23:48 +00:00
this.isAuthenticated = this.isAuthenticated.bind(this);
}
lessons(): ILesson[] {
2018-08-26 15:12:07 +00:00
// TODO: Actually fetch them from somewhere
2018-08-26 14:23:48 +00:00
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;
2018-08-24 17:03:08 +00:00
}
2018-08-26 15:12:07 +00:00
learners(): ILearner[] {
return [{
username: "Polynomdivision",
level: 5,
score: 400,
}, {
username: "Polynomdivision2",
level: 3,
score: 500,
}, {
username: "Der eine Typ",
level: 7,
score: 100,
}];
}
2018-08-24 17:03:08 +00:00
login(username: string, password: string): Promise<boolean> {
return new Promise((res, rej) => {
// TODO
2018-08-26 14:23:48 +00:00
this.setState({
loggedIn: true
});
2018-08-24 17:03:08 +00:00
res();
});
}
2018-08-26 14:23:48 +00:00
// Checks whether the user is logged in
isAuthenticated() {
// TODO: Security?
return this.state.loggedIn === true;
}
2018-08-24 17:03:08 +00:00
render() {
2018-08-26 14:23:48 +00:00
return <BrowserRouter
basename="/">
<div className="flex">
<AppBar position="static">
<Toolbar>
{
this.isAuthenticated() ? (
<IconButton color="inherit">
<MenuIcon />
</IconButton>
) : undefined
}
2018-08-26 14:23:48 +00:00
<Typography className="flex" variant="title" color="inherit">
Lateinicus
2018-08-24 17:03:08 +00:00
</Typography>
2018-08-26 14:23:48 +00:00
</Toolbar>
</AppBar>
2018-08-24 17:03:08 +00:00
2018-08-26 14:23:48 +00:00
<div className="content">
<Route exact path="/" component={() => <Redirect to="/login" />} />
<Route exact path="/login" component={() => {
return <LoginPage loggedIn={this.state.loggedIn} login={this.login} />
}} />
2018-08-26 15:12:07 +00:00
<AuthRoute
isAuth={this.isAuthenticated}
path="/dashboard"
component={() => <Dashboard lessons={this.lessons()} learners={this.learners()} />} />
<AuthRoute
isAuth={this.isAuthenticated}
path="/lessons"
component={() => <LessonsPage lessons={this.lessons()} />} />
2018-08-26 14:23:48 +00:00
</div>
</div>
</BrowserRouter>;
2018-08-24 17:03:08 +00:00
}
};