From 1821ac4e40281fbe5ec59dc44a37478c5b63ae75 Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Fri, 11 Dec 2020 13:06:38 +0100 Subject: [PATCH 01/16] tutorial status is stored in user account if exists or in local storage --- src/actions/authActions.js | 46 ++++++++++++++++++++++++- src/actions/tutorialActions.js | 33 ++++++++++++++++-- src/actions/types.js | 1 + src/components/Tutorial/Tutorial.js | 24 +++++++++---- src/components/Tutorial/TutorialHome.js | 22 +++++++++--- src/reducers/authReducer.js | 2 +- src/reducers/tutorialReducer.js | 34 +++++++++++------- 7 files changed, 133 insertions(+), 29 deletions(-) diff --git a/src/actions/authActions.js b/src/actions/authActions.js index 7cdd1c0..a6dee52 100644 --- a/src/actions/authActions.js +++ b/src/actions/authActions.js @@ -1,4 +1,4 @@ -import { MYBADGES_CONNECT, MYBADGES_DISCONNECT, USER_LOADED, USER_LOADING, AUTH_ERROR, LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, LOGOUT_FAIL, REFRESH_TOKEN_SUCCESS } from '../actions/types'; +import { MYBADGES_CONNECT, MYBADGES_DISCONNECT, GET_STATUS, USER_LOADED, USER_LOADING, AUTH_ERROR, LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, LOGOUT_FAIL, REFRESH_TOKEN_SUCCESS } from '../actions/types'; import axios from 'axios'; import { returnErrors, returnSuccess } from './messageActions' @@ -12,6 +12,10 @@ export const loadUser = () => (dispatch) => { }); const config = { success: res => { + dispatch({ + type: GET_STATUS, + payload: res.data.user.status + }); dispatch({ type: USER_LOADED, payload: res.data.user @@ -21,6 +25,15 @@ export const loadUser = () => (dispatch) => { if(err.response){ dispatch(returnErrors(err.response.data.message, err.response.status)); } + console.log('auth failed'); + var status = []; + if (window.localStorage.getItem('status')) { + status = JSON.parse(window.localStorage.getItem('status')); + } + dispatch({ + type: GET_STATUS, + payload: status + }); dispatch({ type: AUTH_ERROR }); @@ -31,6 +44,7 @@ export const loadUser = () => (dispatch) => { res.config.success(res); }) .catch(err => { + console.log(err); err.config.error(err); }); }; @@ -61,13 +75,26 @@ export const login = ({ email, password }) => (dispatch) => { type: LOGIN_SUCCESS, payload: res.data }); + dispatch({ + type: GET_STATUS, + payload: res.data.user.status + }); 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 }); + var status = []; + if (window.localStorage.getItem('status')) { + status = JSON.parse(window.localStorage.getItem('status')); + } + dispatch({ + type: GET_STATUS, + payload: status + }); }); }; @@ -130,6 +157,14 @@ export const logout = () => (dispatch) => { dispatch({ type: LOGOUT_SUCCESS }); + var status = []; + if (window.localStorage.getItem('status')) { + status = JSON.parse(window.localStorage.getItem('status')); + } + dispatch({ + type: GET_STATUS, + payload: status + }); dispatch(returnSuccess(res.data.message, res.status, 'LOGOUT_SUCCESS')); clearTimeout(logoutTimerId); }, @@ -138,6 +173,14 @@ export const logout = () => (dispatch) => { dispatch({ type: LOGOUT_FAIL }); + var status = []; + if (window.localStorage.getItem('status')) { + status = JSON.parse(window.localStorage.getItem('status')); + } + dispatch({ + type: GET_STATUS, + payload: status + }); clearTimeout(logoutTimerId); } }; @@ -146,6 +189,7 @@ export const logout = () => (dispatch) => { res.config.success(res); }) .catch(err => { + console.log(err); if(err.response.status !== 401){ err.config.error(err); } diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js index 8983da9..426317f 100644 --- a/src/actions/tutorialActions.js +++ b/src/actions/tutorialActions.js @@ -3,21 +3,28 @@ import { MYBADGES_DISCONNECT, TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TU import axios from 'axios'; import { returnErrors, returnSuccess } from './messageActions'; -export const getTutorial = (id) => (dispatch, getState) => { +export const tutorialProgress = () => (dispatch) => { dispatch({type: TUTORIAL_PROGRESS}); +}; + + +export const getTutorial = (id) => (dispatch, getState) => { axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`) .then(res => { var tutorial = res.data.tutorial; existingTutorial(tutorial, getState().tutorial.status).then(status => { + console.log('progress',getState().auth.progress); + console.log('status'); dispatch({ type: TUTORIAL_SUCCESS, payload: status }); - dispatch({type: TUTORIAL_PROGRESS}); + dispatch(updateStatus(status)); dispatch({ type: GET_TUTORIAL, payload: tutorial }); + dispatch({type: TUTORIAL_PROGRESS}); dispatch(returnSuccess(res.data.message, res.status)); }); }) @@ -30,7 +37,6 @@ export const getTutorial = (id) => (dispatch, getState) => { }; export const getTutorials = () => (dispatch, getState) => { - dispatch({type: TUTORIAL_PROGRESS}); axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`) .then(res => { var tutorials = res.data.tutorials; @@ -40,6 +46,7 @@ export const getTutorials = () => (dispatch, getState) => { type: TUTORIAL_SUCCESS, payload: status }); + dispatch(updateStatus(status)); dispatch({ type: GET_TUTORIALS, payload: tutorials @@ -75,6 +82,24 @@ export const assigneBadge = (id) => (dispatch, getState) => { }); }; +export const updateStatus = (status) => (dispatch, getState) => { + if(getState().auth.isAuthenticated){ + // update user account in database - sync with redux store + axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/status`, {status: status}) + .then(res => { + // dispatch(returnSuccess(badge, res.status, 'UPDATE_STATUS_SUCCESS')); + }) + .catch(err => { + if(err.response){ + // dispatch(returnErrors(err.response.data.message, err.response.status, 'UPDATE_STATUS_FAIL')); + } + }); + } else { + // update locale storage - sync with redux store + window.localStorage.setItem('status', JSON.stringify(status)); + } +}; + export const deleteTutorial = (id) => (dispatch, getState) => { var tutorial = getState().tutorial; var id = getState().builder.id; @@ -127,6 +152,7 @@ export const tutorialCheck = (status, step) => (dispatch, getState) => { type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR, payload: tutorialsStatus }); + dispatch(updateStatus(tutorialsStatus)); dispatch(tutorialChange()); dispatch(returnSuccess('','','TUTORIAL_CHECK_SUCCESS')); }; @@ -149,6 +175,7 @@ export const storeTutorialXml = (code) => (dispatch, getState) => { type: TUTORIAL_XML, payload: tutorialsStatus }); + dispatch(updateStatus(tutorialsStatus)); } } }; diff --git a/src/actions/types.js b/src/actions/types.js index b3bff75..99ed6a6 100644 --- a/src/actions/types.js +++ b/src/actions/types.js @@ -23,6 +23,7 @@ export const NAME = 'NAME'; export const TUTORIAL_PROGRESS = 'TUTORIAL_PROGRESS'; export const GET_TUTORIAL = 'GET_TUTORIAL'; export const GET_TUTORIALS = 'GET_TUTORIALS'; +export const GET_STATUS = 'GET_STATUS'; export const TUTORIAL_SUCCESS = 'TUTORIAL_SUCCESS'; export const TUTORIAL_ERROR = 'TUTORIAL_ERROR'; export const TUTORIAL_CHANGE = 'TUTORIAL_CHANGE'; diff --git a/src/components/Tutorial/Tutorial.js b/src/components/Tutorial/Tutorial.js index d86a958..189386c 100644 --- a/src/components/Tutorial/Tutorial.js +++ b/src/components/Tutorial/Tutorial.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { workspaceName } from '../../actions/workspaceActions'; import { clearMessages } from '../../actions/messageActions'; -import { getTutorial, resetTutorial, tutorialStep } from '../../actions/tutorialActions'; +import { getTutorial, resetTutorial, tutorialStep,tutorialProgress } from '../../actions/tutorialActions'; import Breadcrumbs from '../Breadcrumbs'; import StepperHorizontal from './StepperHorizontal'; @@ -22,11 +22,20 @@ import Button from '@material-ui/core/Button'; class Tutorial extends Component { componentDidMount() { - this.props.getTutorial(this.props.match.params.tutorialId); + this.props.tutorialProgress(); + // retrieve tutorials 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); + } } componentDidUpdate(props, state) { - if(this.props.tutorial && !this.props.isLoading && this.props.tutorial._id != this.props.match.params.tutorialId) { + if(props.progress !== this.props.progress && !this.props.progress){ + // authentication is completed + this.props.getTutorial(this.props.match.params.tutorialId); + } + else if(this.props.tutorial && !this.props.isLoading && this.props.tutorial._id != this.props.match.params.tutorialId) { this.props.getTutorial(this.props.match.params.tutorialId); } if(this.props.message.id === 'GET_TUTORIAL_FAIL'){ @@ -89,13 +98,15 @@ Tutorial.propTypes = { resetTutorial: PropTypes.func.isRequired, clearMessages: PropTypes.func.isRequired, tutorialStep: PropTypes.func.isRequired, + tutorialProgress: PropTypes.func.isRequired, workspaceName: PropTypes.func.isRequired, status: PropTypes.array.isRequired, change: PropTypes.number.isRequired, activeStep: PropTypes.number.isRequired, tutorial: PropTypes.object.isRequired, isLoading: PropTypes.bool.isRequired, - message: PropTypes.object.isRequired + message: PropTypes.object.isRequired, + progress: PropTypes.bool.isRequired }; const mapStateToProps = state => ({ @@ -104,7 +115,8 @@ const mapStateToProps = state => ({ activeStep: state.tutorial.activeStep, tutorial: state.tutorial.tutorials[0], isLoading: state.tutorial.progress, - message: state.message + message: state.message, + progress: state.auth.progress }); -export default connect(mapStateToProps, { getTutorial, resetTutorial, tutorialStep, clearMessages, workspaceName })(Tutorial); +export default connect(mapStateToProps, { getTutorial, resetTutorial, tutorialStep, tutorialProgress, clearMessages, workspaceName })(Tutorial); diff --git a/src/components/Tutorial/TutorialHome.js b/src/components/Tutorial/TutorialHome.js index 9c7a2ce..42db1a9 100644 --- a/src/components/Tutorial/TutorialHome.js +++ b/src/components/Tutorial/TutorialHome.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import { getTutorials, resetTutorial } from '../../actions/tutorialActions'; +import { getTutorials, resetTutorial, tutorialProgress } from '../../actions/tutorialActions'; import { clearMessages } from '../../actions/messageActions'; import clsx from 'clsx'; @@ -52,10 +52,19 @@ const styles = (theme) => ({ class TutorialHome 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.progress){ + this.props.getTutorials(); + } } componentDidUpdate(props, state) { + if(props.progress !== this.props.progress && !this.props.progress){ + // authentication is completed + this.props.getTutorials(); + } if(this.props.message.id === 'GET_TUTORIALS_FAIL'){ alert(this.props.message.msg); } @@ -120,12 +129,14 @@ class TutorialHome extends Component { TutorialHome.propTypes = { getTutorials: PropTypes.func.isRequired, resetTutorial: PropTypes.func.isRequired, + tutorialProgress: PropTypes.func.isRequired, clearMessages: PropTypes.func.isRequired, status: PropTypes.array.isRequired, change: PropTypes.number.isRequired, tutorials: PropTypes.array.isRequired, isLoading: PropTypes.bool.isRequired, - message: PropTypes.object.isRequired + message: PropTypes.object.isRequired, + progress: PropTypes.bool.isRequired }; const mapStateToProps = state => ({ @@ -133,7 +144,8 @@ const mapStateToProps = state => ({ status: state.tutorial.status, tutorials: state.tutorial.tutorials, isLoading: state.tutorial.progress, - message: state.message + message: state.message, + progress: state.auth.progress }); -export default connect(mapStateToProps, { getTutorials, resetTutorial, clearMessages })(withStyles(styles, { withTheme: true })(TutorialHome)); +export default connect(mapStateToProps, { getTutorials, resetTutorial, clearMessages, tutorialProgress })(withStyles(styles, { withTheme: true })(TutorialHome)); diff --git a/src/reducers/authReducer.js b/src/reducers/authReducer.js index 482af0c..7de6fb8 100644 --- a/src/reducers/authReducer.js +++ b/src/reducers/authReducer.js @@ -5,7 +5,7 @@ const initialState = { token: localStorage.getItem('token'), refreshToken: localStorage.getItem('refreshToken'), isAuthenticated: null, - progress: false, + progress: true, user: null }; diff --git a/src/reducers/tutorialReducer.js b/src/reducers/tutorialReducer.js index 8b91f0f..0e368f8 100644 --- a/src/reducers/tutorialReducer.js +++ b/src/reducers/tutorialReducer.js @@ -1,18 +1,20 @@ -import { TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from '../actions/types'; +import { TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, GET_STATUS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from '../actions/types'; -const initialStatus = () => { - if (window.localStorage.getItem('status')) { - var status = JSON.parse(window.localStorage.getItem('status')); - return status; - } - return []; - // // window.localStorage.getItem('status') does not exist - // return tutorials.map(tutorial => { return { id: tutorial.id, tasks: tutorial.steps.filter(step => step.type === 'task').map(task => { return { id: task.id }; }) }; }); -}; +// +// const initialStatus = () => { +// if(store.getState().auth.user){ +// return store.getState().auth.user.status || [] +// } +// else if (window.localStorage.getItem('status')) { +// var status = JSON.parse(window.localStorage.getItem('status')); +// return status; +// } +// return []; +// }; const initialState = { - status: initialStatus(), + status: [], activeStep: 0, change: 0, tutorials: [], @@ -39,8 +41,14 @@ export default function (state = initialState, action) { case TUTORIAL_SUCCESS: case TUTORIAL_ERROR: case TUTORIAL_XML: - // update locale storage - sync with redux store - window.localStorage.setItem('status', JSON.stringify(action.payload)); + // update store - sync with redux store is implemented outside reducer + // in every dispatch action with the types 'TUTORIAL_SUCCESS','TUTORIAL_ERROR' + // and 'TUTORIAL_XML' the function 'updateStatus' is called + return { + ...state, + status: action.payload + }; + case GET_STATUS: return { ...state, status: action.payload 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 02/16] 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); }); } From 42981a4f11db1313ce4fcd437552660e7965f104 Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Sun, 13 Dec 2020 20:52:23 +0100 Subject: [PATCH 03/16] badge selection --- .env | 1 + package.json | 2 +- src/actions/authActions.js | 1 - src/actions/tutorialBuilderActions.js | 7 +- src/components/Tutorial/Builder/Badge.js | 189 +++++++++++++++++++++ src/components/Tutorial/Builder/Builder.js | 8 +- src/reducers/tutorialBuilderReducer.js | 1 - 7 files changed, 201 insertions(+), 8 deletions(-) create mode 100644 src/components/Tutorial/Builder/Badge.js diff --git a/.env b/.env index 3ba890f..81b9303 100644 --- a/.env +++ b/.env @@ -3,6 +3,7 @@ REACT_APP_BOARD=sensebox-mcu REACT_APP_BLOCKLY_API=https://api.blockly.sensebox.de REACT_APP_MYBADGES=https://mybadges.org +REACT_APP_MYBADGES_API=https://mybadges.org/api/v1 # in days REACT_APP_SHARE_LINK_EXPIRES=30 diff --git a/package.json b/package.json index 60a336a..4a234e7 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ }, "scripts": { "start": "react-scripts start", - "dev": "set \"REACT_APP_BLOCKLY_API=http://localhost:8080\" && npm start", + "dev": "set \"REACT_APP_BLOCKLY_API=http://localhost:8080\" && set \"REACT_APP_MYBADGES_API=http://localhost:3001/api/v1\"&& npm start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" diff --git a/src/actions/authActions.js b/src/actions/authActions.js index 8e97232..b5d6531 100644 --- a/src/actions/authActions.js +++ b/src/actions/authActions.js @@ -25,7 +25,6 @@ export const loadUser = () => (dispatch) => { if(err.response){ dispatch(returnErrors(err.response.data.message, err.response.status)); } - console.log('auth failed'); var status = []; if (window.localStorage.getItem('status')) { status = JSON.parse(window.localStorage.getItem('status')); diff --git a/src/actions/tutorialBuilderActions.js b/src/actions/tutorialBuilderActions.js index d7448f3..25f27b0 100644 --- a/src/actions/tutorialBuilderActions.js +++ b/src/actions/tutorialBuilderActions.js @@ -191,6 +191,9 @@ export const setSubmitError = () => (dispatch, getState) => { if (builder.title === '') { dispatch(setError(undefined, 'title')); } + if (builder.title === null) { + dispatch(setError(undefined, 'badge')); + } var type = builder.steps.map((step, i) => { // media and xml are directly checked for errors in their components and // therefore do not have to be checked again @@ -230,7 +233,7 @@ export const setSubmitError = () => (dispatch, getState) => { export const checkError = () => (dispatch, getState) => { dispatch(setSubmitError()); var error = getState().builder.error; - if (error.id || error.title || error.type) { + if (error.id || error.title || error.badge ||error.type) { return true; } for (var i = 0; i < error.steps.length; i++) { @@ -251,7 +254,7 @@ export const progress = (inProgress) => (dispatch) => { export const resetTutorial = () => (dispatch, getState) => { dispatch(jsonString('')); dispatch(tutorialTitle('')); - dispatch(tutorialBadge('')); + dispatch(tutorialBadge(undefined)); var steps = [ { type: 'instruction', diff --git a/src/components/Tutorial/Builder/Badge.js b/src/components/Tutorial/Builder/Badge.js new file mode 100644 index 0000000..a2c08c5 --- /dev/null +++ b/src/components/Tutorial/Builder/Badge.js @@ -0,0 +1,189 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { tutorialBadge, deleteProperty, setError, deleteError } from '../../../actions/tutorialBuilderActions'; + +import axios from 'axios'; + +import { withStyles } from '@material-ui/core/styles'; +import Switch from '@material-ui/core/Switch'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormHelperText from '@material-ui/core/FormHelperText'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import IconButton from '@material-ui/core/IconButton'; +import OutlinedInput from '@material-ui/core/OutlinedInput'; +import InputLabel from '@material-ui/core/InputLabel'; +import FormControl from '@material-ui/core/FormControl'; + +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faTimes } from "@fortawesome/free-solid-svg-icons"; + +const styles = (theme) => ({ + errorColor: { + color: `${theme.palette.error.dark} !important` + }, + errorColorShrink: { + color: `rgba(0, 0, 0, 0.54) !important` + }, + errorBorder: { + borderColor: `${theme.palette.error.dark} !important` + } +}); + +class Badge extends Component { + + constructor(props){ + super(props); + this.state={ + checked: props.badge ? true : false, + badgeName: '', + filteredBadges: [], + badges: [] + }; + } + + componentDidMount(){ + this.getBadges(); + } + + componentDidUpdate(props){ + if(props.badge !== this.props.badge){ + this.setState({ checked: this.props.badge !== undefined ? true : false, badgeName: this.props.badge ? this.state.badges.filter(badge => badge._id === this.props.badge)[0].name : '' }); + } + } + + getBadges = () => { + axios.get(`${process.env.REACT_APP_MYBADGES_API}/badge`) + .then(res => { + this.setState({badges: res.data.badges, badgeName: this.props.badge ? res.data.badges.filter(badge => badge._id === this.props.badge)[0].name : '' }); + }) + .catch(err => { + console.log(err); + }); + }; + + deleteBadge = () => { + this.setState({ filteredBadges: [], badgeName: '' }); + this.props.tutorialBadge(null); + this.props.setError(this.props.index, 'badge'); + }; + + setBadge = (badge) => { + this.setState({ filteredBadges: [] }); + this.props.tutorialBadge(badge._id); + this.props.deleteError(this.props.index, 'badge'); + }; + + onChange = e => { + this.setState({ badgeName: e.target.value }); + }; + + onChangeBadge = e => { + if(e.target.value && this.props.badge === null){ + var filteredBadges = this.state.badges.filter(badge => new RegExp(e.target.value, 'i').test(badge.name)); + if(filteredBadges.length < 1){ + filteredBadges = ['Keine Übereinstimmung gefunden.']; + } + this.setState({filteredBadges: filteredBadges}); + } + else { + this.setState({filteredBadges: []}); + } + }; + + onChangeSwitch = (value) => { + var oldValue = this.state.checked; + this.setState({checked: value}); + if(oldValue !== value){ + if(value){ + this.props.setError(this.props.index, 'badge'); + this.props.tutorialBadge(null); + } else { + this.props.deleteError(this.props.index, 'badge'); + this.props.tutorialBadge(undefined); + } + } + } + + render() { + return ( +
+ this.onChangeSwitch(e.target.checked)} + color="primary" + /> + } + /> + {this.state.checked ? +
+ + + {'Badge'} + + this.onChange(e)} + onInput={(e) => this.onChangeBadge(e)} + fullWidth={true} + endAdornment={ + + + + } + /> + {this.props.error && this.state.filteredBadges.length === 0 ? + Wähle ein Badge aus. + : null} + + + {this.state.filteredBadges.map((badge, i) => ( + badge === 'Keine Übereinstimmung gefunden.' ? + + {badge} + + : + {this.setBadge(badge)}} style={{border: '1px solid rgba(0, 0, 0, 0.23)', borderRadius: '25px'}}> + {`${badge.name}`} + + ))} + +
+ : null} +
+ ); + }; +} + +Badge.propTypes = { + tutorialBadge: PropTypes.func.isRequired, + deleteProperty: PropTypes.func.isRequired, + setError: PropTypes.func.isRequired, + deleteError: PropTypes.func.isRequired, + badge: PropTypes.string.isRequired +}; + +const mapStateToProps = state => ({ + badge: state.builder.badge, + change: state.builder.change +}); + + +export default connect(mapStateToProps, { tutorialBadge, deleteProperty, setError, deleteError })(withStyles(styles, {withTheme: true})(Badge)); diff --git a/src/components/Tutorial/Builder/Builder.js b/src/components/Tutorial/Builder/Builder.js index ac773f6..bd4e8a0 100644 --- a/src/components/Tutorial/Builder/Builder.js +++ b/src/components/Tutorial/Builder/Builder.js @@ -12,6 +12,7 @@ import { saveAs } from 'file-saver'; import { detectWhitespacesAndReturnReadableResult } from '../../../helpers/whitespace'; import Breadcrumbs from '../../Breadcrumbs'; +import Badge from './Badge'; import Textfield from './Textfield'; import Step from './Step'; import Dialog from '../../Dialog'; @@ -190,7 +191,9 @@ 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); + if(this.props.badge){ + newTutorial.append('badge', this.props.badge); + } steps.forEach((step, i) => { if(step._id){ newTutorial.append(`steps[${i}][_id]`, step._id); @@ -348,7 +351,7 @@ class Builder extends Component { : null} {/* */} - + {this.props.steps.map((step, i) => @@ -435,7 +438,6 @@ Builder.propTypes = { change: PropTypes.number.isRequired, error: PropTypes.object.isRequired, json: PropTypes.string.isRequired, - badge: PropTypes.string.isRequired, isProgress: PropTypes.bool.isRequired, tutorials: PropTypes.array.isRequired, message: PropTypes.object.isRequired, diff --git a/src/reducers/tutorialBuilderReducer.js b/src/reducers/tutorialBuilderReducer.js index cad4c2e..bfbe654 100644 --- a/src/reducers/tutorialBuilderReducer.js +++ b/src/reducers/tutorialBuilderReducer.js @@ -5,7 +5,6 @@ const initialState = { progress: false, json: '', title: '', - badge: '', id: '', steps: [ { From 7d1d2409e48cf6daa7776f374575dece5f84828f Mon Sep 17 00:00:00 2001 From: Mario Date: Mon, 14 Dec 2020 08:51:31 +0100 Subject: [PATCH 04/16] add first translations --- src/components/Blockly/msg/de.js | 147 ++++++++++++++++++ src/components/Blockly/msg/en.js | 83 ++++++++++ src/components/Blockly/toolbox/Toolbox.js | 16 +- src/components/NotFound.js | 19 +-- src/components/Settings/LanguageSelector.js | 5 +- src/components/Settings/RenderSelector.js | 4 +- src/components/Settings/Settings.js | 8 +- src/components/Tutorial/Assessment.js | 3 +- src/components/Tutorial/Hardware.js | 6 +- src/components/Tutorial/HintTutorialExists.js | 3 +- src/components/Workspace/Compile.js | 7 +- src/components/Workspace/DeleteProject.js | 11 +- src/components/Workspace/DownloadProject.js | 4 +- src/components/Workspace/OpenProject.js | 4 +- src/components/Workspace/ResetWorkspace.js | 4 +- src/components/Workspace/SaveProject.js | 43 ++--- src/components/Workspace/Screenshot.js | 2 +- src/components/Workspace/ShareProject.js | 35 +++-- src/components/Workspace/TrashcanButtons.js | 18 +-- src/components/Workspace/WorkspaceName.js | 25 +-- 20 files changed, 344 insertions(+), 103 deletions(-) diff --git a/src/components/Blockly/msg/de.js b/src/components/Blockly/msg/de.js index 2dec197..cca4e12 100644 --- a/src/components/Blockly/msg/de.js +++ b/src/components/Blockly/msg/de.js @@ -800,4 +800,151 @@ Blockly.Msg.senseBox_mqtt_password = "Passwort"; Blockly.Msg.sensebox_mqtt_subscribe = "Subscribe to Feed" Blockly.Msg.senseBox_mqtt_publish = "Sende an Feed/Topic"; + + +/** + * Typed Variable Modal + * + */ + + +Blockly.Msg.TYPED_VAR_MODAL_CONFIRM_BUTTON = "Ok"; +Blockly.Msg.TYPED_VAR_MODAL_VARIABLE_NAME_LABEL = "Variablen Name: "; +Blockly.Msg.TYPED_VAR_MODAL_TYPES_LABEL = "Variable Typen"; +Blockly.Msg.TYPED_VAR_MODAL_CANCEL_BUTTON = "Abbrechen"; +Blockly.Msg.TYPED_VAR_MODAL_TITLE = "Erstelle Variable"; +Blockly.Msg.TYPED_VAR_MODAL_INVALID_NAME = "Der Name ist ungültig, bitte versuche einen anderen." + +/** + * Add Translation for Blocks above + * --------------------------------------------------------------- + * Add Translation for the UI below + */ + +/** + * Toolbox + */ +Blockly.Msg.toolbox_sensors = "Sensoren"; +Blockly.Msg.toolbox_logic = "Logik"; +Blockly.Msg.toolbox_loops = "Schleifen"; +Blockly.Msg.toolbox_math = "Mathematik"; +Blockly.Msg.toolbox_io = "Eingang/Ausgang"; +Blockly.Msg.toolbox_time = "Zeit"; +Blockly.Msg.toolbox_functions = "Funktionen"; +Blockly.Msg.toolbox_variables = "Variablen"; + +/** + * Tooltips + * + */ + +Blockly.Msg.tooltip_compile_code = "Code kompilieren" +Blockly.Msg.tooltip_save_blocks = "Blöcke speichern"; +Blockly.Msg.tooltip_open_blocks = "Blöcke öffnen"; +Blockly.Msg.tooltip_screenshot = "Screenshot erstellen"; +Blockly.Msg.tooltip_clear_workspace = "Workspace zurücksetzen"; +Blockly.Msg.tooltip_share_blocks = "Blöcke teilen"; +Blockly.Msg.tooltip_show_code = "Code anzeigen"; +Blockly.Msg.tooltip_hide_code = "Code ausblenden" +Blockly.Msg.tooltip_delete_project = "Projekt löschen" +Blockly.Msg.tooltip_project_name = "Name des Projektes" +Blockly.Msg.tooltip_download_project = "Projekt herunterladen" +Blockly.Msg.tooltip_open_project = "Projekt öffnen" +Blockly.Msg.tooltip_update_project = "Projekt aktualisieren" +Blockly.Msg.tooltip_save_project = "Projekt speichern" +Blockly.Msg.tooltip_create_project = "Projekt erstellen" +Blockly.Msg.tooltip_share_project = "Projekt teilen" +Blockly.Msg.tooltip_reset_workspace = "Workspace zurücksetzen" +Blockly.Msg.tooltip_copy_link = "Link kopieren" +Blockly.Msg.tooltip_trashcan_hide = 'gelöschte Blöcke ausblenden' +Blockly.Msg.tooltip_trashcan_delete = 'Blöcke endgültig löschen' +Blockly.Msg.tooltip_project_title = "Titel des Projektes" + + +/** + * Messages + * + */ + +Blockly.Msg.messages_delete_project_failed = "Fehler beim Löschen des Projektes. Versuche es noch einmal." +Blockly.Msg.messages_reset_workspace_success = "Das Projekt wurde erfolgreich zurückgesetzt" +Blockly.Msg.messages_PROJECT_UPDATE_SUCCESS = "Das Projekt wurde erfolgreich aktualisiert." +Blockly.Msg.messages_GALLERY_UPDATE_SUCCESS = "Das Galerie-Projekt wurde erfolgreich aktualisiert." +Blockly.Msg.messages_PROJECT_UPDATE_FAIL = "Fehler beim Aktualisieren des Projektes. Versuche es noch einmal." +Blockly.Msg.messages_GALLERY_UPDATE_FAIL = "Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal." +Blockly.Msg.messages_gallery_save_fail_1 = "Fehler beim Speichern des " +Blockly.Msg.messages_gallery_save_fail_2 = "Projektes. Versuche es noch einmal." +Blockly.Msg.messages_SHARE_SUCCESS = 'Programm teilen' +Blockly.Msg.messages_SHARE_FAIL = "Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal." +Blockly.Msg.messages_copylink_success = 'Link erfolgreich in Zwischenablage gespeichert.' +Blockly.Msg.messages_rename_success_01 = 'Das Projekt wurde erfolgreich in ' +Blockly.Msg.messages_rename_success_02 = 'umbenannt.' +/** + * Share Dialog + */ + +Blockly.Msg.sharedialog_headline = "Dein Link wurde erstellt."; +Blockly.Msg.sharedialog_text = "Über den folgenden Link kannst du dein Programm teilen."; + +/** + * Project rename Dialog + */ + +Blockly.Msg.renamedialog_headline = "Projekt benennen"; +Blockly.Msg.renamedialog_text = "Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Bestätigen'." + +/** + * Compile Dialog + * + */ + +Blockly.Msg.compiledialog_headline = "Fehler" +Blockly.Msg.compiledialog_text = "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut" + +/** + * Buttons + * + */ + +Blockly.Msg.button_cancel = "Abbrechen"; +Blockly.Msg.button_close = "Schließen"; +Blockly.Msg.button_accept = "Bestätigen"; +Blockly.Msg.button_compile = "Kompilieren"; +Blockly.Msg.button_create_variableCreate = "Erstelle Variable"; +Blockly.Msg.button_back = "Zurück" + + +/** + * + */ + +Blockly.Msg.filename = "Dateiname"; +Blockly.Msg.projectname = "Projektname"; + +/** + * Settings + */ +Blockly.Msg.settings_head = "Einstellungen" +Blockly.Msg.settings_language = "Sprache" +Blockly.Msg.settings_language_de = "Deutsch" +Blockly.Msg.settings_language_en = "Englisch" +Blockly.Msg.settings_renderer_text = "Der Renderer bestimmt das aussehen der Blöcke" + +/** + * 404 + */ + +Blockly.Msg.notfound_head = "Die von Ihnen angeforderte Seite kann nicht gefunden werden." +Blockly.Msg.notfound_text = "Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar." + + +/** + * Tutorials + */ + +Blockly.Msg.tutorials_assessment_task = "Aufgabe" +Blockly.Msg.tutorials_hardware_head = "Für die Umsetzung benötigst du folgende Hardware:" +Blockly.Msg.tutorials_hardware_moreInformation = "Weitere Informationen zur Hardware-Komponente findest du" +Blockly.Msg.tutorials_hardware_here = "hier" + export const De = Blockly.Msg; diff --git a/src/components/Blockly/msg/en.js b/src/components/Blockly/msg/en.js index 696d68e..6479613 100644 --- a/src/components/Blockly/msg/en.js +++ b/src/components/Blockly/msg/en.js @@ -782,4 +782,87 @@ Blockly.Msg.senseBox_mqtt_password = "Password"; Blockly.Msg.sensebox_mqtt_subscribe = "Subscribe to Feed" Blockly.Msg.senseBox_mqtt_publish = "Publish to Feed/Topic"; + +/** + * Add Translation for Blocks above + * --------------------------------------------------------------- + * Add Translation for the UI below + */ + + +/** + * Toolbox + */ +Blockly.Msg.toolbox_sensors = "Sensors"; +Blockly.Msg.toolbox_logic = "Logic"; +Blockly.Msg.toolbox_loops = "Loops"; +Blockly.Msg.toolbox_math = "Math"; +Blockly.Msg.toolbox_io = "Input/Output"; +Blockly.Msg.toolbox_time = "Time"; +Blockly.Msg.toolbox_functions = "Functions"; +Blockly.Msg.toolbox_variables = "Variables"; + + +/** + * Tooltips + * + */ + +Blockly.Msg.tooltip_compile_code = "Compile Code" +Blockly.Msg.tooltip_save_blocks = "Save Blocks"; +Blockly.Msg.tooltip_open_blocks = "Open Blocks"; +Blockly.Msg.tooltip_screenshot = "Download Screenshot"; +Blockly.Msg.tooltip_clear_workspace = "Reset Workspace"; +Blockly.Msg.tooltip_share_blocks = "Share Blocks"; +Blockly.Msg.tooltip_show_code = "Show Code"; +Blockly.Msg.tooltip_hide_code = "Hide Code" + +Blockly.Msg.tooltip_project_name = "Projectname" +/** + * Share Dialog + */ + +Blockly.Msg.sharedialog_headline = "Your Share-Link was created"; +Blockly.Msg.sharedialog_text = "Share your project with the following link"; + +/** + * Project rename Dialog + */ + +Blockly.Msg.renamedialog_headline = "Rename Project"; +Blockly.Msg.renamedialog_text = "Please enter a name for the project and confirm it by clicking on 'Confirm'." + +/** + * Compile Dialog + * + */ + +Blockly.Msg.compiledialog_headline = "Error" +Blockly.Msg.compiledialog_text = "While compiling an error occured. Please check your blocks and try again" + + + +/** + * Buttons + * + */ + +Blockly.Msg.button_cancel = "Cancel"; +Blockly.Msg.button_close = "Close"; +Blockly.Msg.button_accept = "Confirm"; +Blockly.Msg.button_compile = "Compile"; +Blockly.Msg.button_create_variableCreate = "Create Variable"; + + +/** + * + */ + +Blockly.Msg.filename = "Filename"; +Blockly.Msg.projectname = "Projectname"; + + + + + export const En = Blockly.Msg; diff --git a/src/components/Blockly/toolbox/Toolbox.js b/src/components/Blockly/toolbox/Toolbox.js index 47fede7..cce1097 100644 --- a/src/components/Blockly/toolbox/Toolbox.js +++ b/src/components/Blockly/toolbox/Toolbox.js @@ -38,7 +38,7 @@ class Toolbox extends React.Component { render() { return ( - + @@ -301,7 +301,7 @@ class Toolbox extends React.Component { {/* */} - + @@ -310,7 +310,7 @@ class Toolbox extends React.Component { - + @@ -349,7 +349,7 @@ class Toolbox extends React.Component { - + @@ -369,7 +369,7 @@ class Toolbox extends React.Component { - + @@ -422,15 +422,15 @@ class Toolbox extends React.Component { - + - + - + diff --git a/src/components/NotFound.js b/src/components/NotFound.js index 85a9c6f..eb790f4 100644 --- a/src/components/NotFound.js +++ b/src/components/NotFound.js @@ -6,31 +6,32 @@ import { withRouter } from 'react-router-dom'; import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; +import * as Blockly from 'blockly' class NotFound extends Component { render() { return (
- - Die von Ihnen angeforderte Seite kann nicht gefunden werden. - Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar. + + {Blockly.Msg.notfound_head} + {Blockly.Msg.notfound_text} {this.props.button ? - : + : }
diff --git a/src/components/Settings/LanguageSelector.js b/src/components/Settings/LanguageSelector.js index dea7465..7da299c 100644 --- a/src/components/Settings/LanguageSelector.js +++ b/src/components/Settings/LanguageSelector.js @@ -4,6 +4,7 @@ import InputLabel from '@material-ui/core/InputLabel'; import MenuItem from '@material-ui/core/MenuItem'; import FormControl from '@material-ui/core/FormControl'; import Select from '@material-ui/core/Select'; +import * as Blockly from 'blockly/core'; const useStyles = makeStyles((theme) => ({ formControl: { @@ -27,7 +28,7 @@ export default function LanguageSelector() { return (
- Sprache + {Blockly.Msg.settings_language}
diff --git a/src/components/Settings/RenderSelector.js b/src/components/Settings/RenderSelector.js index 5cf7a9f..d8284b6 100644 --- a/src/components/Settings/RenderSelector.js +++ b/src/components/Settings/RenderSelector.js @@ -4,7 +4,7 @@ import InputLabel from '@material-ui/core/InputLabel'; import MenuItem from '@material-ui/core/MenuItem'; import FormControl from '@material-ui/core/FormControl'; import Select from '@material-ui/core/Select'; - +import * as Blockly from 'blockly/core' const useStyles = makeStyles((theme) => ({ formControl: { margin: theme.spacing(1), @@ -39,7 +39,7 @@ export default function RenderSelector() { Zelos -

Der Renderer bestimmt das aussehen der Blöcke

+

{Blockly.Msg.settings_renderer_text}

); } diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js index cbbedc9..d43f33f 100644 --- a/src/components/Settings/Settings.js +++ b/src/components/Settings/Settings.js @@ -6,13 +6,13 @@ import Typography from '@material-ui/core/Typography'; import LanguageSelector from './LanguageSelector'; import RenderSelector from './RenderSelector'; import StatsSelector from './StatsSelector'; - +import * as Blockly from 'blockly' class Settings extends Component { render() { return (
- Einstellungen + {Blockly.Msg.settings_head} @@ -22,8 +22,8 @@ class Settings extends Component { color="primary" onClick={() => { this.props.history.push('/') }} > - Zurück zur Startseite - + {Blockly.Msg.button_back} +
); }; diff --git a/src/components/Tutorial/Assessment.js b/src/components/Tutorial/Assessment.js index 75e180d..c869cc5 100644 --- a/src/components/Tutorial/Assessment.js +++ b/src/components/Tutorial/Assessment.js @@ -11,6 +11,7 @@ import withWidth, { isWidthDown } from '@material-ui/core/withWidth'; import Grid from '@material-ui/core/Grid'; import Card from '@material-ui/core/Card'; import Typography from '@material-ui/core/Typography'; +import * as Blockly from 'blockly' class Assessment extends Component { @@ -45,7 +46,7 @@ class Assessment extends Component { - Arbeitsauftrag + {Blockly.Msg.tutorials_assessment_task} {currentTask.text}
diff --git a/src/components/Tutorial/Hardware.js b/src/components/Tutorial/Hardware.js index 35602bb..d91b0a0 100644 --- a/src/components/Tutorial/Hardware.js +++ b/src/components/Tutorial/Hardware.js @@ -15,7 +15,7 @@ import GridListTileBar from '@material-ui/core/GridListTileBar'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faExpandAlt } from "@fortawesome/free-solid-svg-icons"; - +import * as Blockly from 'blockly' const styles = theme => ({ expand: { '&:hover': { @@ -56,7 +56,7 @@ class Hardware extends Component { var cols = isWidthDown('md', this.props.width) ? isWidthDown('sm', this.props.width) ? isWidthDown('xs', this.props.width) ? 2 : 3 : 4 : 6; return (
- Für die Umsetzung benötigst du folgende Hardware: + {Blockly.Msg.tutorials_hardware_head} {this.props.picture.map((picture, i) => { @@ -95,7 +95,7 @@ class Hardware extends Component { >
{this.state.hardwareInfo.name} - Weitere Informationen zur Hardware-Komponente findest du hier. + {Blockly.Msg.tutorials_hardware_moreInformation} {Blockly.Msg.tutorials_hardware_here}.
diff --git a/src/components/Tutorial/HintTutorialExists.js b/src/components/Tutorial/HintTutorialExists.js index 4b1fa2d..afd1468 100644 --- a/src/components/Tutorial/HintTutorialExists.js +++ b/src/components/Tutorial/HintTutorialExists.js @@ -9,6 +9,7 @@ import Dialog from '../Dialog'; import { withStyles } from '@material-ui/core/styles'; import Checkbox from '@material-ui/core/Checkbox'; import FormControlLabel from '@material-ui/core/FormControlLabel'; +import * as Blockly from 'blockly' const styles = (theme) => ({ link: { @@ -60,7 +61,7 @@ class HintTutorialExists extends Component { content={''} onClose={this.toggleDialog} onClick={this.toggleDialog} - button={'Schließen'} + button={Blockly.Msg.button_close} >
Es gibt ab jetzt Tutorials zu verschiedenen Themen. Schau mal hier vorbei. diff --git a/src/components/Workspace/Compile.js b/src/components/Workspace/Compile.js index f8a204a..648931f 100644 --- a/src/components/Workspace/Compile.js +++ b/src/components/Workspace/Compile.js @@ -17,6 +17,7 @@ import TextField from '@material-ui/core/TextField'; import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import * as Blockly from 'blockly/core'; const styles = (theme) => ({ backdrop: { @@ -85,7 +86,7 @@ class Compile extends Component { }) .catch(err => { console.log(err); - this.setState({ progress: false, file: false, open: true, title: 'Fehler', content: 'Etwas ist beim Kompilieren schief gelaufen. Versuche es nochmal.' }); + this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text }); }); } @@ -119,7 +120,7 @@ class Compile extends Component { return (
{this.props.iconButton ? - + this.compile()} @@ -141,7 +142,7 @@ class Compile extends Component { content={this.state.content} onClose={this.toggleDialog} onClick={this.state.file ? () => { this.toggleDialog(); this.setState({ name: this.props.name }) } : this.toggleDialog} - button={this.state.file ? 'Abbrechen' : 'Schließen'} + button={this.state.file ? Blockly.Msg.button_cancel : Blockly.Msg.button_close} > {this.state.file ?
diff --git a/src/components/Workspace/DeleteProject.js b/src/components/Workspace/DeleteProject.js index 3df813d..4566916 100644 --- a/src/components/Workspace/DeleteProject.js +++ b/src/components/Workspace/DeleteProject.js @@ -13,6 +13,7 @@ import Tooltip from '@material-ui/core/Tooltip'; import { faTrashAlt } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import * as Blockly from 'blockly/core'; const styles = (theme) => ({ buttonTrash: { @@ -43,12 +44,12 @@ class DeleteProject extends Component { } componentDidUpdate(props) { - if(this.props.message !== props.message){ - if(this.props.message.id === 'PROJECT_DELETE_SUCCESS'){ + if (this.props.message !== props.message) { + if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') { this.props.history.push(`/${this.props.projectType}`); } - else if(this.props.message.id === 'PROJECT_DELETE_FAIL'){ - this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Projektes. Versuche es noch einmal.`, type: 'error' }); + else if (this.props.message.id === 'PROJECT_DELETE_FAIL') { + this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_delete_project_failed, type: 'error' }); } } } @@ -56,7 +57,7 @@ class DeleteProject extends Component { render() { return (
- + this.props.deleteProject(this.props.projectType, this.props.project._id)} diff --git a/src/components/Workspace/DownloadProject.js b/src/components/Workspace/DownloadProject.js index 9b30273..1315625 100644 --- a/src/components/Workspace/DownloadProject.js +++ b/src/components/Workspace/DownloadProject.js @@ -12,6 +12,8 @@ import Tooltip from '@material-ui/core/Tooltip'; import { faFileDownload } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import * as Blockly from 'blockly/core'; + const styles = (theme) => ({ button: { @@ -40,7 +42,7 @@ class DownloadProject extends Component { render() { return (
- + this.downloadXmlFile()} diff --git a/src/components/Workspace/OpenProject.js b/src/components/Workspace/OpenProject.js index 6038a49..9045a32 100644 --- a/src/components/Workspace/OpenProject.js +++ b/src/components/Workspace/OpenProject.js @@ -97,7 +97,7 @@ class OpenProject extends Component { type="file" />