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 SwipeableDrawer from "@material-ui/core/SwipeableDrawer"; import List from "@material-ui/core/List"; import ListItem from "@material-ui/core/ListItem"; import ListItemIcon from "@material-ui/core/ListItemIcon"; import ListItemText from "@material-ui/core/ListItemText"; import Divider from "@material-ui/core/Divider"; import Avatar from "@material-ui/core/Avatar"; import MenuIcon from "@material-ui/icons/Menu"; import SettingsIcon from "@material-ui/icons/Settings"; import PersonIcon from "@material-ui/icons/Person"; import InfoIcon from "@material-ui/icons/Info"; 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 LevelPage from "../pages/level"; import { ILesson } from "../models/lesson"; import { IVocab } from "../models/vocab"; interface IState { loggedIn: boolean; drawerOpen: boolean; } export default class Application extends React.Component<{}, IState> { constructor(props: any) { super(props); this.state = { loggedIn: false, drawerOpen: false, }; this.login = this.login.bind(this); this.isAuthenticated = this.isAuthenticated.bind(this); } getLessons(): ILesson[] { // TODO: Actually fetch them from somewhere 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; } getLearners(): ILearner[] { return [{ username: "Polynomdivision", level: 5, score: 400, }, { username: "Polynomdivision2", level: 3, score: 500, }, { username: "Der eine Typ", level: 7, score: 100, }]; } getNextLesson(): ILesson { // TODO: Actually fetch data return { name: "???", desc: "Warum schreibe ich überhaupt was?dsd dddddddddddddddddddddd", level: 2, done: false, }; } getLevelVocab(id: string): IVocab[] { // TODO: Actually implement this // TODO: Don't fetch this when it was already fetched once. return [{ latin: "Veni", german: "<Wortbedeutung>", id: 0 }, { latin: "Vidi", german: "<Wortbedeutung>", id: 1 }, { latin: "Vici", german: "<Wortbedeutung>", hint: "Wird \"Viki\" und nicht \"Vichi\" ausgesprochen", mnemonic: "Merk dir das Wort mit Caesars berühmten Worten: \"Veni Vidi Vici\"; Er kam, sah und siegte", id: 2 }] as IVocab[]; } 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="/app/"> <div className="flex"> <AppBar position="static"> <Toolbar> { this.isAuthenticated() ? ( <IconButton color="inherit" onClick={() => this.setState({ drawerOpen: true })}> <MenuIcon /> </IconButton> ) : undefined } <Typography className="flex" variant="title" color="inherit"> Lateinicus </Typography> </Toolbar> </AppBar> <SwipeableDrawer anchor="left" open={this.state.drawerOpen} onClose={() => this.setState({ drawerOpen: false, })} onOpen={() => this.setState({ drawerOpen: true })}> <List component="nav"> <ListItem> {/* TODO: Replace with the actual username */} <Avatar alt="{Username}" style={{ width: 80, height: 80 }} src="https://avatarfiles.alphacoders.com/105/105250.jpg" /> <ListItemText primary="{Username}" /> </ListItem> <Divider /> <ListItem button> <ListItemIcon> <PersonIcon /> </ListItemIcon> <ListItemText primary="Profil" /> </ListItem> <ListItem button> <ListItemIcon> <SettingsIcon /> </ListItemIcon> <ListItemText primary="Einstellungen" /> </ListItem> <Divider /> <ListItem button> <ListItemText primary="Widerholen" /> </ListItem> <ListItem button> <ListItemText> Levelübersicht </ListItemText> </ListItem> <Divider /> <ListItem button onClick={() => window.location = "https://gitlab.com/Polynomdivision/Lateinicus/tree/master"}> <ListItemIcon> <InfoIcon /> </ListItemIcon> <ListItemText primary="Über" /> </ListItem> </List> </SwipeableDrawer> <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 nextLesson={this.getNextLesson} learners={this.getLearners()} />} /> <AuthRoute isAuth={this.isAuthenticated} path="/levelList" component={() => <LessonsPage lessons={this.getLessons()} />} /> {/*We cannot use AuthRoute here, because match is undefined otherwise*/} <Route path="/level/:id" component={({ match }) => { if (this.isAuthenticated()) { return <LevelPage id={match.params.id} levelVocab={this.getLevelVocab} />; } else { return <Redirect to="/login" />; } }} /> </div> </div> </BrowserRouter>; } };