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/pages/review.tsx

155 lines
5.4 KiB
TypeScript
Raw Normal View History

import * as React from "react";
import Card from "@material-ui/core/Card";
2018-09-12 17:23:00 +00:00
import CardContent from "@material-ui/core/CardContent";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
2018-09-12 17:23:00 +00:00
import Typography from "@material-ui/core/Typography";
import Popover from "@material-ui/core/Popover";
import Paper from "@material-ui/core/Paper";
2018-09-12 17:23:00 +00:00
import { Redirect } from "react-router-dom";
import { IVocab, ReviewMode, VocabType } from "../models/vocab";
interface IProps {
levelId: number;
vocabByLevel: (level: number) => IVocab[];
}
interface IState {
input: string;
current: number;
2018-09-12 17:23:00 +00:00
toSummary: boolean;
popoverOpen: boolean;
popoverText: string;
popoverColor: string;
}
2018-09-12 17:23:00 +00:00
export default class ReviewPage extends React.Component<IProps, IState> {
private vocab: IVocab[] = [];
2018-09-12 17:23:00 +00:00
// Used for positioning the popover
private buttonRef: HTMLButtonElement;
constructor(props: any) {
super(props);
this.state = {
input: "",
current: 0,
2018-09-12 17:23:00 +00:00
toSummary: false,
popoverOpen: false,
popoverText: "",
popoverColor: "red",
};
const { vocabByLevel, levelId } = this.props;
this.vocab = vocabByLevel(levelId);
}
2018-09-12 17:23:00 +00:00
currentVocab = () => {
return this.vocab[this.state.current];
}
checkInput = () => {
const current = this.currentVocab();
// Check if the user's answer was correct
// TODO: Levensthein-Distance?
2018-09-12 17:23:00 +00:00
if (this.state.input.toLowerCase() === current.german.toLowerCase()) {
// TODO: Show it's correct
// Show the next vocab word
if (this.state.current + 1 >= this.vocab.length) {
2018-09-12 17:23:00 +00:00
// TODO: Set some data that the summary screen will show
this.setState({
toSummary: true,
});
} else {
// Increase the vocab
this.setState({
current: this.state.current + 1,
2018-09-12 17:23:00 +00:00
input: "",
});
}
} else {
2018-09-12 17:23:00 +00:00
this.setState({
popoverOpen: true,
popoverText: "Das war nicht richtig",
popoverColor: "red",
// TODO: Or maybe don't reset the text
input: "",
});
}
2018-09-12 17:23:00 +00:00
// TODO(?): Show a snackbar for showing the updated score
}
render() {
2018-09-12 17:23:00 +00:00
return <div>
{
this.state.toSummary ? (
<Redirect to="/review/summary" />
) : undefined
}
<Grid container justify="center">
<Grid item>
<Card>
2018-09-12 17:23:00 +00:00
<CardContent>
<Grid container direction="column">
<Typography variant="display2">
{this.currentVocab().latin}
</Typography>
<TextField
margin="normal"
fullWidth={true}
value={this.state.input}
onChange={(ev) => this.setState({
input: ev.target.value,
})}
onKeyPress={(ev) => {
// Allow checking of the answer by pressing Enter
if (ev.key === "Enter")
this.checkInput();
}} />
<Popover
open={this.state.popoverOpen}
anchorOrigin={{
vertical: "center",
horizontal: "left"
}}
transformOrigin={{
vertical: "bottom",
horizontal: "left"
}}
anchorEl={this.buttonRef}
onClose={() => this.setState({
popoverOpen: false,
})}
PaperProps={{
style: {
backgroundColor: this.state.popoverColor,
padding: 10,
color: "white"
}
}}>
<Typography variant="button" color="inherit">
{this.state.popoverText}
</Typography>
</Popover>
<Button onClick={this.checkInput} buttonRef={node => this.buttonRef = node}>
Prüfen
</Button>
2018-09-12 17:23:00 +00:00
</Grid>
</CardContent>
</Card>
</Grid>
</Grid>
</div>;
}
};