This repository has been archived on 2022-03-12. You can view files and clone it, but cannot push or open issues or pull requests.
Lateinicus/frontend/src/pages/review.tsx

244 lines
9.9 KiB
TypeScript
Raw Normal View History

import * as React from "react";
import Card from "@material-ui/core/Card";
2018-09-12 17:23:00 +00:00
import CardContent from "@material-ui/core/CardContent";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
2018-09-12 17:23:00 +00:00
import Typography from "@material-ui/core/Typography";
import Popover from "@material-ui/core/Popover";
2018-09-16 15:16:24 +00:00
import LinearProgress from "@material-ui/core/LinearProgress";
import CircularProgress from "@material-ui/core/CircularProgress";
import Paper from "@material-ui/core/Paper";
2018-09-19 15:25:54 +00:00
import { withRouter } from "react-router-dom";
2018-09-12 17:23:00 +00:00
2018-09-15 14:51:21 +00:00
import { IVocab, IReviewCard, vocabToReviewCard, reviewQTypeToStr } from "../models/vocab";
import { ReviewType, IReviewMetadata } from "../models/review";
import { levW } from "../algorithms/levenshtein";
import { LEVENSHTEIN_MAX_DISTANCE } from "../config";
2018-09-15 14:51:21 +00:00
import { Queue } from "../utils/queue";
interface IProps {
levelId?: number;
vocabByLevel?: (level: number) => Promise<IVocab[]>;
vocabByQueue?: () => Promise<IVocab[]>;
reviewType: ReviewType;
2018-09-19 15:25:54 +00:00
history: any;
loading: boolean;
vocab: IVocab[];
2018-09-15 14:51:21 +00:00
current: IReviewCard;
2018-09-12 17:23:00 +00:00
popoverOpen: boolean;
popoverText: string;
popoverColor: string;
popoverTextColor: string;
setSummary: (state: boolean) => void;
setPopover: (state: boolean, text: string, color: string, textColor: string) => void;
drawerButtonState: (state: boolean) => void;
setLastReview: (meta: IReviewMetadata) => void;
setReview: (curent: IReviewCard, meta: IReviewMetadata) => void;
setLoading: (state: boolean) => void;
}
2018-09-19 15:25:54 +00:00
const ReviewPageWithRouter = withRouter(
class ReviewPage extends React.Component<IProps> {
private vocab: IVocab[] = [];
private reviewQueue: Queue<IReviewCard> = new Queue();
// Used for positioning the popover
private buttonRef: HTMLButtonElement;
private inputRef: HTMLInputElement;
private metadata: IReviewMetadata = { correct: 0, wrong: 0 };
constructor(props: any) {
super(props);
// Hide the drawer button
this.props.drawerButtonState(false);
const vocToQueue = () => {
this.vocab.forEach((vocab) => {
vocabToReviewCard(vocab).forEach(this.reviewQueue.enqueue);
});
this.props.setReview(this.reviewQueue.dequeue(), {
correct: 0,
wrong: 0,
});
this.props.setLoading(false);
};
// Get the correct vocabulary
const { reviewType, vocabByLevel, levelId, vocabByQueue } = this.props;
2018-09-19 16:00:38 +00:00
// Just to make TSC shut up
const noopPromise = () => {
return new Promise<IVocab[]>((res, rej) => {
rej([]);
});
};
const vocabByLevelW = vocabByLevel || noopPromise;
const vocabByQueueW = vocabByQueue || noopPromise;
const getVocab = {
[ReviewType.LEVEL]: () => vocabByLevelW(levelId),
[ReviewType.QUEUE]: () => vocabByQueueW(),
}[reviewType];
2018-09-19 16:06:59 +00:00
2018-09-19 16:00:38 +00:00
getVocab().then((res: IVocab[]) => {
this.vocab = res;
vocToQueue();
});
2018-09-19 15:25:54 +00:00
}
2018-09-12 17:23:00 +00:00
2018-09-19 15:25:54 +00:00
increaseMeta = (correct: number, wrong: number): IReviewMetadata => {
const { metadata } = this;
2018-09-19 15:25:54 +00:00
return {
wrong: metadata.wrong + wrong,
correct: metadata.correct + correct,
};
}
vocabFromId = (id: number): IVocab | {} => {
2018-09-19 15:25:54 +00:00
return this.vocab.find((el) => el.id === this.props.current.id);
}
2018-09-19 15:25:54 +00:00
checkInput = () => {
// Check if the given answer is somewhere in the german words
const input = this.inputRef.value || "";
// Map all possible answers to lowercase ( => ignore casing)
const answers = this.props.current.answers.map((el) => el.toLowerCase());
// Calculate the distances to all possible answers
const dists = answers.map((el) => levW(input.toLowerCase(), el));
// Find the lowest distance
const minDist = Math.min(...dists);
console.log("Review Queue size:", 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) {
// Go to the summary screen
this.props.setLastReview(this.metadata);
this.props.setLoading(true);
2018-09-19 15:25:54 +00:00
this.props.history.push("/review/summary");
} else {
2018-09-19 15:25:54 +00:00
// Increase the vocab
this.props.setReview(this.reviewQueue.dequeue(), this.increaseMeta(1, 0));
this.inputRef.value = "";
}
2018-09-19 15:25:54 +00:00
} else if (minDist <= LEVENSHTEIN_MAX_DISTANCE) {
this.props.setPopover(true, "Das war fast richtig", "yellow", "black");
2018-09-19 15:25:54 +00:00
} else {
// Find the IVocab item
const vocab = this.vocabFromId(this.props.current.id);
if (vocab) {
// Re-Add the vocabulary item to the review queue
// TODO: Only re-add when it when it's not re-queued
// vocabToReviewCard(vocab).forEach(this.reviewQueue.enqueue);
} else {
2018-09-19 15:25:54 +00:00
console.log("[ReviewPage::checkInput] Could not find IVocab item for wrong IReviewCard");
}
this.props.setPopover(true, "Das war nicht richtig", "red", "white");
2018-09-19 15:25:54 +00:00
}
2018-09-15 14:51:21 +00:00
2018-09-19 15:25:54 +00:00
// TODO(?): Show a snackbar for showing the updated score
}
2018-09-14 14:13:42 +00:00
2018-09-19 15:25:54 +00:00
render() {
if (this.props.loading) {
return <div>
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: '100vh' }}>
<Grid item xs={12}>
<Paper className="paper">
<Grid container direction="column" spacing={8}>
<CircularProgress />
</Grid>
</Paper>
</Grid>
</Grid>
2018-09-19 15:25:54 +00:00
</div>;
}
2018-09-19 15:25:54 +00:00
const { question, qtype } = this.props.current;
const questionTitle = `${question} (${reviewQTypeToStr(qtype)})`;
// TODO:
const progress = 50;
return <div>
2018-09-19 15:25:54 +00:00
<Grid container justify="center">
<Grid item style={{ width: "100%" }}>
<Card>
<CardContent>
<Grid container direction="column">
<Typography variant="display2">
{questionTitle}
</Typography>
<TextField
margin="normal"
fullWidth={true}
inputRef={node => this.inputRef = node}
onKeyPress={(ev) => {
// Allow checking of the answer by pressing Enter
if (ev.key === "Enter")
this.checkInput();
}} />
<LinearProgress
variant="determinate"
value={progress} />
<Popover
open={this.props.popoverOpen}
anchorOrigin={{
vertical: "center",
horizontal: "center"
}}
transformOrigin={{
vertical: "bottom",
horizontal: "center"
}}
anchorEl={this.buttonRef}
onClose={() => this.props.setPopover(false, "", "", "")}
2018-09-19 15:25:54 +00:00
PaperProps={{
style: {
backgroundColor: this.props.popoverColor,
padding: 10,
color: this.props.popoverTextColor,
2018-09-19 15:25:54 +00:00
}
}}>
<Typography
variant="button"
color="inherit">
{this.props.popoverText}
</Typography>
</Popover>
<Button
onClick={this.checkInput}
buttonRef={node => this.buttonRef = node}>
Prüfen
</Button>
</Grid>
</CardContent>
</Card>
</Grid>
</Grid>
</div>;
}
}
2018-09-19 15:25:54 +00:00
);
export default ReviewPageWithRouter;