application/components/custom-content/index.js

import React from 'react';
import {connect} from 'react-redux';

import Paper from 'material-ui/Paper';
import Subheader from 'material-ui/Subheader';
import Divider from 'material-ui/Divider';
import FlatButton from 'material-ui/FlatButton';
import IconButton from 'material-ui/IconButton';
import FontIcon from 'material-ui/FontIcon';
import EntriesTable from './entries-table';
import LoadingIndicator from './../common/loading-indicator';
import ReduxPaginator from './../common/redux-paginator';

import {browserHistory, Link} from 'react-router';

import {Row, Col} from './../flexbox';
import Config from './../../config';
import CurrentUser from './../../current-user';
import request from './../../util/request';

import {
    channelsFetch
} from './../../redux/actions/channel-actions';

import  {
    entriesFetch
} from './../../redux/actions/entry-actions';

class CustomContent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            channelFilter: null
        };

    }

    componentWillMount() {
        const {dispatch} = this.props;
        dispatch(channelsFetch())
            .then(() => {
                dispatch(entriesFetch());
            });
    }

    handlePagination(page) {
        if (this.props.entries.pagination.current == page) {
            return;
        }

        const keyword = (this.props.location && this.props.location.query.keyword)
            ? decodeURIComponent(this.props.location.query.keyword)
            : null;
        const channel = (this.props.location && this.props.location.query.channel)
            ? decodeURIComponent(this.props.location.query.channel)
            : null;

        let params = {page: page, limit: 40};
        if (keyword) {
            params['keyword'] = keyword;
        }
        if (channel) {
            params['channel'] = channel;
        }

        const {dispatch} = this.props;
        dispatch(entriesFetch(params));
    }

    handleChannelFilter(channel, e) {
        let useChannel = null;
        if (this.state.channelFilter == null || this.state.channelFilter != channel.get('id')) {
            this.setState({
                channelFilter: channel.get('id')
            });
            useChannel = channel.get('id');
        } else {
            this.setState({
                channelFilter: null
            });
        }

        const params = {
            page: 1,
            limit: 40,
            channel: useChannel
        };

        const q = request.setQuery({
            'channel': encodeURIComponent(useChannel),
            'page': 1
        });
        const this_url = request.getPath() + '?' + q;
        browserHistory.push(this_url);

        const {dispatch} = this.props;
        dispatch(entriesFetch(params));
    }

    render() {
        return (
            <div className="custom-content-root">
                <Paper className="toolbar">
                    <Row xs='middle'>
                        <Col xs={2}>
                            <FlatButton
                                label="New Entry"
                                containerElement={<Link to="/ceo/custom/entry" />}
                                />
                        </Col>
                        <Col xs={10} end='xs' className='align-middle'>
                            <ReduxPaginator
                                pagination={this.props.entries.pagination}
                                onPaginate={this.handlePagination.bind(this)}
                                />
                        </Col>
                    </Row>
                </Paper>
                <Paper>
                    <Row>
                        <Col xs={3} className="side-drawer">
                            <Subheader>Channels</Subheader>
                            <ul>
                                {this.props.channels.items.filter(item => parseInt(item.get('hidden')) == 0).map(item => (
                                    <li onClick={this.handleChannelFilter.bind(this, item)} className={item.get('id') == this.state.channelFilter ? 'selectable selected': 'selectable'}>
                                        <Row>
                                            <Col xs={10}>
                                                {item.get('title')}
                                            </Col>
                                            <Col xs={2} end='xs'>
                                                <Link to={"/ceo/custom/channel/" + item.get('uuid')}>
                                                    <FontIcon
                                                        className='fa fa-cog'
                                                        style={{'fontSize':'18px'}}
                                                        />
                                                </Link>
                                            </Col>
                                        </Row>
                                    </li>
                                ))}
                            </ul>
                            <Divider />
                            <Row className='align-center'>
                                <Col xs={12}>
                                    <FlatButton
                                        label="New Channel"
                                        containerElement={<Link to="/ceo/custom/channel" />}
                                        />
                                </Col>
                            </Row>
                        </Col>
                        <Col xs={9}>
                             <EntriesTable entries={this.props.entries} />
                        </Col>
                    </Row>
                </Paper>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        channels: state.channels,
        entries: state.entries
    };
}

export default connect(mapStateToProps)(CustomContent);