Header.js

import React from 'react'
import ModalRepoForm from './ModalRepoForm'
import Loader from 'halogen/PulseLoader'
import { Link } from 'react-router-dom'
import { observer } from 'mobx-react'
import autobind from 'autobind-decorator'
import ModalRepoFormStore from '../stores/ModalRepoFormStore'

@autobind
@observer
export default class Header extends React.Component {
  componentDidMount() {
    this.props.headerStore.loadHeaderData()
  }

  addRepo(repo) {
    this.props.headerStore.addRepo(repo)
  }

  render() {
    const { headerStore } = this.props;

    let result = null;

    if (headerStore.loading) {
      result = <Loader color="#286090" size="12px" margin="4px"/>;
    }
    else if (headerStore.error !== null) {
      result = <span>Error: {headerStore.error}</span>;
    }
    else {
      const data = headerStore.data.map((repo) => {
        const url = `/web/regional_design/${repo.id}?object=repo`
        return (
          <Link key={ repo.id } className='btn btn-default mr15' to={ url }>{ repo.name }</Link>
        )
      })

      result = data;
    }

    return (
      <div className="text-left top-header">
        <ModalRepoForm handleNewRepo={ this.addRepo } ModalRepoFormStore={ ModalRepoFormStore } />
        <div className='col-md-10'>
          { result }
        </div>
        <div className="clearfix"></div>
      </div>
    )
  }
}