feat: Implement getNextLevel and getTopTenLearners
This commit is contained in:
Alexander Polynomdivision
@@ -7,6 +7,7 @@ import Toolbar from "@material-ui/core/Toolbar";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import Popover from "@material-ui/core/Popover";
|
||||
import SwipeableDrawer from "@material-ui/core/SwipeableDrawer";
|
||||
import List from "@material-ui/core/List";
|
||||
import ListItem from "@material-ui/core/ListItem";
|
||||
@@ -29,12 +30,17 @@ interface IProps {
|
||||
|
||||
user: IUser;
|
||||
open: boolean;
|
||||
|
||||
scorePopoverOpen: boolean;
|
||||
showButton: boolean;
|
||||
authenticated: boolean;
|
||||
setDrawer: (state: boolean) => void;
|
||||
setScorePopover: (state: boolean) => void;
|
||||
};
|
||||
|
||||
export default class Drawer extends React.Component<IProps> {
|
||||
private scoreBtnRef: HTMLButtonElement = undefined;
|
||||
|
||||
openDrawer = () => {
|
||||
this.props.setDrawer(true);
|
||||
}
|
||||
@@ -42,6 +48,13 @@ export default class Drawer extends React.Component<IProps> {
|
||||
this.props.setDrawer(false);
|
||||
}
|
||||
|
||||
toggleScorePopover = () => {
|
||||
this.props.setScorePopover(!this.props.scorePopoverOpen);
|
||||
}
|
||||
closeScorePopover = () => {
|
||||
this.props.setScorePopover(false);
|
||||
}
|
||||
|
||||
render() {
|
||||
const level = userScoreToLevel(this.props.user.score);
|
||||
|
||||
@@ -63,11 +76,33 @@ export default class Drawer extends React.Component<IProps> {
|
||||
</Typography>
|
||||
{
|
||||
this.props.authenticated ? (
|
||||
<Button color="inherit">
|
||||
<Button
|
||||
color="inherit"
|
||||
buttonRef={node => this.scoreBtnRef = node}
|
||||
onClick={this.toggleScorePopover}>
|
||||
{`${this.props.user.score} / ${level.levelCap}`}
|
||||
</Button>
|
||||
) : undefined
|
||||
}
|
||||
<Popover
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
anchorEl={this.scoreBtnRef}
|
||||
open={this.props.scorePopoverOpen}
|
||||
onClose={this.closeScorePopover}>
|
||||
<div className="content">
|
||||
<Typography variant="headline">Du bist: {level.name}</Typography>
|
||||
<Typography variant="subheading">
|
||||
Dir fehlen noch <b>{level.levelCap - this.props.user.score}</b> Erfahrungspunkte bis zum nächsten Level
|
||||
</Typography>
|
||||
</div>
|
||||
</Popover>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<SwipeableDrawer
|
||||
|
||||
@@ -5,7 +5,7 @@ import { BrowserRouter, Route, Redirect } from "react-router-dom";
|
||||
import AuthRoute from "../security/AuthRoute";
|
||||
import { setSessionToken, removeSessionToken } from "../security/Token";
|
||||
|
||||
import Dashboard from "../pages/dashboard";
|
||||
import Dashboard from "../containers/Dashboard";
|
||||
import LoginPage from "../containers/LoginPage";
|
||||
import LevelListPage from "../containers/LevelList";
|
||||
import LevelPage from "../containers/LevelPage";
|
||||
@@ -18,7 +18,7 @@ import Drawer from "../containers/Drawer";
|
||||
import { BACKEND_URL } from "../config";
|
||||
|
||||
import { ILevel } from "../models/level";
|
||||
import { ILearner } from "../models/learner";
|
||||
import { ILearner, TopTen } from "../models/learner";
|
||||
import { IVocab, VocabType } from "../models/vocab";
|
||||
import { IReviewMetadata, ReviewType } from "../models/review";
|
||||
import { IUser } from "../models/user";
|
||||
@@ -132,35 +132,47 @@ export default class Application extends React.Component<IProps> {
|
||||
}];
|
||||
}
|
||||
|
||||
getTopTenLearners(): ILearner[] {
|
||||
console.log("STUB: Application::getTopTenLearners");
|
||||
getTopTenLearners = (): Promise<TopTen[]> => {
|
||||
const id = this.props.user.classId;
|
||||
return new Promise((res, rej) => {
|
||||
fetch(`${BACKEND_URL}/auth/class/${id}/topTen`, {
|
||||
headers: new Headers({
|
||||
"Content-Type": "application/json",
|
||||
"Token": this.props.user.sessionToken,
|
||||
}),
|
||||
}).then(resp => resp.json(),
|
||||
err => rej(err))
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
|
||||
// TODO: Implement
|
||||
return [{
|
||||
username: "Polynomdivision",
|
||||
level: 5,
|
||||
score: 400,
|
||||
}, {
|
||||
username: "Polynomdivision2",
|
||||
level: 3,
|
||||
score: 500,
|
||||
}, {
|
||||
username: "Der eine Typ",
|
||||
level: 7,
|
||||
score: 100,
|
||||
}];
|
||||
if (data.error === "0") {
|
||||
res(data.data.topTen);
|
||||
} else {
|
||||
rej(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getNextLevel(): ILevel {
|
||||
console.log("STUB: Application::getNextLevel");
|
||||
getNextLevel = (): Promise<ILevel> => {
|
||||
return new Promise((res, rej) => {
|
||||
fetch(`${BACKEND_URL}/auth/user/nextLevel`, {
|
||||
headers: new Headers({
|
||||
"Content-Type": "application/json",
|
||||
"Token": this.props.user.sessionToken,
|
||||
}),
|
||||
}).then(resp => resp.json(),
|
||||
err => rej(err))
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
|
||||
// TODO: Actually fetch data
|
||||
return {
|
||||
name: "???",
|
||||
desc: "Warum schreibe ich überhaupt was?dsd dddddddddddddddddddddd",
|
||||
level: 2,
|
||||
done: false,
|
||||
};
|
||||
if (data.error === "0") {
|
||||
res(data.data);
|
||||
} else {
|
||||
rej(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
getLevelVocab = (id: number): Promise<IVocab[]> => {
|
||||
@@ -171,14 +183,15 @@ export default class Application extends React.Component<IProps> {
|
||||
"Content-Type": "application/json",
|
||||
"Token": this.props.user.sessionToken,
|
||||
}),
|
||||
}).then(data => data.json())
|
||||
.then((resp: IResponse) => {
|
||||
if (resp.error === "0") {
|
||||
res(resp.data.vocab);
|
||||
} else {
|
||||
rej(resp);
|
||||
}
|
||||
});
|
||||
}).then(data => data.json(), err => {
|
||||
rej(err);
|
||||
}).then((resp: IResponse) => {
|
||||
if (resp.error === "0") {
|
||||
res(resp.data.vocab);
|
||||
} else {
|
||||
rej(resp);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -195,19 +208,21 @@ export default class Application extends React.Component<IProps> {
|
||||
username,
|
||||
password,
|
||||
}),
|
||||
}).then(data => data.json())
|
||||
.then((resp: IResponse) => {
|
||||
if (resp.error === "0") {
|
||||
// Successful login
|
||||
this.props.setUser(resp.data);
|
||||
setSessionToken(window, resp.data.sessionToken);
|
||||
this.props.setAuthenticated(true);
|
||||
}).then(data => data.json(), err => {
|
||||
// The fetch failed
|
||||
rej(err);
|
||||
}).then((resp: IResponse) => {
|
||||
if (resp.error === "0") {
|
||||
// Successful login
|
||||
this.props.setUser(resp.data);
|
||||
setSessionToken(window, resp.data.sessionToken);
|
||||
this.props.setAuthenticated(true);
|
||||
|
||||
res(resp.data);
|
||||
} else {
|
||||
rej(resp);
|
||||
}
|
||||
});
|
||||
res(resp.data);
|
||||
} else {
|
||||
rej(resp);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -241,7 +256,7 @@ export default class Application extends React.Component<IProps> {
|
||||
path="/dashboard"
|
||||
component={() => {
|
||||
return <Dashboard
|
||||
nextLevel={this.getNextLevel}
|
||||
getNextLevel={this.getNextLevel}
|
||||
getLastReview={this.getLastReview}
|
||||
getTopTen={this.getTopTenLearners} />
|
||||
}} />
|
||||
|
||||
@@ -7,15 +7,14 @@ import TableRow from "@material-ui/core/TableRow";
|
||||
import TableCell from "@material-ui/core/TableCell";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
|
||||
import { ILearner } from "../models/learner";
|
||||
import { TopTen } from "../models/learner";
|
||||
|
||||
interface IProps {
|
||||
topTen: ILearner[];
|
||||
topTen: TopTen[];
|
||||
}
|
||||
|
||||
export default class Scoreboard extends React.Component<IProps> {
|
||||
private unique = 0;
|
||||
private nr = 1;
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
@@ -28,11 +27,11 @@ export default class Scoreboard extends React.Component<IProps> {
|
||||
return "SCOREBOARD" + this.unique++;
|
||||
}
|
||||
|
||||
tableRow(learner: ILearner) {
|
||||
tableRow(learner: TopTen) {
|
||||
return <TableRow key={this.genId()}>
|
||||
<TableCell>
|
||||
<Typography variant="title" component="b">
|
||||
{this.nr++}
|
||||
{learner.nr}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
|
||||
Reference in New Issue
Block a user