Lateinicus/src/pages/level.tsx

import * as React from "react";

import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Grid from "@material-ui/core/Grid";
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 {
    id: string;

    levelVocab: (id: string) => IVocab[];
};

interface IState {
    currentVocab: IVocab;
    lookedAt: number[];
    toReview: boolean;
};

export default class LevelPage extends React.Component<IProps, IState> {
    private uid = 0;
    // To prevent React from redrawing the vocabulary list and prematurely
    // cancelling the animation
    private uids: { [key: string]: string } = {};

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

        this.state = {
            currentVocab: this.props.levelVocab(this.props.id)[0],
            lookedAt: [0],
            toReview: false,
        };
    }

    genUID = (vocab: IVocab): string => {
        const { grundform } = vocab.latin;
        if (grundform in this.uids) {
            return this.uids[grundform];
        } else {
            this.uids[grundform] = "LEVELPAGE" + this.uid++;
            return this.uids[grundform];
        }
    }

    renderVocabListItem = (vocab: IVocab): any => {
        // Check if the vocab was already looked at
        const lookedAt = this.state.lookedAt.find((el) => el === vocab.id) || vocab.id === 0;

        // TODO: Actually update the "Vocab View" when clicking
        return <ListItem button key={this.genUID(vocab)} onClick={() => {
            // Prevent the user from using too much memory by always clicking on the elements
            // Show the clicked at vocab word
            this.setState({
                currentVocab: vocab,
                lookedAt: this.state.lookedAt.concat(vocab.id),
            });
        }}>
            <ListItemText>
                {`${vocab.latin.grundform} ${lookedAt ? "✔" : ""}`}
            </ListItemText>
        </ListItem>;
    }

    toReview = () => {
        const { levelVocab, id } = this.props;
        // Only go to the review if all vocabulary item have been looked at
        if (levelVocab(id).length === this.state.lookedAt.length) {
            this.setState({
                toReview: true,
            });
        }
    }

    render() {
        const { currentVocab } = this.state;

        return <div>
            <Grid container direction="row">
                <Grid item xs={3}>
                    <List>
                        {this.props.levelVocab(this.props.id)
                            .map(this.renderVocabListItem)}
                        {/* TODO*/}
                        <ListItem button onClick={this.toReview}>
                            <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 }}>
                            <Card>
                                <CardContent>
                                    <Typography gutterBottom variant="headline" component="h2">
                                        {currentVocab.latin.grundform}
                                    </Typography>
                                    <Typography gutterBottom variant="headline" component="h3">
                                        {currentVocab.german.join(", ")}
                                    </Typography>
                                    {
                                        currentVocab.hint ? (
                                            <div style={{
                                                border: "dashed",
                                                borderColor: "red",
                                                padding: 12,
                                            }}>
                                                <Typography variant="subheading" component="p">
                                                    <b>Tipp:</b>
                                                </Typography>
                                                <Typography variant="body2">
                                                    {currentVocab.hint}
                                                </Typography>
                                            </div>
                                        ) : undefined
                                    }
                                    {
                                        currentVocab.mnemonic ? (
                                            <div style={{
                                                border: "dashed",
                                                borderColor: "#f1c40f",
                                                marginTop: 12,
                                                padding: 12,
                                            }}>
                                                <Typography variant="subheading" component="p">
                                                    <b>Eselsbrücke:</b>
                                                </Typography>
                                                <Typography variant="body2">
                                                    {currentVocab.mnemonic}
                                                </Typography>
                                            </div>
                                        ) : undefined
                                    }
                                </CardContent>
                                {/*TODO: Maybe "next" and "prev" buttons?*/}
                            </Card>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </div>;
    }
};