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,77 +19,102 @@ 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> {
-    componentDidMount() {
-        this.props.setLoading(true);
+const LevelListWithRouter = withRouter(
+    class Dashboard extends React.Component<IProps> {
+        componentDidMount() {
+            this.props.setLoading(true);
 
-        // Fetch the levels
-        this.props.getLevels().then(res => {
-            this.props.setLevels(res);
-            this.props.setLoading(false);
-        });
-    }
-
-    render() {
-        if (this.props.loading) {
-            return <div>
-                <Grid
-                    container
-                    spacing={0}
-                    direction="column"
-                    alignItems="center"
-                    justify="center"
-                    style={{ minHeight: '100vh' }}>
-                    <Grid item xs={12}>
-                        <Paper className="paper">
-                            <Grid container direction="column" spacing={8}>
-                                <CircularProgress />
-                            </Grid>
-                        </Paper>
-                    </Grid>
-                </Grid>
-            </div>;
+            // Fetch the levels
+            this.props.getLevels().then(res => {
+                this.props.setLevels(res);
+                this.props.setLoading(false);
+            });
         }
 
-        const small = window.matchMedia("(max-width: 700px)").matches;
-        const cName = small ? "lesson-card-xs" : "lesson-card-lg";
+        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);
+            }
+        }
 
-        let key = 0;
-        const levelToCard = (level: ILevel) => {
-            const suffix = level.level in this.props.user.levels ? " ✔" : "";
-            return <Grid item key={key++}>
-                <Card style={{
-                    width: small ? window.width - 32 : "300px"
-                }}>
-                    <CardContent className={cName}>
-                        <Typography variant="title">{`Level ${level.level}${suffix}`}</Typography>
-                        <Typography variant="title" component="p">{level.name}</Typography>
-                        <br />
-                        <Typography component="p">
-                            {level.description}
-                        </Typography>
-                    </CardContent>
-                    <CardActions>
-                        <Button
-                            component={Link}
-                            to={`/level/${level.level}`}
-                            className="lesson-card-btn">
-                            Zum Level
+        render() {
+            if (this.props.loading) {
+                return <div>
+                    <Grid
+                        container
+                        spacing={0}
+                        direction="column"
+                        alignItems="center"
+                        justify="center"
+                        style={{ minHeight: '100vh' }}>
+                        <Grid item xs={12}>
+                            <Paper className="paper">
+                                <Grid container direction="column" spacing={8}>
+                                    <CircularProgress />
+                                </Grid>
+                            </Paper>
+                        </Grid>
+                    </Grid>
+                </div>;
+            }
+
+            const small = window.matchMedia("(max-width: 700px)").matches;
+            const cName = small ? "lesson-card-xs" : "lesson-card-lg";
+
+            let key = 0;
+            const levelToCard = (level: ILevel) => {
+                const suffix = level.level in this.props.user.levels ? " ✔" : "";
+                return <Grid item key={key++}>
+                    <Card style={{
+                        width: small ? window.width - 32 : "300px"
+                    }}>
+                        <CardContent className={cName}>
+                            <Typography variant="title">{`Level ${level.level}${suffix}`}</Typography>
+                            <Typography variant="title" component="p">{level.name}</Typography>
+                            <br />
+                            <Typography component="p">
+                                {level.description}
+                            </Typography>
+                        </CardContent>
+                        <CardActions>
+                            <Button
+                                className="lesson-card-btn"
+                                onClick={() => this.toLevel(level.level)}>
+                                Zum Level
                         </Button>
-                    </CardActions>
-                </Card>
-            </Grid>;
-        };
+                        </CardActions>
+                    </Card>
+                </Grid>;
+            };
 
-        return <Grid container spacing={16} direction="row">
-            {this.props.levels.map(levelToCard)}
-        </Grid>
+            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