diff --git a/frontend/src/actions/index.ts b/frontend/src/actions/index.ts index e7526d7..3f6185d 100644 --- a/frontend/src/actions/index.ts +++ b/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, + }; +}; diff --git a/frontend/src/containers/LevelList.ts b/frontend/src/containers/LevelList.ts index 7aa0335..14c137f 100644 --- a/frontend/src/containers/LevelList.ts +++ b/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)), }; }; diff --git a/frontend/src/pages/levelList.tsx b/frontend/src/pages/levelList.tsx index 90d7a26..772b0d1 100644 --- a/frontend/src/pages/levelList.tsx +++ b/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; + 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 { - componentDidMount() { - this.props.setLoading(true); +const LevelListWithRouter = withRouter( + class Dashboard extends React.Component { + 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
- - - - - - - - - -
; + // 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 - - - {`Level ${level.level}${suffix}`} - {level.name} -
- - {level.description} - -
- - - -
-
; - }; + + + ; + }; - return - {this.props.levels.map(levelToCard)} - + return
+ + {this.props.levels.map(levelToCard)} + + this.props.setSnackbar(false)} + message={Du hast dieses Level noch nicht freigeschaltet!} /> +
; + } } -}; +); +export default LevelListWithRouter; diff --git a/frontend/src/reducers/index.ts b/frontend/src/reducers/index.ts index 2ec1f47..9b4048b 100644 --- a/frontend/src/reducers/index.ts +++ b/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