feat: Simple implementation of the Review

src/components/app.tsx

@@ -24,6 +24,7 @@ import Dashboard from "../pages/dashboard";
 import LoginPage from "../pages/login";
 import LevelListPage from "../pages/levelList";
 import LevelPage from "../pages/level";
+import ReviewPage from "../pages/review";
 
 import { ILevel } from "../models/level";
 import { IVocab } from "../models/vocab";
@@ -100,11 +101,12 @@ export default class Application extends React.Component<{}, IState> {
         // TODO: Actually implement this
         // TODO: Don't fetch this when it was already fetched once.
         return [{
-            latin: "Veni",
+            latin: "Vinum",
-            german: "<Wortbedeutung>",
+            german: "Wein",
+            hint: "Worte auf '-um' sind meistens NeutrUM"
             id: 0
         }, {
-            latin: "Vidi",
+            latin: "Vinum (Genitiv)",
             german: "<Wortbedeutung>",
             id: 1
         }, {
@@ -113,6 +115,11 @@ export default class Application extends React.Component<{}, IState> {
             hint: "Wird \"Viki\" und nicht \"Vichi\" ausgesprochen",
             mnemonic: "Merk dir das Wort mit Caesars berühmten Worten: \"Veni Vidi Vici\"; Er kam, sah und siegte",
             id: 2
+        }, {
+            latin: "fuga",
+            german: "Flucht",
+            hint: "Worte auf \"-a\" sind FeminA",
+            id: 3
         }] as IVocab[];
     }
 
@@ -241,6 +248,15 @@ export default class Application extends React.Component<{}, IState> {
                                 return <Redirect to="/login" />;
                             }
                         }} />
+                    <Route
+                        path="/review/level/:id"
+                        component={({ match }) => {
+                            if (this.isAuthenticated()) {
+                                return <ReviewPage levelId={match.params.id} vocabByLevel={this.getLevelVocab} />;
+                            } else {
+                                return <Redirect to="/login" />;
+                            }
+                        }} />
                 </div>
             </div>
         </BrowserRouter>;

src/models/vocab.ts

@@ -1,3 +1,8 @@
+export enum ReviewMode {
+    GER_TO_LAT,
+    LAT_TO_GER,
+}
+
 export interface IVocab {
     german: string;
     latin: string;

src/pages/level.tsx

@@ -8,6 +8,8 @@ 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 {
@@ -19,6 +21,7 @@ interface IProps {
 interface IState {
     currentVocab: IVocab;
     lookedAt: number[];
+    toReview: boolean;
 };
 
 export default class LevelPage extends React.Component<IProps, IState> {
@@ -30,6 +33,7 @@ export default class LevelPage extends React.Component<IProps, IState> {
         this.state = {
             currentVocab: this.props.levelVocab(this.props.id)[0],
             lookedAt: [0],
+            toReview: false,
         };
     }
 
@@ -65,13 +69,20 @@ export default class LevelPage extends React.Component<IProps, IState> {
                     <List>
                         {this.props.levelVocab(this.props.id).map(this.renderVocabListItem)}
                         {/* TODO*/}
-                        <ListItem button onClick={() => alert("Übung")}>
+                        <ListItem button onClick={() => this.setState({
+                            toReview: true,
+                        })}>
                             <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 }}>

src/pages/review.tsx

@@ -0,0 +1,90 @@
+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>;
+    }
+};