diff --git a/src/components/SummaryTable.tsx b/src/components/SummaryTable.tsx index c31d3b0..ccf6f76 100644 --- a/src/components/SummaryTable.tsx +++ b/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 { render() { + const meta = this.props.reviewMeta(); + return @@ -24,15 +26,11 @@ export default class SummaryTable extends React.Component { Korrekt - {this.props.reviewMeta.correct} - - - Fast richtig - {this.props.reviewMeta.nearly} + {meta.correct} Falsch - {this.props.reviewMeta.wrong} + {meta.wrong}
; diff --git a/src/components/app.tsx b/src/components/app.tsx index 1e1fee8..4508e5d 100644 --- a/src/components/app.tsx +++ b/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 { - correct: 5, - nearly: 5, - wrong: 5, - }; + return this.state.lastReview; + } + + 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 }} /> { return ; + drawerButtonState={this.drawerButtonState} + setLastReview={this.setLastReview} />; } else { return ; } @@ -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 ; } @@ -407,7 +421,8 @@ export default class Application extends React.Component<{}, IState> { return ; + drawerButtonState={this.drawerButtonState} + setLastReview={this.setLastReview} />; }} /> ILevel; - lastReview: () => IReviewMetadata; + getLastReview: () => IReviewMetadata; getTopTen: () => ILearner[]; } @@ -59,7 +59,7 @@ export default class Dashboard extends React.Component { Letzte Wiederholung - + diff --git a/src/pages/review.tsx b/src/pages/review.tsx index 7c2ddcc..a1d8175 100644 --- a/src/pages/review.tsx +++ b/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 { private vocab: IVocab[] = []; - private reviewQueue: Queue = new Queue(); + private reviewQueue: Queue = undefined; // Used for positioning the popover private buttonRef: HTMLButtonElement; @@ -73,13 +77,20 @@ export default class ReviewPage extends React.Component { } // Turn the vocabulary into IReviewCards and queue them - this.vocab.forEach((vocab) => { - vocabToReviewCard(vocab).forEach(this.reviewQueue.enqueue); - }); + 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 { }; } + 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 { // 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 { popoverColor: "red", // TODO: Or maybe don't reset the text input: "", + metadata: this.increaseMeta(0, 1), }); }