show assigned badge

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

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) => {

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.message.id === 'TUTORIAL_CHECK_SUCCESS'){
       if(this.props.tutorial.badge){
-      if(this.isSuccess()){
         // 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)){
+          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 (
       <Dialog
+        style={{ zIndex: 99999999 }}
         open={this.state.open}
         title={this.state.title}
         content={this.state.content}
@@ -58,7 +79,17 @@ class Badge extends Component {
         button={'Schließen'}
       >
         <div style={{ marginTop: '10px' }}>
-
+          <Paper style={{textAlign: 'center'}}>
+            {this.props.message.msg.image && this.props.message.msg.image.path ?
+              <Avatar src={`${process.env.REACT_APP_MYBADGES}/media/${this.props.message.msg.image.path}`} style={{width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto'}}/>
+            : <Avatar style={{width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto'}}></Avatar>}
+            <Typography variant='h6' style={{display: 'flex', cursor: 'default', paddingBottom: '6px'}}>
+              <div style={{flexGrow:1, marginLeft: '10px', marginRight: '10px'}}>{this.props.message.msg.name}</div>
+            </Typography>
+          </Paper>
+          <Typography style={{marginTop: '10px'}}>
+            Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du <Link to={'/user/badge'} className={this.props.classes.link}>hier</Link>.
+          </Typography>
         </div>
       </Dialog>
     );
@@ -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));