From 4f002d8694f4adc535b94f3ffb0bffea4de1a6ae Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Fri, 11 Dec 2020 14:35:24 +0100 Subject: [PATCH] definig success and error callbacks for every private axios request --- src/actions/authActions.js | 63 +++++++++++---------- src/actions/projectActions.js | 64 ++++++++++++++++------ src/actions/tutorialActions.js | 37 ++++++++++--- src/actions/tutorialBuilderActions.js | 3 +- src/components/Project/Project.js | 1 - src/components/Project/ProjectHome.js | 1 - src/components/Tutorial/Builder/Builder.js | 55 +++++++++++++++---- src/components/Tutorial/Tutorial.js | 2 +- src/components/User/MyBadges.js | 15 +++-- src/components/Workspace/SaveProject.js | 16 ++++-- 10 files changed, 179 insertions(+), 78 deletions(-) diff --git a/src/actions/authActions.js b/src/actions/authActions.js index a6dee52..8e97232 100644 --- a/src/actions/authActions.js +++ b/src/actions/authActions.js @@ -44,7 +44,6 @@ export const loadUser = () => (dispatch) => { res.config.success(res); }) .catch(err => { - console.log(err); err.config.error(err); }); }; @@ -82,7 +81,6 @@ export const login = ({ email, password }) => (dispatch) => { dispatch(returnSuccess(res.data.message, res.status, 'LOGIN_SUCCESS')); }) .catch(err => { - console.log(err); dispatch(returnErrors(err.response.data.message, err.response.status, 'LOGIN_FAIL')); dispatch({ type: LOGIN_FAIL @@ -101,51 +99,59 @@ export const login = ({ email, password }) => (dispatch) => { // Connect to MyBadges-Account export const connectMyBadges = ({ username, password }) => (dispatch, getState) => { - // Headers const config = { - headers: { - 'Content-Type': 'application/json' + success: res => { + var user = getState().auth.user; + user.badge = res.data.account; + user.badges = res.data.badges; + dispatch({ + type: MYBADGES_CONNECT, + payload: user + }); + dispatch(returnSuccess(res.data.message, res.status, 'MYBADGES_CONNECT_SUCCESS')); + }, + error: err => { + dispatch(returnErrors(err.response.data.message, err.response.status, 'MYBADGES_CONNECT_FAIL')); } }; // Request Body const body = JSON.stringify({ username, password }); axios.post(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, body, config) .then(res => { - var user = getState().auth.user; - user.badge = res.data.account; - user.badges = res.data.badges; - dispatch({ - type: MYBADGES_CONNECT, - payload: user - }); - dispatch(returnSuccess(res.data.message, res.status, 'MYBADGES_CONNECT_SUCCESS')); + res.config.success(res); }) .catch(err => { - dispatch(returnErrors(err.response.data.message, err.response.status, 'MYBADGES_CONNECT_FAIL')); + if(err.response && err.response.status !== 401){ + err.config.error(err); + } }); }; // Disconnect MyBadges-Account export const disconnectMyBadges = () => (dispatch, getState) => { - // Headers const config = { - headers: { - 'Content-Type': 'application/json' + success: res => { + var user = getState().auth.user; + user.badge = null; + user.badges = null; + dispatch({ + type: MYBADGES_DISCONNECT, + payload: user + }); + dispatch(returnSuccess(res.data.message, res.status, 'MYBADGES_DISCONNECT_SUCCESS')); + }, + error: err => { + dispatch(returnErrors(err.response.data.message, err.response.status, 'MYBADGES_DISCONNECT_FAIL')); } }; - axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, config) + axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, {}, config) .then(res => { - var user = getState().auth.user; - user.badge = null; - user.badges = null; - dispatch({ - type: MYBADGES_DISCONNECT, - payload: user - }); - dispatch(returnSuccess(res.data.message, res.status, 'MYBADGES_DISCONNECT_SUCCESS')); + res.config.success(res); }) .catch(err => { - dispatch(returnErrors(err.response.data.message, err.response.status, 'MYBADGES_DISCONNECT_FAIL')); + if(err.response && err.response.status !== 401){ + err.config.error(err); + } }); }; @@ -189,8 +195,7 @@ export const logout = () => (dispatch) => { res.config.success(res); }) .catch(err => { - console.log(err); - if(err.response.status !== 401){ + if(err.response && err.response.status !== 401){ err.config.error(err); } }); diff --git a/src/actions/projectActions.js b/src/actions/projectActions.js index 8ab01cf..149584d 100644 --- a/src/actions/projectActions.js +++ b/src/actions/projectActions.js @@ -21,8 +21,8 @@ export const setDescription = (description) => (dispatch) => { export const getProject = (type, id) => (dispatch) => { dispatch({type: PROJECT_PROGRESS}); dispatch(setType(type)); - axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`) - .then(res => { + const config = { + success: res => { var data = type === 'share' ? 'content' : type; var project = res.data[data]; if(project){ @@ -41,19 +41,27 @@ export const getProject = (type, id) => (dispatch) => { dispatch({type: PROJECT_PROGRESS}); dispatch(returnErrors(res.data.message, res.status, 'PROJECT_EMPTY')); } - }) - .catch(err => { + }, + error: err => { if(err.response){ dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_PROJECT_FAIL')); } dispatch({type: PROJECT_PROGRESS}); + } + }; + axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, config) + .then(res => { + res.config.success(res); + }) + .catch(err => { + err.config.error(err); }); }; export const getProjects = (type) => (dispatch) => { dispatch({type: PROJECT_PROGRESS}); - axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}`) - .then(res => { + const config = { + success: res => { var data = type === 'project' ? 'projects' : 'galleries'; var projects = res.data[data]; dispatch({ @@ -62,12 +70,20 @@ export const getProjects = (type) => (dispatch) => { }); dispatch({type: PROJECT_PROGRESS}); dispatch(returnSuccess(res.data.message, res.status)); - }) - .catch(err => { + }, + error: err => { if(err.response){ dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_PROJECTS_FAIL')); } dispatch({type: PROJECT_PROGRESS}); + } + }; + axios.get(`${process.env.REACT_APP_BLOCKLY_API}/${type}`, config) + .then(res => { + res.config.success(res); + }) + .catch(err => { + err.config.error(err); }); }; @@ -81,8 +97,8 @@ export const updateProject = (type, id) => (dispatch, getState) => { if(type==='gallery'){ body.description = project.description; } - axios.put(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, body) - .then(res => { + const config = { + success: res => { var project = res.data[type]; var projects = getState().project.projects; var index = projects.findIndex(res => res._id === project._id); @@ -96,8 +112,8 @@ export const updateProject = (type, id) => (dispatch, getState) => { } else { dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_UPDATE_SUCCESS')); } - }) - .catch(err => { + }, + error: err => { if(err.response){ if(type === 'project'){ dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_UPDATE_FAIL')); @@ -105,13 +121,21 @@ export const updateProject = (type, id) => (dispatch, getState) => { dispatch(returnErrors(err.response.data.message, err.response.status, 'GALLERY_UPDATE_FAIL')); } } + } + }; + axios.put(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, body, config) + .then(res => { + res.config.success(res); + }) + .catch(err => { + err.config.error(err); }); }; export const deleteProject = (type, id) => (dispatch, getState) => { var project = getState().project; - axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`) - .then(res => { + const config = { + success: res => { var projects = getState().project.projects; var index = projects.findIndex(res => res._id === id); projects.splice(index, 1) @@ -124,10 +148,18 @@ export const deleteProject = (type, id) => (dispatch, getState) => { } else { dispatch(returnSuccess(res.data.message, res.status, 'GALLERY_DELETE_SUCCESS')); } + }, + error: err => { + dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_DELETE_FAIL')); + } + }; + axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/${type}/${id}`, config) + .then(res => { + res.config.success(res); }) .catch(err => { - if(err.response){ - dispatch(returnErrors(err.response.data.message, err.response.status, 'PROJECT_DELETE_FAIL')); + if(err.response && err.response.status !== 401){ + err.config.error(err); } }); }; diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js index 426317f..ee120ca 100644 --- a/src/actions/tutorialActions.js +++ b/src/actions/tutorialActions.js @@ -12,6 +12,7 @@ export const getTutorial = (id) => (dispatch, getState) => { axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`) .then(res => { var tutorial = res.data.tutorial; + console.log('status', getState().tutorial.status); existingTutorial(tutorial, getState().tutorial.status).then(status => { console.log('progress',getState().auth.progress); console.log('status'); @@ -19,6 +20,7 @@ export const getTutorial = (id) => (dispatch, getState) => { type: TUTORIAL_SUCCESS, payload: status }); + console.log('eins'); dispatch(updateStatus(status)); dispatch({ type: GET_TUTORIAL, @@ -46,6 +48,7 @@ export const getTutorials = () => (dispatch, getState) => { type: TUTORIAL_SUCCESS, payload: status }); + console.log('zwei'); dispatch(updateStatus(status)); dispatch({ type: GET_TUTORIALS, @@ -64,8 +67,8 @@ export const getTutorials = () => (dispatch, getState) => { }; export const assigneBadge = (id) => (dispatch, getState) => { - axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge/${id}`) - .then(res => { + const config = { + success: res => { var badge = res.data.badge; var user = getState().auth.user; user.badges.push(badge._id); @@ -74,10 +77,18 @@ export const assigneBadge = (id) => (dispatch, getState) => { payload: user }); dispatch(returnSuccess(badge, res.status, 'ASSIGNE_BADGE_SUCCESS')); + }, + error: err => { + dispatch(returnErrors(err.response.data.message, err.response.status, 'ASSIGNE_BADGE_FAIL')); + } + }; + axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge/${id}`, {}, config) + .then(res => { + res.config.success(res); }) .catch(err => { - if(err.response){ - dispatch(returnErrors(err.response.data.message, err.response.status, 'ASSIGNE_BADGE_FAIL')); + if(err.response && err.response.status !== 401){ + err.config.error(err); } }); }; @@ -103,8 +114,8 @@ export const updateStatus = (status) => (dispatch, getState) => { export const deleteTutorial = (id) => (dispatch, getState) => { var tutorial = getState().tutorial; var id = getState().builder.id; - axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`) - .then(res => { + const config = { + success: res => { var tutorials = tutorial.tutorials; var index = tutorials.findIndex(res => res._id === id); tutorials.splice(index, 1) @@ -113,10 +124,18 @@ export const deleteTutorial = (id) => (dispatch, getState) => { payload: tutorials }); dispatch(returnSuccess(res.data.message, res.status, 'TUTORIAL_DELETE_SUCCESS')); + }, + error: err => { + dispatch(returnErrors(err.response.data.message, err.response.status, 'TUTORIAL_DELETE_FAIL')); + } + }; + axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`, config) + .then(res => { + res.config.success(res); }) .catch(err => { - if(err.response){ - dispatch(returnErrors(err.response.data.message, err.response.status, 'TUTORIAL_DELETE_FAIL')); + if(err.response && err.response.status !== 401){ + err.config.error(err); } }); }; @@ -152,6 +171,7 @@ export const tutorialCheck = (status, step) => (dispatch, getState) => { type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR, payload: tutorialsStatus }); + console.log('drei'); dispatch(updateStatus(tutorialsStatus)); dispatch(tutorialChange()); dispatch(returnSuccess('','','TUTORIAL_CHECK_SUCCESS')); @@ -208,6 +228,7 @@ const existingTutorials = (tutorials, status) => new Promise(function(resolve, r }); const existingTutorial = (tutorial, status) => new Promise(function(resolve, reject){ + console.log('st',status); var tutorialsId = tutorial._id; var statusIndex = status.findIndex(status => status._id === tutorialsId); if (statusIndex > -1) { diff --git a/src/actions/tutorialBuilderActions.js b/src/actions/tutorialBuilderActions.js index 356e8fa..d7448f3 100644 --- a/src/actions/tutorialBuilderActions.js +++ b/src/actions/tutorialBuilderActions.js @@ -254,7 +254,6 @@ export const resetTutorial = () => (dispatch, getState) => { dispatch(tutorialBadge('')); var steps = [ { - id: 1, type: 'instruction', headline: '', text: '', @@ -282,7 +281,7 @@ export const readJSON = (json) => (dispatch, getState) => { // accept only valid attributes var steps = json.steps.map((step, i) => { var object = { - // id: step.id, + _id: step._id, type: step.type, headline: step.headline, text: step.text diff --git a/src/components/Project/Project.js b/src/components/Project/Project.js index a3a2403..7b16310 100644 --- a/src/components/Project/Project.js +++ b/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'; diff --git a/src/components/Project/ProjectHome.js b/src/components/Project/ProjectHome.js index 07e559b..06c0c2b 100644 --- a/src/components/Project/ProjectHome.js +++ b/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'; diff --git a/src/components/Tutorial/Builder/Builder.js b/src/components/Tutorial/Builder/Builder.js index 78c7657..ac773f6 100644 --- a/src/components/Tutorial/Builder/Builder.js +++ b/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))); diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js index 189386c..edec484 100644 --- a/src/components/Tutorial/Tutorial.js +++ b/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); diff --git a/src/components/User/MyBadges.js b/src/components/User/MyBadges.js index 4d7dc47..0d55d4f 100644 --- a/src/components/User/MyBadges.js +++ b/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); }); }; diff --git a/src/components/Workspace/SaveProject.js b/src/components/Workspace/SaveProject.js index 0a46cf0..1a9ff3d 100644 --- a/src/components/Workspace/SaveProject.js +++ b/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); }); }