content: // @flow
  
  import React from 'react';
  import {
    Navbar,
    NavbarToggler,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink,
    Collapse,
  } from 'reactstrap';
  import { Link } from 'react-router-dom';
  
  import config from '../../config';
  
  type Data = {
    name: string,
  };
  
  class NavbarComponent extends React.Component<any, any> {
    toggle: Function;
  
    constructor() {
      super();
  
      this.toggle = this.toggle.bind(this);
  
      this.state = {
        isOpen: false,
        title: '',
      };
    }
  
    toggle() {
      this.setState({
        isOpen: !this.state.isOpen,
      });
    }
  
    componentDidMount() {
      fetch(`${config.API_URLS.base}`)
        .then(response => response.json())
        .then((data: Data) => {
          this.setState({
            title: data.name,
          });
        })
        .catch((e: Error) =>
          console.error(`Failed to recover data: ${e.message}`)
        );
    }
  
    render() {
      return (
        <div>
          <Navbar color="dark" dark expand="md">
            <NavbarBrand tag={Link} to="/">
              {this.state.title}
            </NavbarBrand>
            <NavbarToggler onClick={this.toggle} />
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                <NavItem>
                  <NavLink tag={Link} to="/">
                    Posts
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink tag={Link} to="/comments/">
                    Comments
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink tag={Link} to="/archives/">
                    Archives
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink tag={Link} to="/categories/">
                    Categories
                  </NavLink>
                </NavItem>
              </Nav>
            </Collapse>
          </Navbar>
        </div>
      );
    }
  }
  
  export default NavbarComponent;
  