feat: Hide the drawer button during levels and reviews
This commit is contained in:
parent
46c8ef9215
commit
7e9c1463f5
@ -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>
|
||||
|
@ -6,3 +6,8 @@ export interface IReviewMetadata {
|
||||
// Number of nearly correct answers
|
||||
nearly: number;
|
||||
};
|
||||
|
||||
export enum ReviewType {
|
||||
LEVEL,
|
||||
QUEUE
|
||||
};
|
||||
|
@ -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],
|
||||
|
@ -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,8 +57,29 @@ export default class ReviewPage extends React.Component<IProps, IState> {
|
||||
popoverColor: "red",
|
||||
};
|
||||
|
||||
const { vocabByLevel, levelId } = this.props;
|
||||
this.vocab = vocabByLevel(levelId);
|
||||
// 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 = () => {
|
||||
@ -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">
|
||||
|
Reference in New Issue
Block a user