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 { ILevel } from "../models/level";
|
||||||
import { ILearner } from "../models/learner";
|
import { ILearner } from "../models/learner";
|
||||||
import { IVocab, VocabType } from "../models/vocab";
|
import { IVocab, VocabType } from "../models/vocab";
|
||||||
import { IReviewMetadata } from "../models/review";
|
import { IReviewMetadata, ReviewType } from "../models/review";
|
||||||
|
|
||||||
interface IState {
|
interface IState {
|
||||||
loggedIn: boolean;
|
loggedIn: boolean;
|
||||||
|
|
||||||
drawerOpen: boolean;
|
drawerOpen: boolean;
|
||||||
|
showDrawerButton: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: Replace the sessionStorage with localStorage?
|
// TODO: Replace the sessionStorage with localStorage?
|
||||||
@ -55,6 +56,7 @@ export default class Application extends React.Component<{}, IState> {
|
|||||||
this.state = {
|
this.state = {
|
||||||
loggedIn,
|
loggedIn,
|
||||||
drawerOpen: false,
|
drawerOpen: false,
|
||||||
|
showDrawerButton: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
this.login = this.login.bind(this);
|
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[] {
|
getLearners(): ILearner[] {
|
||||||
console.log("STUB: Application::getLearners");
|
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");
|
console.log("STUB: Application::getLevelVocab");
|
||||||
|
|
||||||
// TODO: Actually implement this
|
// 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() {
|
render() {
|
||||||
return <BrowserRouter
|
return <BrowserRouter
|
||||||
basename="/app/">
|
basename="/app/">
|
||||||
@ -202,7 +244,7 @@ export default class Application extends React.Component<{}, IState> {
|
|||||||
<AppBar position="static">
|
<AppBar position="static">
|
||||||
<Toolbar>
|
<Toolbar>
|
||||||
{
|
{
|
||||||
this.isAuthenticated() ? (
|
(this.isAuthenticated() && this.state.showDrawerButton) ? (
|
||||||
<IconButton
|
<IconButton
|
||||||
color="inherit"
|
color="inherit"
|
||||||
onClick={() => this.setState({ drawerOpen: true })}>
|
onClick={() => this.setState({ drawerOpen: true })}>
|
||||||
@ -322,13 +364,17 @@ export default class Application extends React.Component<{}, IState> {
|
|||||||
<AuthRoute
|
<AuthRoute
|
||||||
isAuth={this.isAuthenticated}
|
isAuth={this.isAuthenticated}
|
||||||
path="/levelList"
|
path="/levelList"
|
||||||
component={() => <LevelListPage levels={this.getLevels()} />} />
|
component={() => <LevelListPage
|
||||||
|
levels={this.getLevels()} />} />
|
||||||
{/*We cannot use AuthRoute here, because match is undefined otherwise*/}
|
{/*We cannot use AuthRoute here, because match is undefined otherwise*/}
|
||||||
<Route
|
<Route
|
||||||
path="/level/:id"
|
path="/level/:id"
|
||||||
component={({ match }) => {
|
component={({ match }) => {
|
||||||
if (this.isAuthenticated()) {
|
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 {
|
} else {
|
||||||
return <Redirect to="/login" />;
|
return <Redirect to="/login" />;
|
||||||
}
|
}
|
||||||
@ -337,7 +383,11 @@ export default class Application extends React.Component<{}, IState> {
|
|||||||
path="/review/level/:id"
|
path="/review/level/:id"
|
||||||
component={({ match }) => {
|
component={({ match }) => {
|
||||||
if (this.isAuthenticated()) {
|
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 {
|
} else {
|
||||||
return <Redirect to="/login" />;
|
return <Redirect to="/login" />;
|
||||||
}
|
}
|
||||||
@ -346,13 +396,17 @@ export default class Application extends React.Component<{}, IState> {
|
|||||||
isAuth={this.isAuthenticated}
|
isAuth={this.isAuthenticated}
|
||||||
path="/review/queue"
|
path="/review/queue"
|
||||||
component={() => {
|
component={() => {
|
||||||
return <h1>Get beaned!!</h1>;
|
return <ReviewPage
|
||||||
|
reviewType={ReviewType.QUEUE}
|
||||||
|
vocabByQueue={this.getReviewQueue}
|
||||||
|
drawerButtonState={this.drawerButtonState} />;
|
||||||
}} />
|
}} />
|
||||||
<AuthRoute
|
<AuthRoute
|
||||||
isAuth={this.isAuthenticated}
|
isAuth={this.isAuthenticated}
|
||||||
path="/review/summary"
|
path="/review/summary"
|
||||||
component={() => {
|
component={() => {
|
||||||
return <SummaryPage reviewMeta={this.getLastReview} />
|
return <SummaryPage
|
||||||
|
reviewMeta={this.getLastReview} />
|
||||||
}} />
|
}} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -6,3 +6,8 @@ export interface IReviewMetadata {
|
|||||||
// Number of nearly correct answers
|
// Number of nearly correct answers
|
||||||
nearly: number;
|
nearly: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export enum ReviewType {
|
||||||
|
LEVEL,
|
||||||
|
QUEUE
|
||||||
|
};
|
||||||
|
@ -16,6 +16,8 @@ interface IProps {
|
|||||||
id: string;
|
id: string;
|
||||||
|
|
||||||
levelVocab: (id: string) => IVocab[];
|
levelVocab: (id: string) => IVocab[];
|
||||||
|
|
||||||
|
drawerButtonState: (state: boolean) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
interface IState {
|
interface IState {
|
||||||
@ -33,6 +35,9 @@ export default class LevelPage extends React.Component<IProps, IState> {
|
|||||||
constructor(props: any) {
|
constructor(props: any) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
|
// Hide the drawer
|
||||||
|
this.props.drawerButtonState(false);
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
currentVocab: this.props.levelVocab(this.props.id)[0],
|
currentVocab: this.props.levelVocab(this.props.id)[0],
|
||||||
lookedAt: [0],
|
lookedAt: [0],
|
||||||
|
@ -12,13 +12,19 @@ import Paper from "@material-ui/core/Paper";
|
|||||||
import { Redirect } from "react-router-dom";
|
import { Redirect } from "react-router-dom";
|
||||||
|
|
||||||
import { IVocab, ReviewMode, VocabType } from "../models/vocab";
|
import { IVocab, ReviewMode, VocabType } from "../models/vocab";
|
||||||
|
import { ReviewType } from "../models/review";
|
||||||
|
|
||||||
import { levW } from "../algorithms/levenshtein";
|
import { levW } from "../algorithms/levenshtein";
|
||||||
import { LEVENSHTEIN_MAX_DISTANCE } from "../config";
|
import { LEVENSHTEIN_MAX_DISTANCE } from "../config";
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
levelId: number;
|
levelId?: number;
|
||||||
vocabByLevel: (level: number) => IVocab[];
|
vocabByLevel?: (level: number) => IVocab[];
|
||||||
|
vocabByQueue?: () => IVocab[];
|
||||||
|
|
||||||
|
reviewType: ReviewType;
|
||||||
|
|
||||||
|
drawerButtonState: (state: boolean) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface IState {
|
interface IState {
|
||||||
@ -51,10 +57,31 @@ export default class ReviewPage extends React.Component<IProps, IState> {
|
|||||||
popoverColor: "red",
|
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);
|
this.vocab = vocabByLevel(levelId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
case ReviewType.QUEUE:
|
||||||
|
if (!vocabByQueue) {
|
||||||
|
alert("[ReviewPage::constructor] vocabByQueue undefined");
|
||||||
|
} else {
|
||||||
|
this.vocab = vocabByQueue();
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
currentVocab = () => {
|
currentVocab = () => {
|
||||||
return this.vocab[this.state.current];
|
return this.vocab[this.state.current];
|
||||||
}
|
}
|
||||||
@ -108,7 +135,7 @@ export default class ReviewPage extends React.Component<IProps, IState> {
|
|||||||
) : undefined
|
) : undefined
|
||||||
}
|
}
|
||||||
<Grid container justify="center">
|
<Grid container justify="center">
|
||||||
<Grid item>
|
<Grid item style={{ width: "100%" }}>
|
||||||
<Card>
|
<Card>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<Grid container direction="column">
|
<Grid container direction="column">
|
||||||
|
Reference in New Issue
Block a user