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";
import { ReviewType } from "../models/review";

import { levW } from "../algorithms/levenshtein";
import { LEVENSHTEIN_MAX_DISTANCE } from "../config";

interface IProps {
    levelId?: number;
    vocabByLevel?: (level: number) => IVocab[];
    vocabByQueue?: () => IVocab[];

    reviewType: ReviewType;

    drawerButtonState: (state: boolean) => void;
}

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",
        };

        // Hide the drawer button
        this.props.drawerButtonState(false);

        // Get the correct vocabulary
        const { reviewType, vocabByLevel, levelId, vocabByQueue } = this.props;
        switch (reviewType) {
            case ReviewType.LEVEL:
                if (!vocabByLevel || !levelId) {
                    alert("[ReviewPage::constructor] vocabByLevel or levelId undefined");
                } else {
                    this.vocab = vocabByLevel(levelId);
                }

                break;
            case ReviewType.QUEUE:
                if (!vocabByQueue) {
                    alert("[ReviewPage::constructor] vocabByQueue undefined");
                } else {
                    this.vocab = vocabByQueue();
                }

                break;
        }
    }

    currentVocab = () => {
        return this.vocab[this.state.current];
    }

    checkInput = () => {
        const current = this.currentVocab();

        // Check if the given answer is somewhere in the german words
        const { input } = this.state;
        const german = current.german.map((str) => str.toLowerCase());
        const dists = german.map((ger) => levW(input.toLowerCase(), ger));
        const minDist = Math.min(...dists);

        // Check if the user's answer was correct
        if (minDist === 0) {
            // 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 if (minDist <= LEVENSHTEIN_MAX_DISTANCE) {
            // TODO: Show a hint
            console.log("Partially correct");
        } 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 style={{ width: "100%" }}>
                    <Card>
                        <CardContent>
                            <Grid container direction="column">
                                <Typography variant="display2">
                                    {this.currentVocab().latin.grundform}
                                </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>;
    }
};