app\static\js\components\collection\Collection(1).jsx

import React from 'react';
import agent from '../../agent'
import { connect } from 'react-redux';

import CollectionMeta from './CollectionMeta'


const mapStateToProps = state => ({
    ...state.collection,
    currentUser: state.common.currentUser
});

const mapDispatchToProps = dispatch => ({
    onLoad: payload =>
        dispatch({ type: 'COLLECTION_PAGE_LOADED', payload }),
    onUnload: () =>
        dispatch({ type: 'COLLECTION_PAGE_UNLOADED' })
});

class Collection extends React.Component {
    componentWillMount() {
        this.props.onLoad(
            agent.Collections.get(this.props.match.params.id)
        )
    }

    componentWillUnmount() {
        this.props.onUnload();
    }

    render() {
        if (!this.props.collection) {
            return (
                <NotFound />
            );
        }

        const canModify = this.props.currentUser &&
            this.props.currentUser.username === this.props.collection.author.username;

        return (
            <div className="collection-page">
                <div className="banner">
                    <div className="container">

                        <h1>{this.props.collection.name}</h1>
                        <div>{this.props.collection.description}</div>
                        <CollectionMeta
                            collection={this.props.collection}
                            canModify={canModify} />

                    </div>
                </div>


                <hr />
            </div>
        );
    }
}

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