{this.props.isLoading ?
:
- Object.keys(this.props.tutorial).length === 0 ?
+ !this.props.tutorial ?
: (() => {
var tutorial = this.props.tutorial;
var steps = this.props.tutorial.steps;
@@ -104,7 +104,7 @@ const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status,
activeStep: state.tutorial.activeStep,
- tutorial: state.tutorial.tutorial,
+ tutorial: state.tutorial.tutorials[0],
isLoading: state.tutorial.progress,
message: state.message
});
diff --git a/src/components/Tutorial/TutorialHome.js b/src/components/Tutorial/TutorialHome.js
index a6ffa1a..ff6bccd 100644
--- a/src/components/Tutorial/TutorialHome.js
+++ b/src/components/Tutorial/TutorialHome.js
@@ -1,14 +1,13 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
+import { getTutorials, resetTutorial } from '../../actions/tutorialActions';
+import { clearMessages } from '../../actions/messageActions';
import clsx from 'clsx';
import Breadcrumbs from '../Breadcrumbs';
-import tutorials from '../../data/tutorials';
-// import tutorials from '../../data/tutorials.json';
-
import { Link } from 'react-router-dom';
import { fade } from '@material-ui/core/styles/colorManipulator';
@@ -16,6 +15,7 @@ import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
+import LinearProgress from '@material-ui/core/LinearProgress';
import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -52,14 +52,33 @@ const styles = (theme) => ({
class TutorialHome extends Component {
+ componentDidMount() {
+ this.props.getTutorials();
+ }
+
+ componentDidUpdate(props, state) {
+ if(this.props.message.id === 'GET_TUTORIALS_FAIL'){
+ alert(this.props.message.msg);
+ this.props.clearMessages();
+ }
+ }
+
+ componentWillUnmount() {
+ this.props.resetTutorial();
+ if(this.props.message.msg){
+ this.props.clearMessages();
+ }
+ }
+
render() {
return (
+ this.props.isLoading ?
:
Tutorial-Übersicht
- {tutorials.map((tutorial, i) => {
+ {this.props.tutorials.map((tutorial, i) => {
var status = this.props.status.filter(status => status.id === tutorial.id)[0];
var tasks = status.tasks;
var error = status.tasks.filter(task => task.type === 'error').length > 0;
@@ -101,13 +120,22 @@ class TutorialHome extends Component {
}
TutorialHome.propTypes = {
+ getTutorials: PropTypes.func.isRequired,
+ resetTutorial: 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
};
const mapStateToProps = state => ({
change: state.tutorial.change,
- status: state.tutorial.status
+ status: state.tutorial.status,
+ tutorials: state.tutorial.tutorials,
+ isLoading: state.tutorial.progress,
+ message: state.message
});
-export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(TutorialHome));
+export default connect(mapStateToProps, { getTutorials, resetTutorial, clearMessages })(withStyles(styles, { withTheme: true })(TutorialHome));
diff --git a/src/reducers/tutorialReducer.js b/src/reducers/tutorialReducer.js
index 23398cd..eb7350e 100644
--- a/src/reducers/tutorialReducer.js
+++ b/src/reducers/tutorialReducer.js
@@ -1,4 +1,4 @@
-import { TUTORIAL_PROGRESS, GET_TUTORIAL, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from '../actions/types';
+import { TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_ID, TUTORIAL_STEP } from '../actions/types';
import tutorials from '../data/tutorials';
@@ -40,11 +40,10 @@ const initialStatus = () => {
const initialState = {
status: initialStatus(),
- // currentId: null,
currentIndex: null,
activeStep: 0,
change: 0,
- tutorial: {},
+ tutorials: [],
progress: false
};
@@ -55,11 +54,16 @@ export default function (state = initialState, action) {
...state,
progress: !state.progress
}
+ case GET_TUTORIALS:
+ return {
+ ...state,
+ tutorials: action.payload
+ };
case GET_TUTORIAL:
return {
...state,
- tutorial: action.payload
- };
+ tutorials: [action.payload]
+ }
case TUTORIAL_SUCCESS:
case TUTORIAL_ERROR:
case TUTORIAL_XML:
@@ -77,7 +81,6 @@ export default function (state = initialState, action) {
case TUTORIAL_ID:
return {
...state,
- // currentId: action.payload,
currentIndex: tutorials.findIndex(tutorial => tutorial.id === action.payload)
}
case TUTORIAL_STEP: