feat: Simple implementation of the Review

This commit is contained in:
Alexander Polynomdivision 2018-09-12 15:15:55 +02:00
parent b4bc72640b
commit 2c9a2e88c7
4 changed files with 126 additions and 4 deletions

View File

@ -24,6 +24,7 @@ import Dashboard from "../pages/dashboard";
import LoginPage from "../pages/login";
import LevelListPage from "../pages/levelList";
import LevelPage from "../pages/level";
import ReviewPage from "../pages/review";
import { ILevel } from "../models/level";
import { IVocab } from "../models/vocab";
@ -100,11 +101,12 @@ export default class Application extends React.Component<{}, IState> {
// TODO: Actually implement this
// TODO: Don't fetch this when it was already fetched once.
return [{
latin: "Veni",
german: "<Wortbedeutung>",
latin: "Vinum",
german: "Wein",
hint: "Worte auf '-um' sind meistens NeutrUM"
id: 0
}, {
latin: "Vidi",
latin: "Vinum (Genitiv)",
german: "<Wortbedeutung>",
id: 1
}, {
@ -113,6 +115,11 @@ export default class Application extends React.Component<{}, IState> {
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
}, {
latin: "fuga",
german: "Flucht",
hint: "Worte auf \"-a\" sind FeminA",
id: 3
}] as IVocab[];
}
@ -241,6 +248,15 @@ export default class Application extends React.Component<{}, IState> {
return <Redirect to="/login" />;
}
}} />
<Route
path="/review/level/:id"
component={({ match }) => {
if (this.isAuthenticated()) {
return <ReviewPage levelId={match.params.id} vocabByLevel={this.getLevelVocab} />;
} else {
return <Redirect to="/login" />;
}
}} />
</div>
</div>
</BrowserRouter>;

View File

@ -1,3 +1,8 @@
export enum ReviewMode {
GER_TO_LAT,
LAT_TO_GER,
}
export interface IVocab {
german: string;
latin: string;

View File

@ -8,6 +8,8 @@ import Typography from "@material-ui/core/Typography";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import { Redirect } from "react-router-dom";
import { IVocab } from "../models/vocab";
interface IProps {
@ -19,6 +21,7 @@ interface IProps {
interface IState {
currentVocab: IVocab;
lookedAt: number[];
toReview: boolean;
};
export default class LevelPage extends React.Component<IProps, IState> {
@ -30,6 +33,7 @@ export default class LevelPage extends React.Component<IProps, IState> {
this.state = {
currentVocab: this.props.levelVocab(this.props.id)[0],
lookedAt: [0],
toReview: false,
};
}
@ -65,13 +69,20 @@ export default class LevelPage extends React.Component<IProps, IState> {
<List>
{this.props.levelVocab(this.props.id).map(this.renderVocabListItem)}
{/* TODO*/}
<ListItem button onClick={() => alert("Übung")}>
<ListItem button onClick={() => this.setState({
toReview: true,
})}>
<ListItemText>
Zur Übung
</ListItemText>
</ListItem>
</List>
</Grid>
{
this.state.toReview ? (
<Redirect to={`/review/level/${this.props.id}`} />
) : undefined
}
<Grid item lg={7} xs={9}>
<Grid container direction="column">
<Grid item style={{ margin: 12 }}>

90
src/pages/review.tsx Normal file
View File

@ -0,0 +1,90 @@
import * as React from "react";
import Card from "@material-ui/core/Card";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Button";
import { IVocab, ReviewMode } from "../models/vocab";
interface IProps {
levelId: number;
vocabByLevel: (level: number) => IVocab[];
}
interface IState {
input: string;
current: number;
}
export default class ReviewPage extends React.Component<IProps> {
private vocab: IVocab[] = [];
constructor(props: any) {
super(props);
this.state = {
input: "",
current: 0,
};
const { vocabByLevel, levelId } = this.props;
this.vocab = vocabByLevel(levelId);
this.currentVocab = this.currentVocab.bind(this);
}
currentVocab() {
return this.vocab[this.state.current];
}
checkInput = () => {
const current = this.currentVocab();
// Check if the user's answer was correct
// TODO: Levensthein-Distance?
if (this.state.input === current.german) {
// TODO: Show it's correct
console.log("Hell yeah");
// Show the next vocab word
if (this.state.current + 1 >= this.vocab.length) {
// TODO: Go to a summary screen
} else {
// Increase the vocab
this.setState({
current: this.state.current + 1,
});
}
} else {
// TODO: Show it's wrong
console.log("Hell no");
}
// TODO: Show a snackbar for showing the updated score
}
render() {
return <div style={{ margin: 12 }}>
<Grid container justify="center">
<Grid item>
<Card>
<Grid container direction="column">
<h1>
{this.vocab[this.state.current].latin}
</h1>
<TextField
value={this.state.input}
onChange={(ev) => this.setState({
input: ev.target.value,
})} />
<Button onClick={this.checkInput}>
Prüfen
</Button>
</Grid>
</Card>
</Grid>
</Grid>
</div>;
}
};