Lateinicus/src/pages/review.tsx

import * as React from "react";

import Card from "@material-ui/core/Card";
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";
import Typography from "@material-ui/core/Typography";
import Popover from "@material-ui/core/Popover";
import Paper from "@material-ui/core/Paper";

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;

    toSummary: boolean;

    popoverOpen: boolean;
    popoverText: string;
    popoverColor: string;
}

export default class ReviewPage extends React.Component<IProps, IState> {
    private vocab: IVocab[] = [];
    // Used for positioning the popover
    private buttonRef: HTMLButtonElement;

    constructor(props: any) {
        super(props);

        this.state = {
            input: "",
            current: 0,

            toSummary: false,

            popoverOpen: false,
            popoverText: "",
            popoverColor: "red",
        };

        const { vocabByLevel, levelId } = this.props;
        this.vocab = vocabByLevel(levelId);
    }

    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.toLowerCase() === current.german.toLowerCase()) {
            // TODO: Show it's correct
            // Show the next vocab word
            if (this.state.current + 1 >= this.vocab.length) {
                // 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,
                    input: "",
                });
            }
        } else {
            this.setState({
                popoverOpen: true,
                popoverText: "Das war nicht richtig",
                popoverColor: "red",
                // TODO: Or maybe don't reset the text
                input: "",
            });
        }

        // TODO(?): Show a snackbar for showing the updated score
    }

    render() {
        return <div>
            {
                this.state.toSummary ? (
                    <Redirect to="/review/summary" />
                ) : undefined
            }
            <Grid container justify="center">
                <Grid item>
                    <Card>
                        <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>
                            </Grid>
                        </CardContent>
                    </Card>
                </Grid>
            </Grid>
        </div>;
    }
};