Fix animations on the level page

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"