definig success and error callbacks for every private axios request

src/components/Project/Project.js

@@ -5,7 +5,6 @@ import { workspaceName } from '../../actions/workspaceActions';
 import { getProject, resetProject } from '../../actions/projectActions';
 import { clearMessages, returnErrors } from '../../actions/messageActions';
 
-import axios from 'axios';
 import { withRouter } from 'react-router-dom';
 import { createNameId } from 'mnemonic-id';
 

src/components/Project/ProjectHome.js

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import { getProjects, resetProject } from '../../actions/projectActions';
 import { clearMessages } from '../../actions/messageActions';
 
-import axios from 'axios';
 import { Link, withRouter } from 'react-router-dom';
 
 import Breadcrumbs from '../Breadcrumbs';

src/components/Tutorial/Builder/Builder.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { checkError, readJSON, jsonString, progress, tutorialId, resetTutorial as resetTutorialBuilder} from '../../../actions/tutorialBuilderActions';
-import { getTutorials, resetTutorial, deleteTutorial } from '../../../actions/tutorialActions';
+import { getTutorials, resetTutorial, deleteTutorial, tutorialProgress } from '../../../actions/tutorialActions';
 import { clearMessages } from '../../../actions/messageActions';
 
 import axios from 'axios';
@@ -68,10 +68,19 @@ class Builder extends Component {
   }
 
   componentDidMount() {
-    this.props.getTutorials();
+    this.props.tutorialProgress();
+    // retrieve tutorials only if a potential user is loaded - authentication
+    // is finished (success or failed)
+    if(!this.props.authProgress){
+      this.props.getTutorials();
+    }
   }
 
   componentDidUpdate(props, state) {
+    if(props.authProgress !== this.props.authProgress && !this.props.authProgress){
+      // authentication is completed
+      this.props.getTutorials();
+    }
     if(props.message !== this.props.message){
       if(this.props.message.id === 'GET_TUTORIALS_FAIL'){
         // alert(this.props.message.msg);
@@ -183,6 +192,9 @@ class Builder extends Component {
       newTutorial.append('title', this.props.title);
       newTutorial.append('badge', this.props.badge);
       steps.forEach((step, i) => {
+        if(step._id){
+          newTutorial.append(`steps[${i}][_id]`, step._id);
+        }
         newTutorial.append(`steps[${i}][type]`, step.type);
         newTutorial.append(`steps[${i}][headline]`, step.headline);
         newTutorial.append(`steps[${i}][text]`, step.text);
@@ -215,14 +227,22 @@ class Builder extends Component {
   submitNew = () => {
     var newTutorial = this.submit();
     if(newTutorial){
-      axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial)
-        .then(res => {
+      const config = {
+        success: res => {
           var tutorial = res.data.tutorial;
           this.props.history.push(`/tutorial/${tutorial._id}`);
-        })
-        .catch(err => {
+        },
+        error: err => {
           this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen des Tutorials. Versuche es noch einmal.`, type: 'error' });
           window.scrollTo(0, 0);
+        }
+      };
+      axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial, config)
+        .then(res => {
+          res.config.success(res);
+        })
+        .catch(err => {
+          err.config.error(err);
         });
     }
   }
@@ -230,14 +250,22 @@ class Builder extends Component {
   submitUpdate = () => {
     var updatedTutorial = this.submit();
     if(updatedTutorial){
-      axios.put(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`, updatedTutorial)
-        .then(res => {
+      const config = {
+        success: res => {
           var tutorial = res.data.tutorial;
           this.props.history.push(`/tutorial/${tutorial._id}`);
-        })
-        .catch(err => {
+        },
+        error: err => {
           this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Ändern des Tutorials. Versuche es noch einmal.`, type: 'error' });
           window.scrollTo(0, 0);
+        }
+      };
+      axios.put(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`, updatedTutorial, config)
+        .then(res => {
+          res.config.success(res);
+        })
+        .catch(err => {
+          err.config.error(err);
         });
     }
   }
@@ -399,6 +427,7 @@ Builder.propTypes = {
   progress: PropTypes.func.isRequired,
   deleteTutorial: PropTypes.func.isRequired,
   resetTutorialBuilder: PropTypes.func.isRequired,
+  tutorialProgress: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
   badge: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
@@ -410,7 +439,8 @@ Builder.propTypes = {
   isProgress: PropTypes.bool.isRequired,
   tutorials: PropTypes.array.isRequired,
   message: PropTypes.object.isRequired,
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  authProgress: PropTypes.bool.isRequired
 };
 
 const mapStateToProps = state => ({
@@ -425,6 +455,7 @@ const mapStateToProps = state => ({
   tutorials: state.tutorial.tutorials,
   message: state.message,
   user: state.auth.user,
+  authProgress: state.auth.progress
 });
 
-export default connect(mapStateToProps, { checkError, readJSON, jsonString, progress, tutorialId, resetTutorialBuilder, getTutorials, resetTutorial, clearMessages, deleteTutorial })(withStyles(styles, { withTheme: true })(withRouter(Builder)));
+export default connect(mapStateToProps, { checkError, readJSON, jsonString, progress, tutorialId, resetTutorialBuilder, getTutorials, resetTutorial, tutorialProgress, clearMessages, deleteTutorial })(withStyles(styles, { withTheme: true })(withRouter(Builder)));

src/components/Tutorial/Tutorial.js

@@ -23,7 +23,7 @@ class Tutorial extends Component {
 
   componentDidMount() {
     this.props.tutorialProgress();
-    // retrieve tutorials only if a potential user is loaded - authentication
+    // retrieve tutorial only if a potential user is loaded - authentication
     // is finished (success or failed)
     if(!this.props.progress){
       this.props.getTutorial(this.props.match.params.tutorialId);

src/components/User/MyBadges.js

@@ -94,13 +94,20 @@ export class MyBadges extends Component {
 
   getBadges = () => {
     this.setState({progress: true});
-    axios.get(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`)
+    const config = {
+      success: res => {
+        this.setState({badges: res.data.badges, progress: false});
+      },
+      error: err => {
+        this.setState({progress: false});
+      }
+    };
+    axios.get(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, config)
     .then(res => {
-      this.setState({badges: res.data.badges, progress: false});
+      res.config.success(res);
     })
     .catch(err => {
-      this.setState({progress: false});
-      console.log(err);
+      err.config.error(err);
     });
   };
 

src/components/Workspace/SaveProject.js

@@ -95,14 +95,22 @@ class SaveProject extends Component {
     if(this.state.projectType === 'gallery'){
       body.description = this.state.description;
     }
-    axios.post(`${process.env.REACT_APP_BLOCKLY_API}/${this.state.projectType}`, body)
-      .then(res => {
+    const config = {
+      success: res => {
         var project = res.data[this.state.projectType];
         this.props.history.push(`/${this.state.projectType}/${project._id}`);
-      })
-      .catch(err => {
+      },
+      error: err => {
         this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Speichern des ${this.state.projectType === 'gallery' ? 'Galerie-':''}Projektes. Versuche es noch einmal.`, type: 'error' });
         window.scrollTo(0, 0);
+      }
+    };
+    axios.post(`${process.env.REACT_APP_BLOCKLY_API}/${this.state.projectType}`, body, config)
+      .then(res => {
+        res.config.success(res);
+      })
+      .catch(err => {
+        err.config.error(err);
       });
   }