feat: Implement a review queue

src/models/vocab.ts

@@ -39,12 +39,12 @@ export interface IVocab {
     type: VocabType;
     latin: INomenData | IVerbData | IAdjektivData;
 
-    // This number is lesson specific
+    // This number is unique across all vocabulary items
     id: number;
 };
 
 // What kind of question should be answered
-export enum IReviewQType {
+export enum ReviewQType {
     GERMAN,
 
     NOMEN_GENITIV,
@@ -63,9 +63,36 @@ export interface IReviewCard {
     // If a question can have multiple answers
     answers: string[];
 
-    qtype: IReviewQType;
+    qtype: ReviewQType;
+
+    // Identical to its corresponding IVocab item
+    id: number;
 };
 
+export function reviewQTypeToStr(type: ReviewQType): string {
+    switch (type) {
+        case ReviewQType.GERMAN:
+            return "Übersetzung";
+        case ReviewQType.NOMEN_GENITIV:
+            return "Genitiv";
+        case ReviewQType.NOMEN_GENUS:
+            return "Genus";
+        case ReviewQType.ADJ_NOM_A:
+            // TODO
+            return "Nominativ A";
+        case ReviewQType.ADJ_NOM_B:
+            // TODO
+            return "Nominativ B";
+        case ReviewQType.VERB_PRAESENS:
+            return "1. Person Präsens";
+        case ReviewQType.VERB_PERFEKT:
+            return "1. Person Perfekt";
+        case ReviewQType.VERB_PPP:
+            // TODO
+            return "PPP";
+    }
+}
+
 // Turn a vocabulaty item into a series of questions about the item
 export function vocabToReviewCard(vocab: IVocab): IReviewCard[] {
     switch (vocab.type) {
@@ -75,24 +102,27 @@ export function vocabToReviewCard(vocab: IVocab): IReviewCard[] {
                 // Latin -> German
                 question: latin.grundform,
                 answers: vocab.german,
-                qtype: IReviewQType.GERMAN,
+                qtype: ReviewQType.GERMAN,
+                id: vocab.id,
             }, {
                 // Latin -> Genitiv
                 question: latin.grundform,
                 answers: [latin.genitiv],
-                qtype: IReviewQType.NOMEN_GENITIV,
+                qtype: ReviewQType.NOMEN_GENITIV,
+                id: vocab.id,
             }, {
                 // Latin -> Genus
                 question: latin.grundform,
                 answers: [latin.genus],
-                qtype: IReviewQType.NOMEN_GENUS,
+                qtype: ReviewQType.NOMEN_GENUS,
+                id: vocab.id,
             }];
         default:
             return [];
     }
 }
 
-export const typeToPoints = (VocabType type) => {
+export function typeToPoints(type: VocabType) {
     switch (type) {
         // Nomen: 2P + 1 (Wenn richtig)
         // 

src/pages/review.tsx

@@ -7,16 +7,17 @@ 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 { IVocab, IReviewCard, vocabToReviewCard, reviewQTypeToStr } from "../models/vocab";
 import { ReviewType } from "../models/review";
 
 import { levW } from "../algorithms/levenshtein";
 import { LEVENSHTEIN_MAX_DISTANCE } from "../config";
 
+import { Queue } from "../utils/queue";
+
 interface IProps {
     levelId?: number;
     vocabByLevel?: (level: number) => IVocab[];
@@ -29,7 +30,7 @@ interface IProps {
 
 interface IState {
     input: string;
-    current: number;
+    current: IReviewCard;
 
     toSummary: boolean;
 
@@ -40,23 +41,13 @@ interface IState {
 
 export default class ReviewPage extends React.Component<IProps, IState> {
     private vocab: IVocab[] = [];
+    private reviewQueue: Queue<IReviewCard> = new Queue();
     // 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);
 
@@ -80,26 +71,44 @@ export default class ReviewPage extends React.Component<IProps, IState> {
 
                 break;
         }
+
+        // Turn the vocabulary into IReviewCards and queue them
+        this.vocab.forEach((vocab) => {
+            vocabToReviewCard(vocab).forEach(this.reviewQueue.enqueue);
+        });
+
+        this.state = {
+            input: "",
+            current: this.reviewQueue.dequeue(),
+
+            toSummary: false,
+
+            popoverOpen: false,
+            popoverText: "",
+            popoverColor: "red",
+        };
     }
 
-    currentVocab = () => {
+    currentVocab = (id: number) => {
-        return this.vocab[this.state.current];
+        return this.vocab.find((el) => el.id === this.state.current.id);
     }
 
     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));
+        // Map all possible answers to lowercase ( => ignore casing)
+        const answers = this.state.current.answers.map((el) => el.toLowerCase());
+        // Calculate the distances to all possible answers
+        const dists = answers.map((el) => levW(input.toLowerCase(), el));
+        // Find the lowest distance
         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) {
+            if (this.reviewQueue.size() === 0) {
                 // TODO: Set some data that the summary screen will show
                 this.setState({
                     toSummary: true,
@@ -107,7 +116,7 @@ export default class ReviewPage extends React.Component<IProps, IState> {
             } else {
                 // Increase the vocab
                 this.setState({
-                    current: this.state.current + 1,
+                    current: this.reviewQueue.dequeue(),
                     input: "",
                 });
             }
@@ -128,6 +137,8 @@ export default class ReviewPage extends React.Component<IProps, IState> {
     }
 
     render() {
+        const { question, qtype } = this.state.current;
+        const questionTitle = `${question} (${reviewQTypeToStr(qtype)})`;
         return <div>
             {
                 this.state.toSummary ? (
@@ -140,7 +151,7 @@ export default class ReviewPage extends React.Component<IProps, IState> {
                         <CardContent>
                             <Grid container direction="column">
                                 <Typography variant="display2">
-                                    {this.currentVocab().latin.grundform}
+                                    {questionTitle}
                                 </Typography>
                                 <TextField
                                     margin="normal"
@@ -158,11 +169,11 @@ export default class ReviewPage extends React.Component<IProps, IState> {
                                     open={this.state.popoverOpen}
                                     anchorOrigin={{
                                         vertical: "center",
-                                        horizontal: "left"
+                                        horizontal: "center"
                                     }}
                                     transformOrigin={{
                                         vertical: "bottom",
-                                        horizontal: "left"
+                                        horizontal: "center"
                                     }}
                                     anchorEl={this.buttonRef}
                                     onClose={() => this.setState({
@@ -175,11 +186,15 @@ export default class ReviewPage extends React.Component<IProps, IState> {
                                             color: "white"
                                         }
                                     }}>
-                                    <Typography variant="button" color="inherit">
+                                    <Typography
+                                        variant="button"
+                                        color="inherit">
                                         {this.state.popoverText}
                                     </Typography>
                                 </Popover>
-                                <Button onClick={this.checkInput} buttonRef={node => this.buttonRef = node}>
+                                <Button
+                                    onClick={this.checkInput}
+                                    buttonRef={node => this.buttonRef = node}>
                                     Prüfen
                             </Button>
                             </Grid>