assigne badge after tutorial-success

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} />