displaying the status of the tutorial

src/components/Tutorial/StepperHorizontal.js

@@ -1,7 +1,11 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
 import { withRouter } from 'react-router-dom';
 
+import clsx from 'clsx';
+
 import { tutorials } from './tutorials';
 
 import { fade } from '@material-ui/core/styles/colorManipulator';
@@ -11,9 +15,11 @@ import Stepper from '@material-ui/core/Stepper';
 import Step from '@material-ui/core/Step';
 import StepLabel from '@material-ui/core/StepLabel';
 
+import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 const styles = (theme) => ({
   stepper: {
-    backgroundColor: fade(theme.palette.primary.main, 0.6),
     width: 'calc(100% - 40px)',
     borderRadius: '25px',
     padding: '0 20px',
@@ -21,8 +27,23 @@ const styles = (theme) => ({
     display: 'flex',
     justifyContent: 'space-between'
   },
+  stepperSuccess: {
+    backgroundColor: fade(theme.palette.primary.main, 0.6),
+  },
+  stepperError: {
+    backgroundColor: fade(theme.palette.error.dark, 0.6),
+  },
+  stepperOther: {
+    backgroundColor: fade(theme.palette.secondary.main, 0.6),
+  },
   color: {
     backgroundColor: 'transparent '
+  },
+  iconDivSuccess: {
+    color: theme.palette.primary.main
+  },
+  iconDivError: {
+    color: theme.palette.error.dark
   }
 });
 
@@ -40,8 +61,10 @@ class StepperHorizontal extends Component {
 
   render() {
     var tutorialId = this.state.tutorialId;
+    var tutorialStatus = this.props.status[tutorialId-1].status === 'success' ? 'Success' :
+                          this.props.status[tutorialId-1].status === 'error' ? 'Error' : 'Other';
     return (
-      <div className={this.props.classes.stepper}>
+      <div className={clsx(this.props.classes.stepper, this.props.classes['stepper'+tutorialStatus])}>
         <Button
           disabled={tutorialId-1 === 0}
           onClick={() => {this.props.history.push(`/tutorial/${tutorialId-1}`)}}
@@ -51,7 +74,7 @@ class StepperHorizontal extends Component {
         <Stepper activeStep={tutorialId} orientation="horizontal"
                  style={{padding: 0}} classes={{root: this.props.classes.color}}>
           <Step expanded completed={false}>
-            <StepLabel icon={``}>
+            <StepLabel icon={tutorialStatus !== 'Other' ? <div className={clsx(tutorialStatus === 'Error' ? this.props.classes.iconDivError: this.props.classes.iconDivSuccess)}><FontAwesomeIcon className={this.props.classes.icon} icon={tutorialStatus === 'Success' ? faCheck : faTimes}/></div> : ''}>
               <h1 style={{margin: 0}}>{tutorials[tutorialId-1].title}</h1>
             </StepLabel>
           </Step>
@@ -67,4 +90,14 @@ class StepperHorizontal extends Component {
   };
 }
 
-export default withRouter(withStyles(styles, {withTheme: true})(StepperHorizontal));
+StepperHorizontal.propTypes = {
+  status: PropTypes.array.isRequired,
+  change: PropTypes.number.isRequired,
+};
+
+const mapStateToProps = state => ({
+  change: state.tutorial.change,
+  status: state.tutorial.status
+});
+
+export default connect(mapStateToProps, null)(withRouter(withStyles(styles, {withTheme: true})(StepperHorizontal)));