91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
|
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>;
|
||
|
|
}
|
||
|
|
};
|