PapaTutuWawa/Lateinicus
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Hide the drawer button during levels and reviews

Browse Source
This commit is contained in:
Alexander Polynomdivision 2018-09-15 14:26:22 +02:00
parent 46c8ef9215
commit 7e9c1463f5
4 changed files with 104 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/app.tsx
View File

@ -33,12 +33,13 @@ import SummaryPage from "../pages/summary";
import { ILevel } from "../models/level";
import { ILearner } from "../models/learner";
import { IVocab, VocabType } from "../models/vocab";
import { IReviewMetadata } from "../models/review";
import { IReviewMetadata, ReviewType } from "../models/review";
interface IState {
loggedIn: boolean;
drawerOpen: boolean;
showDrawerButton: boolean;
}
// TODO: Replace the sessionStorage with localStorage?
@ -55,6 +56,7 @@ export default class Application extends React.Component<{}, IState> {
this.state = {
loggedIn,
drawerOpen: false,
showDrawerButton: true,
};
this.login = this.login.bind(this);
@ -90,6 +92,36 @@ export default class Application extends React.Component<{}, IState> {
};
}
getReviewQueue = (): IVocab[] => {
console.log("STUB: Application::getReviewQueue");
// TODO: Implement
return [{
german: ["Wein"],
hint: "Worte auf '-um' sind meistens NeutrUM",
type: VocabType.NOMEN,
latin: {
grundform: "Vinum",
genitiv: "Vini",
genus: "Neutrum"
},
id: 0
}/* , {
* latin: "Vici",
* german: "<Wortbedeutung>",
* 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",
* type: VocabType.NOMEN,
* id: 2
}, {
* latin: "fuga",
* german: "Flucht",
* hint: "Worte auf \"-a\" sind FeminA",
* type: VocabType.NOMEN,
* id: 3
} */] as IVocab[];
}
getLearners(): ILearner[] {
console.log("STUB: Application::getLearners");
@ -140,7 +172,7 @@ export default class Application extends React.Component<{}, IState> {
};
}
getLevelVocab(id: string): IVocab[] {
getLevelVocab(id: number): IVocab[] {
console.log("STUB: Application::getLevelVocab");
// TODO: Actually implement this
@ -195,6 +227,16 @@ export default class Application extends React.Component<{}, IState> {
});
}
drawerButtonState = (show: boolean) => {
// This is required as we would otherwise try to continously update
// the state, resulting in an infinte loop
if (show !== this.state.showDrawerButton) {
this.setState({
showDrawerButton: show,
});
}
}
render() {
return <BrowserRouter
basename="/app/">
@ -202,7 +244,7 @@ export default class Application extends React.Component<{}, IState> {
<AppBar position="static">
<Toolbar>
{
this.isAuthenticated() ? (
(this.isAuthenticated() && this.state.showDrawerButton) ? (
<IconButton
color="inherit"
onClick={() => this.setState({ drawerOpen: true })}>
@ -322,13 +364,17 @@ export default class Application extends React.Component<{}, IState> {
<AuthRoute
isAuth={this.isAuthenticated}
path="/levelList"
component={() => <LevelListPage levels={this.getLevels()} />} />
component={() => <LevelListPage
levels={this.getLevels()} />} />
{/*We cannot use AuthRoute here, because match is undefined otherwise*/}
<Route
path="/level/:id"
component={({ match }) => {
if (this.isAuthenticated()) {
return <LevelPage id={match.params.id} levelVocab={this.getLevelVocab} />;
return <LevelPage
id={match.params.id}
levelVocab={this.getLevelVocab}
drawerButtonState={this.drawerButtonState} />;
} else {
return <Redirect to="/login" />;
}
@ -337,7 +383,11 @@ export default class Application extends React.Component<{}, IState> {
path="/review/level/:id"
component={({ match }) => {
if (this.isAuthenticated()) {
return <ReviewPage levelId={match.params.id} vocabByLevel={this.getLevelVocab} />;
return <ReviewPage
reviewType={ReviewType.LEVEL}
levelId={match.params.id}
vocabByLevel={this.getLevelVocab}
drawerButtonState={this.drawerButtonState} />;
} else {
return <Redirect to="/login" />;
}
@ -346,13 +396,17 @@ export default class Application extends React.Component<{}, IState> {
isAuth={this.isAuthenticated}
path="/review/queue"
component={() => {
return <h1>Get beaned!!</h1>;
return <ReviewPage
reviewType={ReviewType.QUEUE}
vocabByQueue={this.getReviewQueue}
drawerButtonState={this.drawerButtonState} />;
}} />
<AuthRoute
isAuth={this.isAuthenticated}
path="/review/summary"
component={() => {
return <SummaryPage reviewMeta={this.getLastReview} />
return <SummaryPage
reviewMeta={this.getLastReview} />
}} />
</div>
</div>

5
src/models/review.ts
View File

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

5
src/pages/level.tsx
View File

@ -16,6 +16,8 @@ interface IProps {
id: string;
levelVocab: (id: string) => IVocab[];
drawerButtonState: (state: boolean) => void;
};
interface IState {
@ -33,6 +35,9 @@ export default class LevelPage extends React.Component<IProps, IState> {
constructor(props: any) {
super(props);
// Hide the drawer
this.props.drawerButtonState(false);
this.state = {
currentVocab: this.props.levelVocab(this.props.id)[0],
lookedAt: [0],

35
src/pages/review.tsx
View File

@ -12,13 +12,19 @@ import Paper from "@material-ui/core/Paper";
import { Redirect } from "react-router-dom";
import { IVocab, ReviewMode, VocabType } from "../models/vocab";
import { ReviewType } from "../models/review";
import { levW } from "../algorithms/levenshtein";
import { LEVENSHTEIN_MAX_DISTANCE } from "../config";
interface IProps {
levelId: number;
vocabByLevel: (level: number) => IVocab[];
levelId?: number;
vocabByLevel?: (level: number) => IVocab[];
vocabByQueue?: () => IVocab[];
reviewType: ReviewType;
drawerButtonState: (state: boolean) => void;
}
interface IState {
@ -51,10 +57,31 @@ export default class ReviewPage extends React.Component<IProps, IState> {
popoverColor: "red",
};
const { vocabByLevel, levelId } = this.props;
// Hide the drawer button
this.props.drawerButtonState(false);
// Get the correct vocabulary
const { reviewType, vocabByLevel, levelId, vocabByQueue } = this.props;
switch (reviewType) {
case ReviewType.LEVEL:
if (!vocabByLevel || !levelId) {
alert("[ReviewPage::constructor] vocabByLevel or levelId undefined");
} else {
this.vocab = vocabByLevel(levelId);
}
break;
case ReviewType.QUEUE:
if (!vocabByQueue) {
alert("[ReviewPage::constructor] vocabByQueue undefined");
} else {
this.vocab = vocabByQueue();
}
break;
}
}
currentVocab = () => {
return this.vocab[this.state.current];
}
@ -108,7 +135,7 @@ export default class ReviewPage extends React.Component<IProps, IState> {
) : undefined
}
<Grid container justify="center">
<Grid item>
<Grid item style={{ width: "100%" }}>
<Card>
<CardContent>
<Grid container direction="column">