adjustments do mongoDB output

package.json

@@ -32,6 +32,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
+    "dev": "set \"REACT_APP_BLOCKLY_API=http://localhost:3001\" && npm start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/actions/tutorialActions.js

@@ -5,9 +5,9 @@ import { returnErrors, returnSuccess } from './messageActions';
 
 export const getTutorial = (id) => (dispatch, getState) => {
   dispatch({type: TUTORIAL_PROGRESS});
-  axios.get(`https://api.blockly.sensebox.de/tutorial/${id}`)
+  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`)
     .then(res => {
-      var tutorial = res.data;
+      var tutorial = res.data.tutorial;
       existingTutorial(tutorial, getState().tutorial.status).then(status => {
         dispatch({
           type: TUTORIAL_SUCCESS,
@@ -30,9 +30,10 @@ export const getTutorial = (id) => (dispatch, getState) => {
 
 export const getTutorials = () => (dispatch, getState) => {
   dispatch({type: TUTORIAL_PROGRESS});
-  axios.get(`https://api.blockly.sensebox.de/tutorial`)
+  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`)
     .then(res => {
-      var tutorials = res.data;
+      var tutorials = res.data.tutorials;
+      console.log(tutorials);
       existingTutorials(tutorials, getState().tutorial.status).then(status => {
         dispatch({
           type: TUTORIAL_SUCCESS,
@@ -72,9 +73,9 @@ export const tutorialChange = () => (dispatch) => {
 
 export const tutorialCheck = (status, step) => (dispatch, getState) => {
   var tutorialsStatus = getState().tutorial.status;
-  var id = getState().tutorial.tutorials[0].id;
+  var id = getState().tutorial.tutorials[0]._id;
-  var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus.id === id);
+  var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus._id === id);
-  var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task.id === step.id);
+  var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task._id === step._id);
   tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
     ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
     type: status
@@ -89,13 +90,13 @@ export const tutorialCheck = (status, step) => (dispatch, getState) => {
 export const storeTutorialXml = (code) => (dispatch, getState) => {
   var tutorial = getState().tutorial.tutorials[0];
   if (tutorial) {
-    var id = tutorial.id;
+    var id = tutorial._id;
     var activeStep = getState().tutorial.activeStep;
     var steps = tutorial.steps;
     if (steps && steps[activeStep].type === 'task') {
       var tutorialsStatus = getState().tutorial.status;
-      var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus.id === id);
+      var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus._id === id);
-      var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task.id === steps[activeStep].id);
+      var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task._id === steps[activeStep]._id);
       tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
         ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
         xml: code
@@ -123,38 +124,38 @@ const existingTutorials = (tutorials, status) => new Promise(function(resolve, r
       existingTutorial(tutorial, status).then(status => {
         newstatus = status;
       });
-      return tutorial.id;
+      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);
+      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 tutorialsId = tutorial._id;
-  var statusIndex = status.findIndex(status => status.id === tutorialsId);
+  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;
+      var tasksId = task._id;
-      if (status[statusIndex].tasks.findIndex(task => task.id === tasksId) === -1) {
+      if (status[statusIndex].tasks.findIndex(task => task._id === tasksId) === -1) {
         // task does not exist
-        status[statusIndex].tasks.push({ id: tasksId });
+        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);
+      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 }; }) });
+    status.push({ _id: tutorialsId, tasks: tutorial.steps.filter(step => step.type === 'task').map(task => { return { _id: task._id }; }) });
   }
   resolve(status);
 });

src/components/Tutorial/Assessment.js

@@ -25,10 +25,10 @@ class Assessment extends Component {
   }
 
   render() {
-    var tutorialId = this.props.tutorial.id;
+    var tutorialId = this.props.tutorial._id;
     var currentTask = this.props.step;
-    var status = this.props.status.filter(status => status.id === tutorialId)[0];
+    var status = this.props.status.filter(status => status._id === tutorialId)[0];
-    var taskIndex = status.tasks.findIndex(task => task.id === currentTask.id);
+    var taskIndex = status.tasks.findIndex(task => task._id === currentTask._id);
     var statusTask = status.tasks[taskIndex];
 
     return (

src/components/Tutorial/Requirement.js

@@ -67,7 +67,7 @@ class Requirement extends Component {
           {tutorialIds.map((tutorialId, i) => {
             // 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 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;
             var success = status.tasks.filter(task => task.type === 'success').length / tasks.length

src/components/Tutorial/StepperHorizontal.js

@@ -50,9 +50,9 @@ const styles = (theme) => ({
 class StepperHorizontal extends Component {
 
   render() {
-    var tutorialId = this.props.tutorial.id;
+    var tutorialId = this.props.tutorial._id;
     var tutorialIndex = this.props.currentTutorialIndex;
-    var status = this.props.status.filter(status => status.id === tutorialId)[0];
+    var status = this.props.status.filter(status => status._id === tutorialId)[0];
     var tasks = status.tasks;
     var error = tasks.filter(task => task.type === 'error').length > 0;
     var success = tasks.filter(task => task.type === 'success').length / tasks.length;

src/components/Tutorial/StepperVertical.js

@@ -61,7 +61,7 @@ class StepperVertical extends Component {
   }
 
   componentDidUpdate(props){
-    if (props.tutorial.id !== Number(this.props.match.params.tutorialId)) {
+    if (props.tutorial._id !== this.props.match.params.tutorialId) {
       this.props.tutorialStep(0);
     }
   }
@@ -69,7 +69,7 @@ class StepperVertical extends Component {
   render() {
     var steps = this.props.steps;
     var activeStep = this.props.activeStep;
-    var tutorialStatus = this.props.status.filter(status => status.id === this.props.tutorial.id)[0];
+    var tutorialStatus = this.props.status.filter(status => status._id === this.props.tutorial._id)[0];
     return (
       <div style={{marginRight: '10px'}}>
         <Stepper
@@ -79,13 +79,13 @@ class StepperVertical extends Component {
           classes={{root: this.props.classes.verticalStepper}}
         >
           {steps.map((step, i) => {
-            var tasksIndex = tutorialStatus.tasks.findIndex(task => task.id === step.id);
+            var tasksIndex = tutorialStatus.tasks.findIndex(task => task._id === step._id);
             var taskType = tasksIndex > -1 ? tutorialStatus.tasks[tasksIndex].type : null;
             var taskStatus = taskType === 'success' ? 'Success' : taskType === 'error' ? 'Error' : 'Other';
             return (
               <Step key={i}>
                 <Tooltip title={step.headline} placement='right' arrow >
-                  <div style={i === activeStep ? {padding: '5px 0'} : {padding: '5px 0', cursor: 'pointer'}} onClick={i === activeStep ? null : () => {this.props.tutorialStep(i)}}>
+                  <div style={i === activeStep ? {padding: '5px 0'} : {padding: '5px 0', cursor: 'pointer'}} onClick={i === activeStep ? null : () => {console.log(i); this.props.tutorialStep(i)}}>
                     <StepLabel
                       StepIconComponent={'div'}
                       classes={{

src/components/Tutorial/Tutorial.js

@@ -26,7 +26,7 @@ class Tutorial extends Component {
   }
 
   componentDidUpdate(props, state) {
-    if (props.tutorial && props.tutorial.id && !props.isLoading && Number(props.tutorial.id) !== Number(this.props.match.params.tutorialId)) {
+    if(this.props.tutorial && !this.props.isLoading && this.props.tutorial._id != this.props.match.params.tutorialId) {
       this.props.getTutorial(this.props.match.params.tutorialId);
       // this.props.tutorialId(Number(this.props.match.params.tutorialId));
     }
@@ -45,7 +45,6 @@ class Tutorial extends Component {
   }
 
   render() {
-    console.log(this.props.tutorial);
     return (
       <div>
         {this.props.isLoading ? null :
@@ -57,7 +56,7 @@ class Tutorial extends Component {
                 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 }]} />
+                    <Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${this.props.tutorial._id}`, title: tutorial.title }]} />
 
                     <StepperHorizontal />
 

src/components/Tutorial/TutorialHome.js

@@ -78,14 +78,14 @@ class TutorialHome extends Component {
         <h1>Tutorial-Übersicht</h1>
         <Grid container spacing={2}>
           {this.props.tutorials.map((tutorial, i) => {
-            var status = this.props.status.filter(status => status.id === tutorial.id)[0];
+            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;
             var success = status.tasks.filter(task => task.type === 'success').length / tasks.length
             var tutorialStatus = success === 1 ? 'Success' : error ? 'Error' : 'Other';
             return (
               <Grid item xs={12} sm={6} md={4} xl={3} key={i} style={{}}>
-                <Link to={`/tutorial/${tutorial.id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
+                <Link to={`/tutorial/${tutorial._id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
                   <Paper style={{ height: '150px', padding: '10px', position: 'relative', overflow: 'hidden' }}>
                     {tutorial.title}
                     <div className={clsx(this.props.classes.outerDiv)} style={{ width: '160px', height: '160px', border: 0 }}>

src/store.js

@@ -11,7 +11,7 @@ const store = createStore(
   initialState,
   compose(
     applyMiddleware(...middleware),
-    // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
   )
 );