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 LoginPage from "../pages/login";
|
||||||
import LevelListPage from "../pages/levelList";
|
import LevelListPage from "../pages/levelList";
|
||||||
import LevelPage from "../pages/level";
|
import LevelPage from "../pages/level";
|
||||||
|
import ReviewPage from "../pages/review";
|
||||||
|
|
||||||
import { ILevel } from "../models/level";
|
import { ILevel } from "../models/level";
|
||||||
import { IVocab } from "../models/vocab";
|
import { IVocab } from "../models/vocab";
|
||||||
@ -100,11 +101,12 @@ export default class Application extends React.Component<{}, IState> {
|
|||||||
// TODO: Actually implement this
|
// TODO: Actually implement this
|
||||||
// TODO: Don't fetch this when it was already fetched once.
|
// TODO: Don't fetch this when it was already fetched once.
|
||||||
return [{
|
return [{
|
||||||
latin: "Veni",
|
latin: "Vinum",
|
||||||
german: "<Wortbedeutung>",
|
german: "Wein",
|
||||||
|
hint: "Worte auf '-um' sind meistens NeutrUM"
|
||||||
id: 0
|
id: 0
|
||||||
}, {
|
}, {
|
||||||
latin: "Vidi",
|
latin: "Vinum (Genitiv)",
|
||||||
german: "<Wortbedeutung>",
|
german: "<Wortbedeutung>",
|
||||||
id: 1
|
id: 1
|
||||||
}, {
|
}, {
|
||||||
@ -113,6 +115,11 @@ export default class Application extends React.Component<{}, IState> {
|
|||||||
hint: "Wird \"Viki\" und nicht \"Vichi\" ausgesprochen",
|
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",
|
mnemonic: "Merk dir das Wort mit Caesars berühmten Worten: \"Veni Vidi Vici\"; Er kam, sah und siegte",
|
||||||
id: 2
|
id: 2
|
||||||
|
}, {
|
||||||
|
latin: "fuga",
|
||||||
|
german: "Flucht",
|
||||||
|
hint: "Worte auf \"-a\" sind FeminA",
|
||||||
|
id: 3
|
||||||
}] as IVocab[];
|
}] as IVocab[];
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -241,6 +248,15 @@ export default class Application extends React.Component<{}, IState> {
|
|||||||
return <Redirect to="/login" />;
|
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>
|
||||||
</div>
|
</div>
|
||||||
</BrowserRouter>;
|
</BrowserRouter>;
|
||||||
|
@ -1,3 +1,8 @@
|
|||||||
|
export enum ReviewMode {
|
||||||
|
GER_TO_LAT,
|
||||||
|
LAT_TO_GER,
|
||||||
|
}
|
||||||
|
|
||||||
export interface IVocab {
|
export interface IVocab {
|
||||||
german: string;
|
german: string;
|
||||||
latin: string;
|
latin: string;
|
||||||
|
@ -8,6 +8,8 @@ import Typography from "@material-ui/core/Typography";
|
|||||||
import Card from "@material-ui/core/Card";
|
import Card from "@material-ui/core/Card";
|
||||||
import CardContent from "@material-ui/core/CardContent";
|
import CardContent from "@material-ui/core/CardContent";
|
||||||
|
|
||||||
|
import { Redirect } from "react-router-dom";
|
||||||
|
|
||||||
import { IVocab } from "../models/vocab";
|
import { IVocab } from "../models/vocab";
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
@ -19,6 +21,7 @@ interface IProps {
|
|||||||
interface IState {
|
interface IState {
|
||||||
currentVocab: IVocab;
|
currentVocab: IVocab;
|
||||||
lookedAt: number[];
|
lookedAt: number[];
|
||||||
|
toReview: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class LevelPage extends React.Component<IProps, IState> {
|
export default class LevelPage extends React.Component<IProps, IState> {
|
||||||
@ -30,6 +33,7 @@ export default class LevelPage extends React.Component<IProps, IState> {
|
|||||||
this.state = {
|
this.state = {
|
||||||
currentVocab: this.props.levelVocab(this.props.id)[0],
|
currentVocab: this.props.levelVocab(this.props.id)[0],
|
||||||
lookedAt: [0],
|
lookedAt: [0],
|
||||||
|
toReview: false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -65,13 +69,20 @@ export default class LevelPage extends React.Component<IProps, IState> {
|
|||||||
<List>
|
<List>
|
||||||
{this.props.levelVocab(this.props.id).map(this.renderVocabListItem)}
|
{this.props.levelVocab(this.props.id).map(this.renderVocabListItem)}
|
||||||
{/* TODO*/}
|
{/* TODO*/}
|
||||||
<ListItem button onClick={() => alert("Übung")}>
|
<ListItem button onClick={() => this.setState({
|
||||||
|
toReview: true,
|
||||||
|
})}>
|
||||||
<ListItemText>
|
<ListItemText>
|
||||||
Zur Übung
|
Zur Übung
|
||||||
</ListItemText>
|
</ListItemText>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
</List>
|
</List>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
{
|
||||||
|
this.state.toReview ? (
|
||||||
|
<Redirect to={`/review/level/${this.props.id}`} />
|
||||||
|
) : undefined
|
||||||
|
}
|
||||||
<Grid item lg={7} xs={9}>
|
<Grid item lg={7} xs={9}>
|
||||||
<Grid container direction="column">
|
<Grid container direction="column">
|
||||||
<Grid item style={{ margin: 12 }}>
|
<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