CollectionView.js

import React from 'react';
import PropTypes from 'prop-types';
import DataTable from 'components/DataTable';
import CollectionViewControls from 'components/CollectionViewControls';

/**
 * Entity collection view
 * @author Andrew McLagan <[email protected]>
 */
export default ({ collection, children, filters, className }) => (
  <div className={`entity-listing-container ${className}`}>
    <CollectionViewControls results={collection.size} filters={filters} />
    <DataTable rows={collection}>
      {children}
    </DataTable>
  </div>
);

JobCollection.js

import React from 'react';
import { connect } from 'react-redux';
import { Jobs } from 'ethical-jobs-redux-modules';
import CollectionView from 'components/CollectionView';
import PageTitle from './PageTitle';

/**
 * Jobs collection container
 * @author Andrew McLagan <[email protected]>
 */
export class JobCollection extends React.Component {

  componentWillMount() {
    this.props.clearColleciton();
  }

  componentDidMount() {
    return this.props.fetchCollection({
      status: 'APPROVED',
      expired: false,
    });
  }

  render() {

    const { jobs, filters, fetchJobs, clearJobs } = this.props;

    return (
      <div className="jobs-container">
        <PageTitle jobType={jobType} />
        <CollectionView
          filters={filters}
          clearColleciton={clearJobs}
          fetchCollection={fetchJobs}
          collection={jobs}
        />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  jobs: Jobs.selectors.jobsSelector(state),
  filters: Jobs.selectors.jobsFiltersSelector(state),
});

const mapDispatchToProps = {
  fetchJobs: Jobs.actions.fetchJobs,
  clearJobs: Jobs.actions.clearJobs,
};

export default connect(mapStateToProps, mapDispatchToProps)(JobCollection);