Fix animations on the level page

src/components/app.tsx

@@ -112,16 +112,15 @@ 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: "Vinum",
-            german: "Wein",
+            german: ["Wein"],
             hint: "Worte auf '-um' sind meistens NeutrUM"
             type: VocabType.NOMEN,
+            latin: {
+                grundform: "Vinum",
+                genitiv: "Vini",
+                genus: "Neutrum"
+            },
             id: 0
-        }, {
-            latin: "Vinum (Genitiv)",
-            german: "Vini",
-            type: VocabType.NOMEN,
-            id: 1
         }/* , {
           *    latin: "Vici",
           *    german: "<Wortbedeutung>",

src/models/vocab.ts

@@ -10,13 +10,34 @@ export enum VocabType {
     ADVERB
 }
 
+export interface INomenData {
+    grundform: string;
+    genitiv: string;
+    genus: string;
+}
+
+export interface IVerbData {
+    grundform: string;
+    // 1. Person
+    praesens: string;
+    perfekt: string;
+    // TODO: Was ist das PPP?
+}
+
+export interface IAdjektivData {
+    grundform: string;
+    nominativ_a: string;
+    nominativ_b: string;
+}
+
 export interface IVocab {
-    german: string;
-    latin: string;
+    // If a word has multiple meanings
+    german: string[];
     hint?: string;
     mnemonic?: string;
 
     type: VocabType;
+    latin: INomenData | IVerbData | IAdjektivData;
 
     // This number is lesson specific
     id: number;

src/pages/level.tsx

@@ -26,6 +26,9 @@ interface IState {
 
 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);
@@ -37,8 +40,14 @@ export default class LevelPage extends React.Component<IProps, IState> {
         };
     }
 
-    genUID = (): string => {
-        return "LEVELPAGE" + this.uid++;
+    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 => {
@@ -46,7 +55,7 @@ export default class LevelPage extends React.Component<IProps, IState> {
         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()} onClick={() => {
+        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({
@@ -55,14 +64,15 @@ export default class LevelPage extends React.Component<IProps, IState> {
             });
         }}>
             <ListItemText>
-                {`${vocab.latin} ${lookedAt ? "✔" : ""}`}
+                {`${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 (this.props.levelVocab().length === this.state.lookedAt.length) {
+        if (levelVocab(id).length === this.state.lookedAt.length) {
             this.setState({
                 toReview: true,
             });
@@ -76,7 +86,8 @@ export default class LevelPage extends React.Component<IProps, IState> {
             <Grid container direction="row">
                 <Grid item xs={3}>
                     <List>
-                        {this.props.levelVocab(this.props.id).map(this.renderVocabListItem)}
+                        {this.props.levelVocab(this.props.id)
+                            .map(this.renderVocabListItem)}
                         {/* TODO*/}
                         <ListItem button onClick={this.toReview}>
                             <ListItemText>
@@ -96,10 +107,10 @@ export default class LevelPage extends React.Component<IProps, IState> {
                             <Card>
                                 <CardContent>
                                     <Typography gutterBottom variant="headline" component="h2">
-                                        {currentVocab.latin}
+                                        {currentVocab.latin.grundform}
                                     </Typography>
                                     <Typography gutterBottom variant="headline" component="h3">
-                                        {currentVocab.german}
+                                        {currentVocab.german.join(", ")}
                                     </Typography>
                                     {
                                         currentVocab.hint ? (

src/pages/review.tsx

@@ -59,9 +59,13 @@ export default class ReviewPage extends React.Component<IProps, IState> {
     checkInput = () => {
         const current = this.currentVocab();
 
+        // Check if the given answer is somewhere in the german words
+        const german = this.currentVocab().german.map((str) => str.toLowerCase());
+        const found = german.find((el) => el === this.state.input.toLowerCase());
+
         // Check if the user's answer was correct
         // TODO: Levensthein-Distance?
-        if (this.state.input.toLowerCase() === current.german.toLowerCase()) {
+        if (found) {
             // TODO: Show it's correct
             // Show the next vocab word
             if (this.state.current + 1 >= this.vocab.length) {
@@ -102,7 +106,7 @@ export default class ReviewPage extends React.Component<IProps, IState> {
                         <CardContent>
                             <Grid container direction="column">
                                 <Typography variant="display2">
-                                    {this.currentVocab().latin}
+                                    {this.currentVocab().latin.grundform}
                                 </Typography>
                                 <TextField
                                     margin="normal"