diff --git a/src/actions/authActions.js b/src/actions/authActions.js index cb06139..7cdd1c0 100644 --- a/src/actions/authActions.js +++ b/src/actions/authActions.js @@ -86,6 +86,7 @@ export const connectMyBadges = ({ username, password }) => (dispatch, getState) .then(res => { var user = getState().auth.user; user.badge = res.data.account; + user.badges = res.data.badges; dispatch({ type: MYBADGES_CONNECT, payload: user @@ -109,6 +110,7 @@ export const disconnectMyBadges = () => (dispatch, getState) => { .then(res => { var user = getState().auth.user; user.badge = null; + user.badges = null; dispatch({ type: MYBADGES_DISCONNECT, payload: user diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js index a02c37d..8983da9 100644 --- a/src/actions/tutorialActions.js +++ b/src/actions/tutorialActions.js @@ -1,4 +1,4 @@ -import { TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from './types'; +import { MYBADGES_DISCONNECT, TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from './types'; import axios from 'axios'; import { returnErrors, returnSuccess } from './messageActions'; @@ -60,6 +60,12 @@ export const assigneBadge = (id) => (dispatch, getState) => { axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge/${id}`) .then(res => { var badge = res.data.badge; + var user = getState().auth.user; + user.badges.push(badge._id); + dispatch({ + type: MYBADGES_DISCONNECT, + payload: user + }); dispatch(returnSuccess(badge, res.status, 'ASSIGNE_BADGE_SUCCESS')); }) .catch(err => { @@ -122,6 +128,7 @@ export const tutorialCheck = (status, step) => (dispatch, getState) => { payload: tutorialsStatus }); dispatch(tutorialChange()); + dispatch(returnSuccess('','','TUTORIAL_CHECK_SUCCESS')); }; export const storeTutorialXml = (code) => (dispatch, getState) => { diff --git a/src/components/Tutorial/Badge.js b/src/components/Tutorial/Badge.js index 1a7d625..97103fa 100644 --- a/src/components/Tutorial/Badge.js +++ b/src/components/Tutorial/Badge.js @@ -5,6 +5,25 @@ import { assigneBadge } from '../../actions/tutorialActions'; import Dialog from '../Dialog'; +import { Link } from 'react-router-dom'; + +import { withStyles } from '@material-ui/core/styles'; +import Paper from '@material-ui/core/Paper'; +import Typography from '@material-ui/core/Typography'; +import Avatar from '@material-ui/core/Avatar'; + +const styles = (theme) => ({ + link: { + color: theme.palette.primary.main, + textDecoration: 'none', + '&:hover': { + color: theme.palette.primary.main, + textDecoration: 'underline' + } + } +}); + + class Badge extends Component { state = { @@ -14,20 +33,21 @@ class Badge extends Component { }; componentDidUpdate(props){ - if(this.props.tutorial.badge){ - if(this.isSuccess()){ - // is connected to MyBadges? + if(this.props.message.id === 'TUTORIAL_CHECK_SUCCESS'){ + if(this.props.tutorial.badge){ + // is connected to MyBadges? if(this.props.isAuthenticated && this.props.user && this.props.user.badge){ - // if(!this.props.user.badges.include(this.props.tutorial.badge)){ - this.props.assigneBadge(this.props.tutorial.badge); + if(this.props.user.badges && !this.props.user.badges.includes(this.props.tutorial.badge)){ + if(this.isSuccess()){ + this.props.assigneBadge(this.props.tutorial.badge); + } } - // } + } } } if(props.message !== this.props.message){ if(this.props.message.id === 'ASSIGNE_BADGE_SUCCESS'){ - alert('Badge '+props.message.msg.name); - this.setState({title: '', content: '', open: true}); + this.setState({title: `Badge: ${this.props.message.msg.name}`, content: `Herzlichen Glückwunsch! Du hast den Badge ${this.props.message.msg.name} erhalten.`, open: true}); } } } @@ -50,6 +70,7 @@ class Badge extends Component { render() { return (
- + + {this.props.message.msg.image && this.props.message.msg.image.path ? + + : } + +
{this.props.message.msg.name}
+
+
+ + Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du hier. +
); @@ -71,7 +102,8 @@ Badge.propTypes = { change: PropTypes.number.isRequired, tutorial: PropTypes.object.isRequired, user: PropTypes.object, - isAuthenticated: PropTypes.bool.isRequired + isAuthenticated: PropTypes.bool.isRequired, + message: PropTypes.object.isRequired }; const mapStateToProps = state => ({ @@ -79,7 +111,8 @@ const mapStateToProps = state => ({ status: state.tutorial.status, tutorial: state.tutorial.tutorials[0], user: state.auth.user, - isAuthenticated: state.auth.isAuthenticated + isAuthenticated: state.auth.isAuthenticated, + message: state.message }); -export default connect(mapStateToProps, { assigneBadge })(Badge); +export default connect(mapStateToProps, { assigneBadge })(withStyles(styles, { withTheme: true })(Badge));