feat: Implement setting the last review

src/components/SummaryTable.tsx

@@ -9,11 +9,13 @@ import TableCell from "@material-ui/core/TableCell";
 import { IReviewMetadata } from "../models/review";
 
 interface IProps {
-    reviewMeta: IReviewMetadata;
+    reviewMeta: () => IReviewMetadata;
 }
 
 export default class SummaryTable extends React.Component<IProps> {
     render() {
+        const meta = this.props.reviewMeta();
+
         return <Table>
             <TableHead>
                 <TableRow>
@@ -24,15 +26,11 @@ export default class SummaryTable extends React.Component<IProps> {
             <TableBody>
                 <TableRow>
                     <TableCell>Korrekt</TableCell>
-                    <TableCell numeric>{this.props.reviewMeta.correct}</TableCell>
+                    <TableCell numeric>{meta.correct}</TableCell>
-                </TableRow>
-                <TableRow>
-                    <TableCell>Fast richtig</TableCell>
-                    <TableCell numeric>{this.props.reviewMeta.nearly}</TableCell>
                 </TableRow>
                 <TableRow>
                     <TableCell>Falsch</TableCell>
-                    <TableCell numeric>{this.props.reviewMeta.wrong}</TableCell>
+                    <TableCell numeric>{meta.wrong}</TableCell>
                 </TableRow>
             </TableBody>
         </Table>;

src/components/app.tsx

@@ -39,6 +39,8 @@ import { IReviewMetadata, ReviewType } from "../models/review";
 interface IState {
     loggedIn: boolean;
 
+    lastReview: IReviewMetadata;
+
     drawerOpen: boolean;
     showDrawerButton: boolean;
 }
@@ -54,8 +56,15 @@ export default class Application extends React.Component<{}, IState> {
         // TODO
         const loggedIn = authKey !== null;
 
+        // TODO: Fetch the last review
         this.state = {
             loggedIn,
+
+            lastReview: {
+                correct: 0,
+                wrong: 0,
+            },
+
             drawerOpen: false,
             showDrawerButton: true,
         };
@@ -82,15 +91,18 @@ export default class Application extends React.Component<{}, IState> {
         return levels;
     }
 
-    getLastReview(): IReviewMetadata {
+    getLastReview = (): IReviewMetadata => {
         console.log("STUB: Application::getLastReview");
 
         // TODO: Actually fetch this
-        return {
+        return this.state.lastReview;
-            correct: 5,
+    }
-            nearly: 5,
+
-            wrong: 5,
+    setLastReview = (meta: IReviewMetadata) => {
-        };
+        // TODO: Send this to the server
+        this.setState({
+            lastReview: meta,
+        });
     }
 
     getReviewQueue = (): IVocab[] => {
@@ -360,7 +372,7 @@ export default class Application extends React.Component<{}, IState> {
                         component={() => {
                             return <Dashboard
                                 nextLevel={this.getNextLevel}
-                                lastReview={this.getLastReview}
+                                getLastReview={this.getLastReview}
                                 getTopTen={this.getTopTenLearners} />
                         }} />
                     <AuthRoute
@@ -382,7 +394,8 @@ export default class Application extends React.Component<{}, IState> {
                                 return <LevelPage
                                     id={match.params.id}
                                     levelVocab={this.getLevelVocab}
-                                    drawerButtonState={this.drawerButtonState} />;
+                                    drawerButtonState={this.drawerButtonState}
+                                    setLastReview={this.setLastReview} />;
                             } else {
                                 return <Redirect to="/login" />;
                             }
@@ -395,7 +408,8 @@ export default class Application extends React.Component<{}, IState> {
                                     reviewType={ReviewType.LEVEL}
                                     levelId={match.params.id}
                                     vocabByLevel={this.getLevelVocab}
-                                    drawerButtonState={this.drawerButtonState} />;
+                                    drawerButtonState={this.drawerButtonState}
+                                    setLastReview={this.setLastReview} />;
                             } else {
                                 return <Redirect to="/login" />;
                             }
@@ -407,7 +421,8 @@ export default class Application extends React.Component<{}, IState> {
                             return <ReviewPage
                                 reviewType={ReviewType.QUEUE}
                                 vocabByQueue={this.getReviewQueue}
-                                drawerButtonState={this.drawerButtonState} />;
+                                drawerButtonState={this.drawerButtonState}
+                                setLastReview={this.setLastReview} />;
                         }} />
                     <AuthRoute
                         isAuth={this.isAuthenticated}

src/models/review.ts

@@ -3,8 +3,6 @@ export interface IReviewMetadata {
     correct: number;
     // Number of wrong answers
     wrong: number;
-    // Number of nearly correct answers
-    nearly: number;
 };
 
 export enum ReviewType {

src/pages/dashboard.tsx

@@ -16,7 +16,7 @@ import { IReviewMetadata } from "../models/review";
 
 interface IProps {
     nextLevel: () => ILevel;
-    lastReview: () => IReviewMetadata;
+    getLastReview: () => IReviewMetadata;
     getTopTen: () => ILearner[];
 }
 
@@ -59,7 +59,7 @@ export default class Dashboard extends React.Component<IProps> {
                         <Typography variant="title">
                             Letzte Wiederholung
                         </Typography>
-                        <SummaryTable reviewMeta={this.props.lastReview()} />
+                        <SummaryTable reviewMeta={this.props.getLastReview} />
                     </Paper>
                 </Grid>
             </Grid>

src/pages/review.tsx

@@ -11,7 +11,7 @@ import Popover from "@material-ui/core/Popover";
 import { Redirect } from "react-router-dom";
 
 import { IVocab, IReviewCard, vocabToReviewCard, reviewQTypeToStr } from "../models/vocab";
-import { ReviewType } from "../models/review";
+import { ReviewType, IReviewMetadata } from "../models/review";
 
 import { levW } from "../algorithms/levenshtein";
 import { LEVENSHTEIN_MAX_DISTANCE } from "../config";
@@ -23,6 +23,8 @@ interface IProps {
     vocabByLevel?: (level: number) => IVocab[];
     vocabByQueue?: () => IVocab[];
 
+    setLastReview: (meta: IReviewMetadata) => void;
+
     reviewType: ReviewType;
 
     drawerButtonState: (state: boolean) => void;
@@ -32,6 +34,8 @@ interface IState {
     input: string;
     current: IReviewCard;
 
+    metadata: IReviewMetadata;
+
     toSummary: boolean;
 
     popoverOpen: boolean;
@@ -41,7 +45,7 @@ interface IState {
 
 export default class ReviewPage extends React.Component<IProps, IState> {
     private vocab: IVocab[] = [];
-    private reviewQueue: Queue<IReviewCard> = new Queue();
+    private reviewQueue: Queue<IReviewCard> = undefined;
     // Used for positioning the popover
     private buttonRef: HTMLButtonElement;
 
@@ -73,13 +77,20 @@ export default class ReviewPage extends React.Component<IProps, IState> {
         }
 
         // Turn the vocabulary into IReviewCards and queue them
+        if (!this.reviewQueue) {
+            this.reviewQueue = new Queue();
             this.vocab.forEach((vocab) => {
                 vocabToReviewCard(vocab).forEach(this.reviewQueue.enqueue);
             });
+        }
 
         this.state = {
             input: "",
             current: this.reviewQueue.dequeue(),
+            metadata: {
+                correct: 0,
+                wrong: 0,
+            },
 
             toSummary: false,
 
@@ -89,6 +100,15 @@ export default class ReviewPage extends React.Component<IProps, IState> {
         };
     }
 
+    increaseMeta = (correct: number, wrong: number): IReviewMetadata => {
+        const { metadata } = this.state;
+
+        return {
+            wrong: metadata.wrong + wrong,
+            correct: metadata.correct + correct,
+        };
+    }
+
     vocabFromId = (id: number) => {
         return this.vocab.find((el) => el.id === this.state.current.id);
     }
@@ -104,20 +124,27 @@ export default class ReviewPage extends React.Component<IProps, IState> {
         // Find the lowest distance
         const minDist = Math.min(...dists);
 
+        console.log(this.reviewQueue.size());
+
         // Check if the user's answer was correct
         if (minDist === 0) {
             // TODO: Show it's correct?
             // Show the next vocab word
             if (this.reviewQueue.size() === 0) {
-                // TODO: Set some data that the summary screen will show
+                // Go to the summary screen
                 this.setState({
                     toSummary: true,
+                }, () => {
+                    // Update the "Last Review" data
+                    this.props.setLastReview(this.state.metadata);
                 });
             } else {
                 // Increase the vocab
                 this.setState({
                     current: this.reviewQueue.dequeue(),
                     input: "",
+                    // Add one correct answer
+                    metadata: this.increaseMeta(1, 0),
                 });
             }
         } else if (minDist <= LEVENSHTEIN_MAX_DISTANCE) {
@@ -140,6 +167,7 @@ export default class ReviewPage extends React.Component<IProps, IState> {
                 popoverColor: "red",
                 // TODO: Or maybe don't reset the text
                 input: "",
+                metadata: this.increaseMeta(0, 1),
             });
         }