Container component with loading

current_user_header.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { find, propEq } from 'ramda'
import Header from './header'
import { requestCurrent as requestCurrentUser } from 'users/users_actions'

@connect(
  state => ({ currentUser: find(propEq('current', 1), state.users) }),
  { requestCurrentUser }
)
export default class CurrentUserHeader extends Component {
  componentDidMount() {
    this.props.requestCurrentUser()
  }

  render() {
    return <Header user={this.props.currentUser} />
  }
}

header.js

import './header.css'
import React from 'react'
import { Link } from 'react-router'
import Avatar from 'avatar/avatar'

export default function Header({ user }) {
  if (!user) return <div />
  
  return (
    <div className="header">
      <h1 className="header__logo">
        <Link to="/" title="Markup Project">Markup Project</Link>
      </h1>
      <ul className="header__menu">

      </ul>
      <div className="header__user">
        <Link to={ `/profile/${user.id}` }>
          <Avatar model={ user } />
        </Link>  
      </div>
    </div>
  )
}