     error: false
     loading: false
 
-  propChangeHandlers:
-    'params.collection_owner': 'fetchCollection'
-    'params.collection_name': 'fetchCollection'
-    'user': 'fetchCollection'
+  componentWillMount: ->
+    @fetchCollection()
 
   fetchCollection: ->
     @setState
-      error: false
       loading: true
 
     apiClient.type('collections')
       .get(slug: @props.params.collection_owner + '/' + @props.params.collection_name, include: 'owner')
       .then ([collection]) =>
-        unless collection then @setState error: true
 
         apiClient.type('collection_roles')
           .get(collection_id: collection.id)
           .then (roles) =>
             @setState
+              error: false
+              loading: false
               collection: collection
               roles: roles
-      .catch =>
+      .catch (e) =>
         @setState
           error: true
-          collection: null
-      .then =>
-        @setState loading: false
+          loading: false
 
   render: ->
     classes = classNames {
       "content-container"
       "collection-page-with-project-context": @props.project?
     }
+    {project, user} = @props
     <div className={classes}>
       {if @state.collection
-        <CollectionPage {...@props} collection={@state.collection} roles={@state.roles} />}
+        <CollectionPage project={project} user={user} collection={@state.collection} roles={@state.roles}>
+          {@props.children}
+        </CollectionPage>
+      }
 
       {if @state.error
         <Translate component="p" content="collectionsPageWrapper.error" />}

  getDefaultProps: ->
    collection: null

  componentDidMount: ->
    document.documentElement.classList.add 'on-collection-page'


    document.documentElement.classList.remove 'on-collection-page'

  render: ->
    return null unless @state.owner?
    
    baseType = if @props.collection.favorite then "favorites" else "collections"
    baseLink = ""
    if @props.project?
      baseLink = "/projects/#{@props.project.slug}"
    baseCollectionLink = "#{baseLink}/#{baseType}/#{@props.collection.slug}"
    baseCollectionsLink = "#{baseLink}/#{baseType}/#{@state.owner?.login}"
    isOwner = @props.user?.id is @state.owner?.id
    profileLink = "#{baseLink}/users/#{@state.owner?.login}"
    collectionsLinkMessageKey = "collectionPage.#{baseType}Link"

    <div className="collections-page">
      <nav className="collection-nav tabbed-content-tabs">
        <IndexLink to={baseCollectionLink} activeClassName="active" className="tabbed-content-tab" onClick={@logClick?.bind(this, 'view-collection')}>
          <Avatar user={@state.owner} />
          {@props.collection.display_name}
        </IndexLink>
        {if isOwner
          <span>
            <Link to="#{baseCollectionLink}/settings" activeClassName="active" className="tabbed-content-tab" onClick={@logClick?.bind(this, 'settings-collection')}>
              <Translate content="collectionPage.settings" />
            </Link>
            <Link to="#{baseCollectionLink}/collaborators" activeClassName="active" className="tabbed-content-tab" onClick={@logClick?.bind(this, 'collab-collection')}>
              <Translate content="collectionPage.collaborators" />
            </Link>
          </span>}
        <Link to={baseCollectionsLink} className="tabbed-content-tab">
          <Translate content="#{collectionsLinkMessageKey}" user={@props.collection.links.owner.display_name} />
        </Link>
        <Link to={profileLink} activeClassName="active" className="tabbed-content-tab">
          <Translate content="collectionPage.userLink" user={@props.collection.links.owner.display_name} />
        </Link>
      </nav>
      <div className="collection-container talk">
        {React.cloneElement @props.children, {user: @props.user, collection: @props.collection, roles: @props.roles}}
      </div>
    </div>

module.exports = React.createClass
  displayName: 'CollectionPageWrapper'

  mixins: [TitleMixin]

  title: ->
    @state.collection?.display_name ? '(Loading)'
