feat: Prevent users from starting levels that they did not reach yet

frontend/src/actions/index.ts

@@ -192,3 +192,11 @@ export function setDashboardLoading(state: boolean) {
         state,
     };
 };
+
+export const LEVELLIST_SET_SNACKBAR = "LEVELLIST_SET_SNACKBAR";
+export function setLevelListSnackbar(state: boolean) {
+    return {
+        type: LEVELLIST_SET_SNACKBAR,
+        state,
+    };
+};

frontend/src/containers/LevelList.ts

@@ -1,6 +1,8 @@
 import { connect } from "react-redux";
 
-import { setLevelListLoading, setLevels } from "../actions";
+import {
+    setLevelListLoading, setLevels, setLevelListSnackbar
+} from "../actions";
 
 import { ILevel } from "../models/level";
 
@@ -11,12 +13,14 @@ const mapStateToProps = state => {
         levels: state.levels,
         loading: state.levelList.loading,
         user: state.user,
+        snackbar: state.levelList.snackbar,
     };
 };
 const mapDispatchToProps = dispatch => {
     return {
         setLoading: (state: boolean) => dispatch(setLevelListLoading(state)),
         setLevels: (levels: ILevel[]) => dispatch(setLevels(levels)),
+        setSnackbar: (state: boolean) => dispatch(setLevelListSnackbar(state)),
     };
 };
 

frontend/src/pages/levelList.tsx

@@ -7,9 +7,11 @@ import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';
 import Paper from "@material-ui/core/Paper";
+import Snackbar from "@material-ui/core/Snackbar";
+
 import CircularProgress from "@material-ui/core/CircularProgress";
 
-import { Link } from "react-router-dom";
+import { withRouter } from "react-router-dom";
 
 import { ILevel } from "../models/level";
 import { IUser } from "../models/user";
@@ -17,14 +19,19 @@ import { IUser } from "../models/user";
 interface IProps {
     getLevels: () => Promise<ILevel[]>;
 
+    history: any;
+
     user: IUser;
     setLevels: (levels: ILevel[]) => void;
     setLoading: (state: boolean) => void;
     loading: boolean;
+    snackbar: boolean;
+    setSnackbar: (state: boolean) => void;
     levels: ILevel[];
 }
 
-export default class Dashboard extends React.Component<IProps> {
+const LevelListWithRouter = withRouter(
+    class Dashboard extends React.Component<IProps> {
         componentDidMount() {
             this.props.setLoading(true);
 
@@ -35,6 +42,15 @@ export default class Dashboard extends React.Component<IProps> {
             });
         }
 
+        toLevel(id: number) {
+            const maxLevel = Math.max(...this.props.user.levels);
+            if (maxLevel + 1 >= id) {
+                this.props.history.push(`/level/${id}`);
+            } else {
+                this.props.setSnackbar(true);
+            }
+        }
+
         render() {
             if (this.props.loading) {
                 return <div>
@@ -76,9 +92,8 @@ export default class Dashboard extends React.Component<IProps> {
                         </CardContent>
                         <CardActions>
                             <Button
-                            component={Link}
-                            to={`/level/${level.level}`}
-                            className="lesson-card-btn">
+                                className="lesson-card-btn"
+                                onClick={() => this.toLevel(level.level)}>
                                 Zum Level
                         </Button>
                         </CardActions>
@@ -86,8 +101,20 @@ export default class Dashboard extends React.Component<IProps> {
                 </Grid>;
             };
 
-        return <Grid container spacing={16} direction="row">
+            return <div>
+                <Grid container spacing={16} direction="row">
                     {this.props.levels.map(levelToCard)}
                 </Grid>
+                <Snackbar
+                    anchorOrigin={{
+                        vertical: "top",
+                        horizontal: "right",
+                    }}
+                    open={this.props.snackbar}
+                    onClose={() => this.props.setSnackbar(false)}
+                    message={<span>Du hast dieses Level noch nicht freigeschaltet!</span>} />
+            </div>;
         }
-};
+    }
+);
+export default LevelListWithRouter;

frontend/src/reducers/index.ts

@@ -34,6 +34,7 @@ interface IState {
 
     levelList: {
         loading: boolean;
+        snackbar: boolean;
     };
 
     dashboard: {
@@ -91,6 +92,7 @@ const initialState: IState = {
 
     levelList: {
         loading: true,
+        snackbar: false,
     },
 
     dashboard: {
@@ -248,6 +250,12 @@ export function LateinicusApp(state: IState = initialState, action: any) {
                     loading: action.state,
                 }),
             });
+        case Actions.LEVELLIST_SET_SNACKBAR:
+            return Object.assign({}, state, {
+                levelList: Object.assign({}, state.levelList, {
+                    snackbar: action.state,
+                }),
+            });
         default:
             // Ignore the initialization call to the reducer. By that we can
             // catch all actions that are not implemented