import React, { Component } from 'react';
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
import request from 'superagent';
import CardList from './CardList.jsx';
import AddNewCard from './AddNewCard.jsx';
import ReactRouterBootstrap, { LinkContainer } from 'react-router-bootstrap';

const propTypes = {
  children: React.PropTypes.element,
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cards: [],
    }
    this.addNewCardHandler = this.addNewCardHandler.bind(this);
    this.deleteCardHandler = this.deleteCardHandler.bind(this);
    this.saveButtonHandler = this.saveButtonHandler.bind(this);
  }

  componentDidMount() {
    this.getAllCards();
  }

  getAllCards() {
    const url = '/api/cards';
    request.get(url)
    .end((err,res) => {
      if (err) {
        console.log(`err: ${err}`);
      }
      this.setState({
        cards: res.body,
      });
    });
  }
  deleteCardHandler(id) {
    console.log(`id: ${id}`);
  }
  addNewCardHandler() {
    request.post(url)
      .send({
        firstname,
        lastname,
        email,
        phonenumber,
        location,
        jobtitle,
        company,
        githubhandle,
        linkedinhandle,
        twitterhandler,
        personalsite,
      })
      .end((err, res) => {
        console.log(`res: ${res}`);
        console.log(`err: ${err}`);
      })
  }

  saveButtonHandler(){
    console.log('saveButtonHandler')
  }
  render() {
    return (
      <div>
        <Navbar inverse collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <a href="#">BIZIT</a>
            </Navbar.Brand>
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav>
              <NavItem eventKey={1} href="#">Filter</NavItem>
              <NavItem eventKey={2} href="#">Search</NavItem>
            </Nav>
            <Nav pullRight>
              <NavItem eventKey={1} href="#">Sign Up</NavItem>
              <NavItem eventKey={2} href="#">Login</NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <CardList
          saveButtonHandler={this.saveButtonHandler}
          cards={this.state.cards}
          />
        <Navbar inverse collapseOnSelect fixedBottom>
          <Navbar.Collapse>
            <Nav>
              <NavItem eventKey={4} href="#">Home</NavItem>
              <NavItem eventKey={5} href="#">Profile</NavItem>
              <LinkContainer to="/AddNewCard">
                <NavItem eventKey={6}>Add Card</NavItem>
              </LinkContainer>
              <NavItem eventKey={7} href="#">Saved Cards</NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    )
  }

}

App.propTypes = propTypes;
export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>