feat: Simple implementation of the Review
This commit is contained in:
parent
b4bc72640b
commit
2c9a2e88c7
@ -24,6 +24,7 @@ import Dashboard from "../pages/dashboard";
|
||||
import LoginPage from "../pages/login";
|
||||
import LevelListPage from "../pages/levelList";
|
||||
import LevelPage from "../pages/level";
|
||||
import ReviewPage from "../pages/review";
|
||||
|
||||
import { ILevel } from "../models/level";
|
||||
import { IVocab } from "../models/vocab";
|
||||
@ -100,11 +101,12 @@ 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: "Veni",
|
||||
german: "<Wortbedeutung>",
|
||||
latin: "Vinum",
|
||||
german: "Wein",
|
||||
hint: "Worte auf '-um' sind meistens NeutrUM"
|
||||
id: 0
|
||||
}, {
|
||||
latin: "Vidi",
|
||||
latin: "Vinum (Genitiv)",
|
||||
german: "<Wortbedeutung>",
|
||||
id: 1
|
||||
}, {
|
||||
@ -113,6 +115,11 @@ export default class Application extends React.Component<{}, IState> {
|
||||
hint: "Wird \"Viki\" und nicht \"Vichi\" ausgesprochen",
|
||||
mnemonic: "Merk dir das Wort mit Caesars berühmten Worten: \"Veni Vidi Vici\"; Er kam, sah und siegte",
|
||||
id: 2
|
||||
}, {
|
||||
latin: "fuga",
|
||||
german: "Flucht",
|
||||
hint: "Worte auf \"-a\" sind FeminA",
|
||||
id: 3
|
||||
}] as IVocab[];
|
||||
}
|
||||
|
||||
@ -241,6 +248,15 @@ export default class Application extends React.Component<{}, IState> {
|
||||
return <Redirect to="/login" />;
|
||||
}
|
||||
}} />
|
||||
<Route
|
||||
path="/review/level/:id"
|
||||
component={({ match }) => {
|
||||
if (this.isAuthenticated()) {
|
||||
return <ReviewPage levelId={match.params.id} vocabByLevel={this.getLevelVocab} />;
|
||||
} else {
|
||||
return <Redirect to="/login" />;
|
||||
}
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
</BrowserRouter>;
|
||||
|
@ -1,3 +1,8 @@
|
||||
export enum ReviewMode {
|
||||
GER_TO_LAT,
|
||||
LAT_TO_GER,
|
||||
}
|
||||
|
||||
export interface IVocab {
|
||||
german: string;
|
||||
latin: string;
|
||||
|
@ -8,6 +8,8 @@ import Typography from "@material-ui/core/Typography";
|
||||
import Card from "@material-ui/core/Card";
|
||||
import CardContent from "@material-ui/core/CardContent";
|
||||
|
||||
import { Redirect } from "react-router-dom";
|
||||
|
||||
import { IVocab } from "../models/vocab";
|
||||
|
||||
interface IProps {
|
||||
@ -19,6 +21,7 @@ interface IProps {
|
||||
interface IState {
|
||||
currentVocab: IVocab;
|
||||
lookedAt: number[];
|
||||
toReview: boolean;
|
||||
};
|
||||
|
||||
export default class LevelPage extends React.Component<IProps, IState> {
|
||||
@ -30,6 +33,7 @@ export default class LevelPage extends React.Component<IProps, IState> {
|
||||
this.state = {
|
||||
currentVocab: this.props.levelVocab(this.props.id)[0],
|
||||
lookedAt: [0],
|
||||
toReview: false,
|
||||
};
|
||||
}
|
||||
|
||||
@ -65,13 +69,20 @@ export default class LevelPage extends React.Component<IProps, IState> {
|
||||
<List>
|
||||
{this.props.levelVocab(this.props.id).map(this.renderVocabListItem)}
|
||||
{/* TODO*/}
|
||||
<ListItem button onClick={() => alert("Übung")}>
|
||||
<ListItem button onClick={() => this.setState({
|
||||
toReview: true,
|
||||
})}>
|
||||
<ListItemText>
|
||||
Zur Übung
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Grid>
|
||||
{
|
||||
this.state.toReview ? (
|
||||
<Redirect to={`/review/level/${this.props.id}`} />
|
||||
) : undefined
|
||||
}
|
||||
<Grid item lg={7} xs={9}>
|
||||
<Grid container direction="column">
|
||||
<Grid item style={{ margin: 12 }}>
|
||||
|
90
src/pages/review.tsx
Normal file
90
src/pages/review.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import * as React from "react";
|
||||
|
||||
import Card from "@material-ui/core/Card";
|
||||
import TextField from "@material-ui/core/TextField";
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Button from "@material-ui/core/Button";
|
||||
import Typography from "@material-ui/core/Button";
|
||||
|
||||
import { IVocab, ReviewMode } from "../models/vocab";
|
||||
|
||||
interface IProps {
|
||||
levelId: number;
|
||||
vocabByLevel: (level: number) => IVocab[];
|
||||
}
|
||||
|
||||
interface IState {
|
||||
input: string;
|
||||
current: number;
|
||||
}
|
||||
|
||||
export default class ReviewPage extends React.Component<IProps> {
|
||||
private vocab: IVocab[] = [];
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
input: "",
|
||||
current: 0,
|
||||
};
|
||||
|
||||
const { vocabByLevel, levelId } = this.props;
|
||||
this.vocab = vocabByLevel(levelId);
|
||||
|
||||
this.currentVocab = this.currentVocab.bind(this);
|
||||
}
|
||||
|
||||
currentVocab() {
|
||||
return this.vocab[this.state.current];
|
||||
}
|
||||
|
||||
checkInput = () => {
|
||||
const current = this.currentVocab();
|
||||
|
||||
// Check if the user's answer was correct
|
||||
// TODO: Levensthein-Distance?
|
||||
if (this.state.input === current.german) {
|
||||
// TODO: Show it's correct
|
||||
console.log("Hell yeah");
|
||||
|
||||
// Show the next vocab word
|
||||
if (this.state.current + 1 >= this.vocab.length) {
|
||||
// TODO: Go to a summary screen
|
||||
} else {
|
||||
// Increase the vocab
|
||||
this.setState({
|
||||
current: this.state.current + 1,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// TODO: Show it's wrong
|
||||
console.log("Hell no");
|
||||
}
|
||||
|
||||
// TODO: Show a snackbar for showing the updated score
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div style={{ margin: 12 }}>
|
||||
<Grid container justify="center">
|
||||
<Grid item>
|
||||
<Card>
|
||||
<Grid container direction="column">
|
||||
<h1>
|
||||
{this.vocab[this.state.current].latin}
|
||||
</h1>
|
||||
<TextField
|
||||
value={this.state.input}
|
||||
onChange={(ev) => this.setState({
|
||||
input: ev.target.value,
|
||||
})} />
|
||||
<Button onClick={this.checkInput}>
|
||||
Prüfen
|
||||
</Button>
|
||||
</Grid>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>;
|
||||
}
|
||||
};
|
Reference in New Issue
Block a user