application/components/container-gallery.js

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

import {Link} from 'react-router';
import RaisedButton from 'material-ui/RaisedButton';
import Paper from 'material-ui/Paper';
import IconAdd from 'material-ui/svg-icons/content/add';
import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';
import ReduxPaginator from './common/redux-paginator';

import LoadingIndicator from './common/loading-indicator';
import ContainerTable from './container/container-table';
import ContainerToolbar from './container/container-toolbar';

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

import {
    containersMaybeFetch,
    containersFetch
} from './../redux/actions/container-actions';

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

    componentWillMount() {
        const {dispatch} = this.props;
        const page = (this.props.location && this.props.location.query.page)
            ? this.props.location.query.page
            : 1;

        dispatch(containersFetch({page: page, type: ['gallery']}));
    }

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

        const {dispatch} = this.props;
        dispatch(containersFetch({page: page, type: ['gallery']}));
    }

    render() {

        return (
            <div id='containers-root'>
                <Row>
                    <Col xs={12} md={10} lg={9} offsetMd={1} offsetLg={1}>
                        <ContainerToolbar
                            items={this.props.containers.items}
                            page={this.props.containers.pagination.current}
                            search=''
                            perPage={20}
                            onPaginate={this.handlePagination.bind(this)}
                            />
                        {
                            this.props.containers.isFetching
                            ? <LoadingIndicator />
                            : (
                                <ContainerTable containers={this.props.containers.items} />
                            )
                        }
                    </Col>
                </Row>
            </div>
        );
    }
}

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

export default connect(mapStateToProps)(Gallery);