feat: Hide the drawer button during levels and reviews

src/components/app.tsx

@@ -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>

src/models/review.ts

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

src/pages/level.tsx

@@ -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],

src/pages/review.tsx

@@ -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;
+    levelId?: number;
-    vocabByLevel: (level: number) => IVocab[];
+    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;
+        // Hide the drawer button
-        this.vocab = vocabByLevel(levelId);
+        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">