From 101dfc7692d4b319a322d675aef127c348c45bb4 Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Wed, 9 Dec 2020 19:34:44 +0100
Subject: [PATCH] assigne badge after tutorial-success
---
src/actions/tutorialActions.js | 13 +++
src/actions/tutorialBuilderActions.js | 14 +++-
src/actions/types.js | 1 +
src/components/Tutorial/Badge.js | 85 ++++++++++++++++++++
src/components/Tutorial/Builder/Builder.js | 9 ++-
src/components/Tutorial/Builder/Textfield.js | 8 +-
src/components/Tutorial/Tutorial.js | 2 +
src/reducers/tutorialBuilderReducer.js | 8 +-
8 files changed, 132 insertions(+), 8 deletions(-)
create mode 100644 src/components/Tutorial/Badge.js
diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js
index bffabfa..a02c37d 100644
--- a/src/actions/tutorialActions.js
+++ b/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;
diff --git a/src/actions/tutorialBuilderActions.js b/src/actions/tutorialBuilderActions.js
index b2d6c5c..356e8fa 100644
--- a/src/actions/tutorialBuilderActions.js
+++ b/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));
diff --git a/src/actions/types.js b/src/actions/types.js
index 9172b4a..b3bff75 100644
--- a/src/actions/types.js
+++ b/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';
diff --git a/src/components/Tutorial/Badge.js b/src/components/Tutorial/Badge.js
new file mode 100644
index 0000000..1a7d625
--- /dev/null
+++ b/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 (
+
+ );
+ };
+}
+
+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);
diff --git a/src/components/Tutorial/Builder/Builder.js b/src/components/Tutorial/Builder/Builder.js
index 9656d00..78c7657 100644
--- a/src/components/Tutorial/Builder/Builder.js
+++ b/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}
{/* */}
+
{this.props.steps.map((step, 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,
diff --git a/src/components/Tutorial/Builder/Textfield.js b/src/components/Tutorial/Builder/Textfield.js
index fa39547..74a57f1 100644
--- a/src/components/Tutorial/Builder/Textfield.js
+++ b/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));
diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js
index 47f6a7b..d86a958 100644
--- a/src/components/Tutorial/Tutorial.js
+++ b/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 {
+
diff --git a/src/reducers/tutorialBuilderReducer.js b/src/reducers/tutorialBuilderReducer.js
index 132de0a..cad4c2e 100644
--- a/src/reducers/tutorialBuilderReducer.js
+++ b/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,