     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" />}

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

  render: ->
    <PromiseRenderer promise={@props.collection.get('owner')}>{(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}/#{owner.login}"
      isOwner = @props.user?.id is owner.id
      profileLink = "#{baseLink}/users/#{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={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>
    }</PromiseRenderer>

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

  mixins: [TitleMixin, HandlePropChanges]

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

  getDefaultProps: ->
    collection: null

  getInitialState: ->
    owner: null

  componentWillMount: ->
    apiClient.type 'users'
      .get @props.collection.links.owner.id
      .then (owner) =>
        @setState {owner}
    
  componentDidMount: ->
    document.documentElement.classList.add 'on-collection-page'

