application/components/me/content.js

import React, { Component } from 'react';
import {browserHistory} from 'react-router';
import {connect} from 'react-redux';

import Paper from 'material-ui/Paper';
import FontIcon from 'material-ui/FontIcon';

import {Row, Col} from '../flexbox';

class MyContent extends Component {
    handleHistoryLink(item, e) {
        if (item.get('type') == 'content') {
            browserHistory.push('/ceo/locate/' + item.get('uuid'));
        } else {
            browserHistory.push('/ceo/locate/' + item.get('uuid') + '?type=' + item.get('type'));
        }
    }

    getIcon(type) {
        switch (type) {
            case 'article':
                return <FontIcon className='fa fa-pencil-square-o'></FontIcon>;
            case 'media':
                return <FontIcon className='mui-icons'>photo</FontIcon>
            case 'post':
                return <FontIcon className='mui-icons'>question_answer</FontIcon>;
            case 'page':
                return <FontIcon className='mui-icons'>description</FontIcon>;
            case 'container':
                return <FontIcon className='mui-icons'>view_module</FontIcon>;
            case 'assignment':
                return <FontIcon className='mui-icons'>event</FontIcon>;
        }
    }

    render() {
        const items = this.props.globalHistory.items.filter((item) => item.get('isDirty') === true);

        return (
            <Row>
                <Col offsetXs={1} xs={10}>
                    <Paper className='padded'>
                        <h1 className='first'>Pending Changes</h1>
                        <p>Refreshing or leaving CEO will clear these pending changes, <strong>but your locks will still remain active</strong>.</p>
                        {!items.size ? <div className='quiet'>No pending changes</div> : ''}
                        {items.map((item) => {
                            return (
                                <div className='clear-bottom'>
                                    <span style={{position:'relative',top:'2px'}}>{this.getIcon(item.get('contentType'))}</span> <span className='faux-link' onClick={this.handleHistoryLink.bind(this, item)}>{item.get('label')}</span>
                                </div>
                            )
                        })}
                    </Paper>
                </Col>
            </Row>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        globalHistory: state.globalHistory
    };
}

export default connect(mapStateToProps)(MyContent);