Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement