updated status reading

src/actions/tutorialActions.js

@@ -3,14 +3,21 @@ import { TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTOR
 import axios from 'axios';
 import { returnErrors, returnSuccess } from './messageActions';
 
-export const getTutorial = (id) => (dispatch) => {
+export const getTutorial = (id) => (dispatch, getState) => {
   dispatch({type: TUTORIAL_PROGRESS});
   axios.get(`https://api.blockly.sensebox.de/tutorial/${id}`)
     .then(res => {
-      dispatch({type: TUTORIAL_PROGRESS});
+      var tutorial = res.data;
-      dispatch({
+      existingTutorial(tutorial, getState().tutorial.status).then(status => {
-        type: GET_TUTORIAL,
+        dispatch({
-        payload: res.data
+          type: TUTORIAL_SUCCESS,
+          payload: status
+        });
+        dispatch({type: TUTORIAL_PROGRESS});
+        dispatch({
+          type: GET_TUTORIAL,
+          payload: tutorial
+        });
       });
     })
     .catch(err => {
@@ -21,14 +28,21 @@ export const getTutorial = (id) => (dispatch) => {
     });
 };
 
-export const getTutorials = () => (dispatch) => {
+export const getTutorials = () => (dispatch, getState) => {
   dispatch({type: TUTORIAL_PROGRESS});
   axios.get(`https://api.blockly.sensebox.de/tutorial`)
     .then(res => {
-      dispatch({type: TUTORIAL_PROGRESS});
+      var tutorials = res.data;
-      dispatch({
+      existingTutorials(tutorials, getState().tutorial.status).then(status => {
-        type: GET_TUTORIALS,
+        dispatch({
-        payload: res.data
+          type: TUTORIAL_SUCCESS,
+          payload: status
+        });
+        dispatch({
+          type: GET_TUTORIALS,
+          payload: tutorials
+        });
+        dispatch({type: TUTORIAL_PROGRESS});
       });
     })
     .catch(err => {
@@ -44,6 +58,10 @@ export const resetTutorial = () => (dispatch) => {
     type: GET_TUTORIALS,
     payload: []
   });
+  dispatch({
+    type: TUTORIAL_STEP,
+    payload: 0
+  });
 };
 
 export const tutorialChange = () => (dispatch) => {
@@ -96,3 +114,47 @@ export const tutorialStep = (step) => (dispatch) => {
     payload: step
   });
 };
+
+
+const existingTutorials = (tutorials, status) => new Promise(function(resolve, reject){
+  var newstatus;
+  new Promise(function(resolve, reject){
+    var existingTutorialIds = tutorials.map((tutorial, i) => {
+      existingTutorial(tutorial, status).then(status => {
+        newstatus = status;
+      });
+      return tutorial.id;
+    });
+    resolve(existingTutorialIds)
+  }).then(existingTutorialIds => {
+    // deleting old tutorials which do not longer exist
+    if (existingTutorialIds.length > 0) {
+      status = newstatus.filter(status => existingTutorialIds.indexOf(status.id) > -1);
+    }
+    resolve(status);
+  });
+});
+
+const existingTutorial = (tutorial, status) => new Promise(function(resolve, reject){
+  var tutorialsId = tutorial.id;
+  var statusIndex = status.findIndex(status => status.id === tutorialsId);
+  if (statusIndex > -1) {
+    var tasks = tutorial.steps.filter(step => step.type === 'task');
+    var existingTaskIds = tasks.map((task, j) => {
+      var tasksId = task.id;
+      if (status[statusIndex].tasks.findIndex(task => task.id === tasksId) === -1) {
+        // task does not exist
+        status[statusIndex].tasks.push({ id: tasksId });
+      }
+      return tasksId;
+    });
+    // deleting old tasks which do not longer exist
+    if (existingTaskIds.length > 0) {
+      status[statusIndex].tasks = status[statusIndex].tasks.filter(task => existingTaskIds.indexOf(task.id) > -1);
+    }
+  }
+  else {
+    status.push({ id: tutorialsId, tasks: tutorial.steps.filter(step => step.type === 'task').map(task => { return { id: task.id }; }) });
+  }
+  resolve(status);
+});

src/components/Tutorial/Requirement.js

@@ -5,8 +5,6 @@ import { connect } from 'react-redux';
 import clsx from 'clsx';
 import { withRouter, Link } from 'react-router-dom';
 
-import tutorials from '../../data/tutorials';
-
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
@@ -67,7 +65,8 @@ class Requirement extends Component {
         <Typography>Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:</Typography>
         <List component="div">
           {tutorialIds.map((tutorialId, i) => {
-            var title = tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title;
+            // title must be provided together with ids
+            // var title = tutorials.filter(tutorial => tutorial.id === tutorialId)[0].title;
             var status = this.props.status.filter(status => status.id === tutorialId)[0];
             var tasks = status.tasks;
             var error = status.tasks.filter(task => task.type === 'error').length > 0;
@@ -99,7 +98,7 @@ class Requirement extends Component {
                   </div>
                 </Tooltip>
                 <div style={{ height: '50px', width: 'calc(100% - 25px)', transform: 'translate(25px)' }} className={this.props.classes.hoverLink}>
-                  <Typography style={{ margin: 0, position: 'absolute', top: '50%', transform: 'translate(45px, -50%)', maxHeight: '50px', overflow: 'hidden', maxWidth: 'calc(100% - 45px)'/*, textOverflow: 'ellipsis', whiteSpace: 'pre-line', overflowWrap: 'anywhere'*/ }}>{title}</Typography>
+                  <Typography style={{ margin: 0, position: 'absolute', top: '50%', transform: 'translate(45px, -50%)', maxHeight: '50px', overflow: 'hidden', maxWidth: 'calc(100% - 45px)'/*, textOverflow: 'ellipsis', whiteSpace: 'pre-line', overflowWrap: 'anywhere'*/ }}>{/*title*/}Name hinzufügen über Datenbankeintrag</Typography>
                 </div>
               </Link>
             )

src/components/Tutorial/StepperHorizontal.js

@@ -6,7 +6,7 @@ import { withRouter } from 'react-router-dom';
 
 import clsx from 'clsx';
 
-import tutorials from '../../data/tutorials';
+// import tutorials from '../../data/tutorials';
 
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import { withStyles } from '@material-ui/core/styles';
@@ -70,8 +70,8 @@ class StepperHorizontal extends Component {
           : null}
         <div className={this.props.classes.stepper}>
           <Button
-            disabled={tutorialIndex === 0}
+            disabled//={tutorialIndex === 0}
-            onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }}
+            //onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }}
           >
             {'<'}
           </Button>
@@ -82,8 +82,8 @@ class StepperHorizontal extends Component {
             </div>
           </Tooltip>
           <Button
-            disabled={tutorialIndex + 1 === tutorials.length}
+            disabled//={tutorialIndex + 1 === tutorials.length}
-            onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }}
+            //onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }}
           >
             {'>'}
           </Button>

src/reducers/tutorialReducer.js

@@ -1,46 +1,18 @@
 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';
 
 const initialStatus = () => {
   if (window.localStorage.getItem('status')) {
     var status = JSON.parse(window.localStorage.getItem('status'));
-    var existingTutorialIds = tutorials.map((tutorial, i) => {
-      var tutorialsId = tutorial.id;
-      var statusIndex = status.findIndex(status => status.id === tutorialsId);
-      if (statusIndex > -1) {
-        var tasks = tutorial.steps.filter(step => step.type === 'task');
-        var existingTaskIds = tasks.map((task, j) => {
-          var tasksId = task.id;
-          if (status[statusIndex].tasks.findIndex(task => task.id === tasksId) === -1) {
-            // task does not exist
-            status[statusIndex].tasks.push({ id: tasksId });
-          }
-          return tasksId;
-        });
-        // deleting old tasks which do not longer exist
-        if (existingTaskIds.length > 0) {
-          status[statusIndex].tasks = status[statusIndex].tasks.filter(task => existingTaskIds.indexOf(task.id) > -1);
-        }
-      }
-      else {
-        status.push({ id: tutorialsId, tasks: tutorial.steps.filter(step => step.type === 'task').map(task => { return { id: task.id }; }) });
-      }
-      return tutorialsId;
-    });
-    // deleting old tutorials which do not longer exist
-    if (existingTutorialIds.length > 0) {
-      status = status.filter(status => existingTutorialIds.indexOf(status.id) > -1);
-    }
     return status;
   }
-  // window.localStorage.getItem('status') does not exist
+  return [];
-  return tutorials.map(tutorial => { return { id: tutorial.id, tasks: tutorial.steps.filter(step => step.type === 'task').map(task => { return { id: task.id }; }) }; });
+  // // 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 initialState = {
   status: initialStatus(),
-  currentIndex: null,
   activeStep: 0,
   change: 0,
   tutorials: [],
@@ -78,11 +50,6 @@ export default function (state = initialState, action) {
         ...state,
         change: state.change += 1
       }
-    case TUTORIAL_ID:
-      return {
-        ...state,
-        currentIndex: tutorials.findIndex(tutorial => tutorial.id === action.payload)
-      }
     case TUTORIAL_STEP:
       return {
         ...state,