assigne badge after tutorial-success

src/actions/tutorialActions.js

@@ -56,6 +56,19 @@ export const getTutorials = () => (dispatch, getState) => {
     });
 };
 
+export const assigneBadge = (id) => (dispatch, getState) => {
+  axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge/${id}`)
+    .then(res => {
+      var badge = res.data.badge;
+      dispatch(returnSuccess(badge, res.status, 'ASSIGNE_BADGE_SUCCESS'));
+    })
+    .catch(err => {
+      if(err.response){
+        dispatch(returnErrors(err.response.data.message, err.response.status, 'ASSIGNE_BADGE_FAIL'));
+      }
+    });
+};
+
 export const deleteTutorial = (id) => (dispatch, getState) => {
   var tutorial = getState().tutorial;
   var id = getState().builder.id;

src/actions/tutorialBuilderActions.js

@@ -1,4 +1,4 @@
-import { PROGRESS, JSON_STRING, BUILDER_CHANGE, BUILDER_ERROR, BUILDER_TITLE, BUILDER_ID, BUILDER_ADD_STEP, BUILDER_DELETE_STEP, BUILDER_CHANGE_STEP, BUILDER_CHANGE_ORDER, BUILDER_DELETE_PROPERTY } from './types';
+import { PROGRESS, JSON_STRING, BUILDER_CHANGE, BUILDER_ERROR, BUILDER_TITLE, BUILDER_ID, BUILDER_BADGE, BUILDER_ADD_STEP, BUILDER_DELETE_STEP, BUILDER_CHANGE_STEP, BUILDER_CHANGE_ORDER, BUILDER_DELETE_PROPERTY } from './types';
 
 import data from '../data/hardware.json';
 
@@ -39,6 +39,14 @@ export const tutorialId = (id) => (dispatch) => {
   dispatch(changeTutorialBuilder());
 };
 
+export const tutorialBadge = (badge) => (dispatch) => {
+  dispatch({
+    type: BUILDER_BADGE,
+    payload: badge
+  });
+  dispatch(changeTutorialBuilder());
+};
+
 export const addStep = (index) => (dispatch, getState) => {
   var steps = getState().builder.steps;
   var step = {
@@ -243,7 +251,7 @@ export const progress = (inProgress) => (dispatch) => {
 export const resetTutorial = () => (dispatch, getState) => {
   dispatch(jsonString(''));
   dispatch(tutorialTitle(''));
-  // dispatch(tutorialId(''));
+  dispatch(tutorialBadge(''));
   var steps = [
     {
       id: 1,
@@ -298,7 +306,7 @@ export const readJSON = (json) => (dispatch, getState) => {
     return object;
   });
   dispatch(tutorialTitle(json.title));
-  // dispatch(tutorialId(json.id));
+  dispatch(tutorialBadge(json.badge));
   dispatch(tutorialSteps(steps));
   dispatch(setSubmitError());
   dispatch(progress(false));

src/actions/types.js

@@ -34,6 +34,7 @@ export const JSON_STRING = 'JSON_STRING';
 
 export const BUILDER_CHANGE = 'BUILDER_CHANGE';
 export const BUILDER_TITLE = 'BUILDER_TITLE';
+export const BUILDER_BADGE = 'BUILDER_BADGE';
 export const BUILDER_ID = 'BUILDER_ID';
 export const BUILDER_ADD_STEP = 'BUILDER_ADD_STEP';
 export const BUILDER_DELETE_STEP = 'BUILDER_DELETE_STEP';

src/components/Tutorial/Badge.js

@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { assigneBadge } from '../../actions/tutorialActions';
+
+import Dialog from '../Dialog';
+
+class Badge extends Component {
+
+  state = {
+    open: false,
+    title: '',
+    content: ''
+  };
+
+  componentDidUpdate(props){
+    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)){
+            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});
+      }
+    }
+  }
+
+  isSuccess = () => {
+    var tutorialId = this.props.tutorial._id;
+    var status = this.props.status.filter(status => status._id === tutorialId)[0];
+    var tasks = status.tasks;
+    var success = tasks.filter(task => task.type === 'success').length / tasks.length;
+    if(success===1){
+      return true;
+    }
+    return false;
+  }
+
+  toggleDialog = () => {
+    this.setState({ open: !this.state, title: '', content: '' });
+  }
+
+  render() {
+    return (
+      <Dialog
+        open={this.state.open}
+        title={this.state.title}
+        content={this.state.content}
+        onClose={() => {this.toggleDialog();}}
+        onClick={() => {this.toggleDialog();}}
+        button={'Schließen'}
+      >
+        <div style={{ marginTop: '10px' }}>
+
+        </div>
+      </Dialog>
+    );
+  };
+}
+
+Badge.propTypes = {
+  assigneBadge: PropTypes.func.isRequired,
+  status: PropTypes.array.isRequired,
+  change: PropTypes.number.isRequired,
+  tutorial: PropTypes.object.isRequired,
+  user: PropTypes.object,
+  isAuthenticated: PropTypes.bool.isRequired
+};
+
+const mapStateToProps = state => ({
+  change: state.tutorial.change,
+  status: state.tutorial.status,
+  tutorial: state.tutorial.tutorials[0],
+  user: state.auth.user,
+  isAuthenticated: state.auth.isAuthenticated
+});
+
+export default connect(mapStateToProps, { assigneBadge })(Badge);

src/components/Tutorial/Builder/Builder.js

@@ -181,6 +181,7 @@ class Builder extends Component {
       var steps = this.props.steps;
       var newTutorial = new FormData();
       newTutorial.append('title', this.props.title);
+      newTutorial.append('badge', this.props.badge);
       steps.forEach((step, i) => {
         newTutorial.append(`steps[${i}][type]`, step.type);
         newTutorial.append(`steps[${i}][headline]`, step.headline);
@@ -319,6 +320,7 @@ class Builder extends Component {
             : null}
           {/* <Id error={this.props.error.id} value={this.props.id} /> */}
           <Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error.title} />
+          <Textfield value={this.props.badge} property={'badge'} label={'Badge'} />
 
           {this.props.steps.map((step, i) =>
             <Step step={step} index={i} key={i} />
@@ -390,19 +392,21 @@ Builder.propTypes = {
   getTutorials: PropTypes.func.isRequired,
   resetTutorial: PropTypes.func.isRequired,
   clearMessages: PropTypes.func.isRequired,
-  checkError: PropTypes.func.isRequired,
   tutorialId: PropTypes.func.isRequired,
+  checkError: PropTypes.func.isRequired,
   readJSON: PropTypes.func.isRequired,
   jsonString: PropTypes.func.isRequired,
   progress: PropTypes.func.isRequired,
   deleteTutorial: PropTypes.func.isRequired,
   resetTutorialBuilder: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
+  badge: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
   steps: PropTypes.array.isRequired,
   change: PropTypes.number.isRequired,
   error: PropTypes.object.isRequired,
   json: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
+  badge: PropTypes.string.isRequired,
   isProgress: PropTypes.bool.isRequired,
   tutorials: PropTypes.array.isRequired,
   message: PropTypes.object.isRequired,
@@ -411,6 +415,7 @@ Builder.propTypes = {
 
 const mapStateToProps = state => ({
   title: state.builder.title,
+  badge: state.builder.badge,
   id: state.builder.id,
   steps: state.builder.steps,
   change: state.builder.change,

src/components/Tutorial/Builder/Textfield.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { tutorialTitle, jsonString, changeContent, setError, deleteError } from '../../../actions/tutorialBuilderActions';
+import { tutorialTitle, tutorialBadge, jsonString, changeContent, setError, deleteError } from '../../../actions/tutorialBuilderActions';
 
 import { withStyles } from '@material-ui/core/styles';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
@@ -42,6 +42,9 @@ class Textfield extends Component {
     else if(this.props.property === 'json'){
       this.props.jsonString(value);
     }
+    else if(this.props.property === 'badge'){
+      this.props.tutorialBadge(value);
+    }
     else {
       this.props.changeContent(value, this.props.index, this.props.property, this.props.property2);
     }
@@ -86,8 +89,9 @@ class Textfield extends Component {
 
 Textfield.propTypes = {
   tutorialTitle: PropTypes.func.isRequired,
+  tutorialBadge: PropTypes.func.isRequired,
   jsonString: PropTypes.func.isRequired,
   changeContent: PropTypes.func.isRequired,
 };
 
-export default connect(null, { tutorialTitle, jsonString, changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(Textfield));
+export default connect(null, { tutorialTitle, tutorialBadge, jsonString, changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(Textfield));

src/components/Tutorial/Tutorial.js

@@ -10,6 +10,7 @@ import StepperHorizontal from './StepperHorizontal';
 import StepperVertical from './StepperVertical';
 import Instruction from './Instruction';
 import Assessment from './Assessment';
+import Badge from './Badge';
 import NotFound from '../NotFound';
 
 import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
@@ -57,6 +58,7 @@ class Tutorial extends Component {
                     <Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${this.props.tutorial._id}`, title: tutorial.title }]} />
 
                     <StepperHorizontal />
+                    <Badge />
 
                     <div style={{ display: 'flex' }}>
                       <StepperVertical steps={steps} />

src/reducers/tutorialBuilderReducer.js

@@ -1,10 +1,11 @@
-import { PROGRESS, JSON_STRING, BUILDER_CHANGE, BUILDER_ERROR, BUILDER_TITLE, BUILDER_ID, BUILDER_ADD_STEP, BUILDER_DELETE_STEP, BUILDER_CHANGE_STEP,BUILDER_CHANGE_ORDER, BUILDER_DELETE_PROPERTY } from '../actions/types';
+import { PROGRESS, JSON_STRING, BUILDER_CHANGE, BUILDER_ERROR, BUILDER_TITLE, BUILDER_BADGE, BUILDER_ID, BUILDER_ADD_STEP, BUILDER_DELETE_STEP, BUILDER_CHANGE_STEP,BUILDER_CHANGE_ORDER, BUILDER_DELETE_PROPERTY } from '../actions/types';
 
 const initialState = {
   change: 0,
   progress: false,
   json: '',
   title: '',
+  badge: '',
   id: '',
   steps: [
     {
@@ -33,6 +34,11 @@ export default function(state = initialState, action){
         ...state,
         title: action.payload
       };
+    case BUILDER_BADGE:
+      return {
+        ...state,
+        badge: action.payload
+      };
     case BUILDER_ID:
       return {
         ...state,