get a tutorial about the API

src/components/Tutorial/Tutorial.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { workspaceName } from '../../actions/workspaceActions';
-import { tutorialId, tutorialStep } from '../../actions/tutorialActions';
+import { clearMessages } from '../../actions/messageActions';
+import { getTutorial, resetTutorial, tutorialStep } from '../../actions/tutorialActions';
 
 import Breadcrumbs from '../Breadcrumbs';
 import StepperHorizontal from './StepperHorizontal';
@@ -13,79 +14,99 @@ import NotFound from '../NotFound';
 
 import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
 
-import tutorials from '../../data/tutorials';
+// import tutorials from '../../data/tutorials';
 
 import Card from '@material-ui/core/Card';
 import Button from '@material-ui/core/Button';
+import LinearProgress from '@material-ui/core/LinearProgress';
 
 class Tutorial extends Component {
 
   componentDidMount() {
-    this.props.tutorialId(Number(this.props.match.params.tutorialId));
+    this.props.getTutorial(this.props.match.params.tutorialId);
+    // this.props.tutorialId(Number(this.props.match.params.tutorialId));
   }
 
   componentDidUpdate(props, state) {
-    if (props.currentTutorialId !== Number(this.props.match.params.tutorialId)) {
-      this.props.tutorialId(Number(this.props.match.params.tutorialId));
+    if (props.tutorial.id && !props.isLoading && Number(props.tutorial.id) !== Number(this.props.match.params.tutorialId)) {
+      this.props.getTutorial(this.props.match.params.tutorialId);
+      // this.props.tutorialId(Number(this.props.match.params.tutorialId));
+    }
+    if(this.props.message.id === 'GET_TUTORIAL_FAIL'){
+      alert(this.props.message.msg);
+      this.props.clearMessages();
     }
   }
 
   componentWillUnmount() {
-    this.props.tutorialId(null);
+    this.props.resetTutorial();
     this.props.workspaceName(null);
+    if(this.props.message.msg){
+      this.props.clearMessages();
+    }
   }
 
   render() {
-    var currentTutorialId = this.props.currentTutorialId;
-    var tutorial = tutorials.filter(tutorial => tutorial.id === currentTutorialId)[0];
-    var steps = tutorial ? tutorial.steps : null;
-    var step = steps ? steps[this.props.activeStep] : null;
-    var name = step ? `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}` : null;
     return (
-      !Number.isInteger(currentTutorialId) || currentTutorialId < 1 || !tutorial ?
-        <NotFound button={{ title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial' }} />
-        :
-        <div>
-          <Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${currentTutorialId}`, title: tutorial.title }]} />
+      <div>
+        {this.props.isLoading ? <LinearProgress /> :
+          Object.keys(this.props.tutorial).length === 0 ? <NotFound button={{ title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial' }} />
+            : (() => {
+                var tutorial = this.props.tutorial;
+                var steps = this.props.tutorial.steps;
+                var step = steps[this.props.activeStep];
+                var name = `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}`;
+                return(
+                  <div>
+                    <Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${this.props.tutorial.id}`, title: tutorial.title }]} />
 
-          <StepperHorizontal />
+                    <StepperHorizontal />
 
-          <div style={{ display: 'flex' }}>
-            <StepperVertical steps={steps} />
-            {/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/}
-            <Card style={{ padding: '10px 10px 60px 10px', display: 'block', position: 'relative', height: 'max-content', width: '100%' }}>
-              {step ?
-                step.type === 'instruction' ?
-                  <Instruction step={step} />
-                  : <Assessment step={step} name={name} /> // if step.type === 'assessment'
-                : null}
+                    <div style={{ display: 'flex' }}>
+                      <StepperVertical steps={steps} />
+                      {/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/}
+                      <Card style={{ padding: '10px 10px 60px 10px', display: 'block', position: 'relative', height: 'max-content', width: '100%' }}>
+                        {step ?
+                          step.type === 'instruction' ?
+                            <Instruction step={step} />
+                            : <Assessment step={step} name={name} /> // if step.type === 'assessment'
+                          : null}
 
-              <div style={{ marginTop: '20px', position: 'absolute', bottom: '10px' }}>
-                <Button style={{ marginRight: '10px', height: '35px' }} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep - 1)}>Zurück</Button>
-                <Button style={{ height: '35px' }} variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length - 1} onClick={() => this.props.tutorialStep(this.props.activeStep + 1)}>Weiter</Button>
-              </div>
-            </Card>
-          </div>
-        </div>
+                        <div style={{ marginTop: '20px', position: 'absolute', bottom: '10px' }}>
+                          <Button style={{ marginRight: '10px', height: '35px' }} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep - 1)}>Zurück</Button>
+                          <Button style={{ height: '35px' }} variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length - 1} onClick={() => this.props.tutorialStep(this.props.activeStep + 1)}>Weiter</Button>
+                        </div>
+                      </Card>
+                    </div>
+                  </div>
+              )})()
+        }
+      </div>
     );
   };
 }
 
 Tutorial.propTypes = {
-  tutorialId: PropTypes.func.isRequired,
+  getTutorial: PropTypes.func.isRequired,
+  resetTutorial: PropTypes.func.isRequired,
+  clearMessages: PropTypes.func.isRequired,
   tutorialStep: PropTypes.func.isRequired,
   workspaceName: PropTypes.func.isRequired,
-  currentTutorialId: PropTypes.number,
   status: PropTypes.array.isRequired,
   change: PropTypes.number.isRequired,
-  activeStep: PropTypes.number.isRequired
+  activeStep: PropTypes.number.isRequired,
+  tutorial: PropTypes.object.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  message: PropTypes.object.isRequired
 };
 
 const mapStateToProps = state => ({
   change: state.tutorial.change,
   status: state.tutorial.status,
-  currentTutorialId: state.tutorial.currentId,
-  activeStep: state.tutorial.activeStep
+  activeStep: state.tutorial.activeStep,
+  tutorial: state.tutorial.tutorial,
+  isLoading: state.tutorial.progress,
+  message: state.message
 });
 
-export default connect(mapStateToProps, { tutorialId, tutorialStep, workspaceName })(Tutorial);
+export default connect(mapStateToProps, { getTutorial, resetTutorial, tutorialStep, clearMessages, workspaceName })(Tutorial);