journey.js

import React, { Component, PropTypes } from 'react';
import * as Colors from 'material-ui/lib/styles/colors';
import CheckCircle from 'material-ui/lib/svg-icons/action/check-circle';
import Info from 'material-ui/lib/svg-icons/action/info';

import JourneyService from '../../../services/JourneyService';

const aligner = {
  display: 'flex',
  alignItems: 'flex-start',
  flexDirection: 'column',
  justifyContent: 'center',
  minHeight: '50px',
};

const Vert = ({ children }) =>
  <div style={aligner}>
    <div>
      {children}
    </div>
  </div>;

const ImportantText = ({ children }) =>
  <div style={{ fontSize: '120%' }}>
    {children}
  </div>;

const Stage = ({ msg, icon }) =>
  <div className="row" style={{ marginTop: '10px' }}>
    <div className="col-md-3" style={{ textAlign: 'right' }}>
      {icon}
    </div>
    <div className="col-md-9" >
      <Vert>
        <ImportantText>
          {msg}
        </ImportantText>
      </Vert>
    </div>
  </div>;

function renderStage(completed, text) {
  if (completed) {
    return (
      <Stage msg={text} icon={
        <CheckCircle style={{ fill: Colors.green400, height: '50px', width: '50px' }}/>
      }/>
    );
  }

  return (
    <Stage msg={text} icon={
      <Info style={{ fill: Colors.orange400, height: '50px', width: '50px' }}/>
    }/>
  );
}

class Journey extends Component {

  static propTypes = {
    params: PropTypes.shape({
      custId: PropTypes.string,
    }),
  };

  constructor() {
    super();
    this.state = {
      stages: [],
    };
  }

  async componentDidMount() {
    const { stages } = await JourneyService.getJourney(this.props.params.custId);
    /* eslint-disable react/no-did-mount-set-state */
    this.setState({ stages });
    /* eslint-enable react/no-did-mount-set-state */
  }

  render() {
    return (
      <div className="container-fluid" style={{ margin: '5%' }}>
        {this.state.stages.map(stage => renderStage(stage.completed, stage.stageName))}
      </div>
    );
  }
}

export default Journey;