feat: Replace Redirect with withRouter

src/actions/index.ts

@@ -52,18 +52,10 @@ export function setUser(user: IUser) {
     };
 }
 
-export const LEVEL_SET_REVIEW = "LEVEL_SET_REVIEW";
-export function setLevelReview(state: boolean) {
-    return {
-        type: LEVEL_SET_REVIEW,
-        state,
-    };
-};
-
 export const LEVEL_SET_LOOKEDAT = "LEVEL_SET_LOOKEDAT";
 export function setLevelLookedAt(ids: number[]) {
     return {
-        type: LEVEL_SET_REVIEW,
+        type: LEVEL_SET_LOOKEDAT,
         lookedAt: ids,
     };
 };

src/components/app.tsx

@@ -10,7 +10,7 @@ import LoginPage from "../containers/LoginPage";
 import LevelListPage from "../containers/LevelList";
 import LevelPage from "../containers/LevelPage";
 import ReviewPage from "../containers/Review";
-import SummaryPage from "../pages/summary";
+import SummaryPage from "../containers/SummaryPage";
 import WelcomePage from "../pages/intro";
 
 import Drawer from "../containers/Drawer";
@@ -309,8 +309,7 @@ export default class Application extends React.Component<IProps> {
                         isAuth={this.isAuthenticated}
                         path="/review/summary"
                         component={() => {
-                            return <SummaryPage
+                            return <SummaryPage />
-                                reviewMeta={this.getLastReview} />
                         }} />
                 </div>
             </div >

src/containers/LevelPage.ts

@@ -1,7 +1,7 @@
 import { connect } from "react-redux";
 
 import {
-    setDrawerButton, setLevelReview, setLevelLookedAt,
+    setDrawerButton, setLevelLookedAt,
     setLevelCurrentVocab, setLevelVocab, setLevelLoading
 } from "../actions";
 
@@ -10,12 +10,11 @@ import { IVocab } from "../models/vocab";
 import LevelPage from "../pages/level";
 
 const mapStateToProps = state => {
-    const { currentVocab, lookedAt, toReview, vocab, loading } = state.level;
+    const { currentVocab, lookedAt, vocab, loading } = state.level;
 
     return {
         currentVocab,
         lookedAt,
-        toReview,
         vocab,
         loading,
     };
@@ -24,7 +23,6 @@ const mapStateToProps = state => {
 const mapDispatchToProps = dispatch => {
     return {
         drawerButtonState: (state: boolean) => dispatch(setDrawerButton(state)),
-        setReview: (state: boolean) => dispatch(setLevelReview(state)),
         setLookedAt: (ids: number[]) => dispatch(setLevelLookedAt(ids)),
         setCurrentVocab: (vocab: IVocab) => dispatch(setLevelCurrentVocab(vocab)),
         setVocab: (vocab: IVocab[]) => dispatch(setLevelVocab(vocab)),

src/containers/SummaryPage.ts

@@ -0,0 +1,21 @@
+import { connect } from "react-redux";
+
+import { setDrawerButton } from "../actions";
+
+import SummaryPage from "../pages/summary";
+
+const mapStateToProps = state => {
+    return {
+        reviewMeta: state.lastReview,
+    };
+};
+
+const mapDispatchToProps = dispatch => {
+    return {
+        setDrawerButton: (state: boolean) => dispatch(setDrawerButton(state)),
+    };
+};
+
+const SummaryPageContainer = connect(mapStateToProps,
+    mapDispatchToProps)(SummaryPage);
+export default SummaryPageContainer;

src/pages/level.tsx

@@ -10,7 +10,7 @@ import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import CircularProgress from "@material-ui/core/CircularProgress";
 
-import { Redirect } from "react-router-dom";
+import { withRouter } from "react-router-dom";
 
 import { IVocab } from "../models/vocab";
 
@@ -18,20 +18,21 @@ interface IProps {
     id: string;
     levelVocab: (id: string) => Promise<IVocab[]>;
 
+    history: any;
+
     loading: boolean;
     setLoading: (state: boolean) => void;
     vocab: IVocab[];
     setVocab: (vocab: IVocab[]) => void;
     setLookedAt: (ids: number[]) => void;
     setCurrentVocab: (vocab: IVocab) => void;
-    setReview: (state: boolean) => void;
     drawerButtonState: (state: boolean) => void;
     currentVocab: IVocab;
     lookedAt: number[];
-    toReview: boolean;
 };
 
-export default class LevelPage extends React.Component<IProps> {
+const LevelPageWithRouter = withRouter(
+    class LevelPage extends React.Component<IProps> {
         private uid = 0;
         // To prevent React from redrawing the vocabulary list and prematurely
         // cancelling the animation
@@ -84,27 +85,17 @@ export default class LevelPage extends React.Component<IProps> {
         }
 
         toReview = () => {
-        const { vocab, lookedAt } = this.props;
+            const { vocab, lookedAt, id } = this.props;
             // Only go to the review if all vocabulary item have been looked at
             if (vocab.length === lookedAt.length) {
-            this.props.setReview(true);
+                this.props.setLoading(true);
+                this.props.history.push(`/review/level/${id}`);
             }
         }
 
         render() {
             if (this.props.loading) {
                 return <div>
-                {/*
-                  * This would be the case when the user presses the "to
-                  * review" button. That is because we need the state of loading
-                  * to be true, when this page gets called 
-                  * TODO:?
-                  */}
-                {
-                    this.props.toReview ? (
-                        <Redirect to={`/review/level/${this.props.id}`} />
-                    ) : undefined
-                }
                     <Grid
                         container
                         spacing={0}
@@ -131,7 +122,6 @@ export default class LevelPage extends React.Component<IProps> {
                         <List>
                             {this.props.vocab
                                 .map(this.renderVocabListItem)}
-                        {/* TODO*/}
                             <ListItem button onClick={this.toReview}>
                                 <ListItemText>
                                     Zur Übung
@@ -139,11 +129,6 @@ export default class LevelPage extends React.Component<IProps> {
                             </ListItem>
                         </List>
                     </Grid>
-                {
-                    this.props.toReview ? (
-                        <Redirect to={`/review/level/${this.props.id}`} />
-                    ) : undefined
-                }
                     <Grid item lg={7} xs={9}>
                         <Grid container direction="column">
                             <Grid item style={{ margin: 12 }}>
@@ -197,4 +182,6 @@ export default class LevelPage extends React.Component<IProps> {
                 </Grid>
             </div>;
         }
-};
+    }
+);
+export default LevelPageWithRouter;

src/pages/summary.tsx

@@ -6,34 +6,30 @@ import Grid from "@material-ui/core/Grid";
 import Button from "@material-ui/core/Button";
 import SummaryTable from "../components/SummaryTable";
 
-import { Redirect } from "react-router-dom";
+import { withRouter } from "react-router-dom";
 
 import { IReviewMetadata } from "../models/review";
 
 interface IProps {
-    reviewMeta: () => IReviewMetadata;
+    history: any;
+
+    reviewMeta: IReviewMetadata;
+    setDrawerButton: (state: boolean) => void;
 }
 
-interface IState {
+// TODO: This stays at the default value
-    toDashboard: boolean;
+const SummaryPageWithRouter = withRouter(
-}
+    class SummaryPage extends React.Component<IProps> {
+        toDashboard = () => {
+            // Show the drawer button
+            this.props.setDrawerButton(true);
 
-export default class SummaryPage extends React.Component<IProps, IState> {
+            // Go to the dashboard
-    constructor(props: any) {
+            this.props.history.push("/dashboard");
-        super(props);
-
-        this.state = {
-            toDashboard: false,
-        };
         }
 
         render() {
             return <div>
-            {
-                this.state.toDashboard ? (
-                    <Redirect to="/dashboard" />
-                ) : undefined
-            }
                 <Grid
                     container
                     spacing={0}
@@ -45,10 +41,8 @@ export default class SummaryPage extends React.Component<IProps, IState> {
                         <Paper className="paper">
                             <Typography variant="title">Zusammenfassung</Typography>
                             <Grid container direction="column">
-                            <SummaryTable reviewMeta={this.props.reviewMeta} />
+                                <SummaryTable reviewMeta={() => this.props.reviewMeta} />
-                            <Button onClick={() => this.setState({
+                                <Button onClick={this.toDashboard}>
-                                toDashboard: true,
-                            })}>
                                     Zum Dashboard
                             </Button>
                             </Grid>
@@ -58,3 +52,5 @@ export default class SummaryPage extends React.Component<IProps, IState> {
             </div>;
         }
     }
+);
+export default SummaryPageWithRouter;

src/reducers/index.ts

@@ -26,7 +26,6 @@ interface IState {
     level: {
         currentVocab: IVocab;
         lookedAt: number[];
-        toReview: boolean;
         vocab: IVocab[];
         loading: boolean;
     };
@@ -74,7 +73,6 @@ const initialState: IState = {
     level: {
         currentVocab: {} as IVocab,
         lookedAt: [0],
-        toReview: false,
         vocab: [],
         loading: true,
     },
@@ -137,15 +135,6 @@ export function LateinicusApp(state: IState = initialState, action: any) {
             return Object.assign({}, state, {
                 user: action.user,
             });
-        case Actions.LEVEL_SET_REVIEW:
-            return Object.assign({}, state, {
-                level: Object.assign({}, state.level, {
-                    toReview: action.state,
-                    // Make sure that we are in a "loading mode", when the page gets
-                    // called the next time
-                    loading: true,
-                }),
-            });
         case Actions.LEVEL_SET_LOOKEDAT:
             return Object.assign({}, state, {
                 level: Object.assign({}, state.level, {