feat: Show training wheels

frontend/src/pages/review.tsx

@@ -27,7 +27,10 @@ import {
 import { ReviewType, IReviewMetadata } from "../models/review";
 
 import { levW } from "../algorithms/levenshtein";
-import { LEVENSHTEIN_MAX_DISTANCE, MAX_ERROR_THRESHOLD } from "../config";
+import {
+    LEVENSHTEIN_MAX_DISTANCE, MAX_ERROR_THRESHOLD,
+    REVIEW_HELP_MOD
+} from "../config";
 
 import { Queue } from "../utils/queue";
 
@@ -49,6 +52,7 @@ interface IProps {
     popoverText: string;
     popoverColor: string;
     popoverTextColor: string;
+    showHelp: boolean;
 
     setReviewDialog: (state: boolean) => void;
     setSummary: (state: boolean) => void;
@@ -56,6 +60,7 @@ interface IProps {
     drawerButtonState: (state: boolean) => void;
     setReview: (curent: IReviewCard, meta: IReviewMetadata) => void;
     setLoading: (state: boolean) => void;
+    setShowHelp: (state: boolean) => void;
 }
 
 const ReviewPageWithRouter = withRouter(
@@ -132,6 +137,10 @@ const ReviewPageWithRouter = withRouter(
             this.props.history.push("/dashboard");
         }
 
+        closeHelp = () => {
+            this.props.setShowHelp(false);
+        }
+
         increaseMeta = (correct: number, wrong: number): IReviewMetadata => {
             const { metadata } = this.props;
 
@@ -239,6 +248,9 @@ const ReviewPageWithRouter = withRouter(
                     // NOTE: We don't need to force a re-render, as the state
                     //       will be updated since we need to show the popover.
                     vocabToReviewCard(vocab).forEach(this.reviewQueue.enqueue);
+                } else if (this.error_data[current.id] % REVIEW_HELP_MOD === 0) {
+                    // Help the user
+                    this.props.setShowHelp(true);
                 }
 
                 this.props.setReview(this.props.current, this.increaseMeta(0, 1));
@@ -246,6 +258,101 @@ const ReviewPageWithRouter = withRouter(
             }
         }
 
+        vocabSpecificInformation(vocab: IVocab) {
+            switch (vocab.type) {
+                case VocabType.NOMEN:
+                    const nData = vocab.latin as INomenData;
+                    return <div>
+                        <Typography variant="subheading" component="p">
+                            <b>Genitiv:</b> {nData.genitiv}
+                        </Typography>
+                        <Typography variant="subheading" component="p">
+                            <b>Genus:</b> {nData.genus}
+                        </Typography>
+                    </div>;
+                case VocabType.VERB:
+                    const vData = vocab.latin as IVerbData;
+                    return <div>
+                        <Typography variant="subheading" component="p">
+                            <b>1. Person Präsens:</b> {vData.praesens}
+                        </Typography>
+                        <Typography variant="subheading" component="p">
+                            <b>1. Person Perfekt:</b> {vData.perfekt}
+                        </Typography>
+                    </div>;
+                case VocabType.ADJEKTIV:
+                    const aData = vocab.latin as IAdjektivData;
+                    return <div>
+                        <Typography variant="subheading" component="p">
+                            <b>Endung feminin:</b> {aData.endung_f}
+                        </Typography>
+                        <Typography variant="subheading" component="p">
+                            <b>Endung neutrum:</b> {aData.endung_n}
+                        </Typography>
+                    </div>;
+                case VocabType.ADVERB:
+                    return <div />;
+            }
+        }
+
+        helpDialog = () => {
+            // Find the vocabulary
+            // TODO: if (!vocab)
+            const vocab = this.vocab.find(el => el.id === this.props.current.id) as IVocab;
+
+            // TODO: This should be shared with LevelPage
+            return <Dialog
+                open={this.props.showHelp}
+                onClose={this.closeHelp}>
+                <DialogTitle>Wiederholung von {vocab.latin.grundform}</DialogTitle>
+                <DialogContent>
+                    <Typography gutterBottom variant="headline" component="h3">
+                        {vocab.german.join(", ")}
+                    </Typography>
+                    {this.vocabSpecificInformation(vocab)}
+                    {
+                        vocab.hint ? (
+                            <div style={{
+                                border: "dashed",
+                                borderColor: "red",
+                                padding: 12,
+                            }}>
+                                <Typography variant="subheading" component="p">
+                                    <b>Tipp:</b>
+                                </Typography>
+                                <Typography variant="body2">
+                                    {vocab.hint}
+                                </Typography>
+                            </div>
+                        ) : undefined
+                    }
+                    {
+                        vocab.mnemonic ? (
+                            <div style={{
+                                border: "dashed",
+                                borderColor: "#f1c40f",
+                                marginTop: 12,
+                                padding: 12,
+                            }}>
+                                <Typography variant="subheading" component="p">
+                                    <b>Eselsbrücke:</b>
+                                </Typography>
+                                <Typography variant="body2">
+                                    {vocab.mnemonic}
+                                </Typography>
+                            </div>
+                        ) : undefined
+                    }
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        onClick={this.closeHelp}>
+                        Zurück zur Wiederholung
+                                    </Button>
+                </DialogActions>
+            </Dialog>;
+        }
+
         render() {
             if (this.props.loading) {
                 return <div>
@@ -368,6 +475,11 @@ const ReviewPageWithRouter = withRouter(
                         <CloseIcon />
                     </Button>
                 </Tooltip>
+                {
+                    this.props.showHelp ? (
+                        this.helpDialog()
+                    ) : undefined
+                }
                 <Dialog
                     open={this.props.dialogOpen}
                     onClose={this.closeDialog}>