import React, { Component } from 'react';
import Interests from './components/Interests';
import RecentChats from './RecentChats';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userData: [],
      conversations: [],
      loaded: false,
    };
  }

  componentDidMount() {
    fetch('/users/a', {
      accept: 'application/json',
      headers: {
        'Authorization': localStorage.getItem('gnomad-auth-token')
      },
    }).then(data => data.json())
      .then(dataJson => {
        this.setState({
          userData: dataJson,
    })});

    fetch('/conversations', {
      accept: 'application/json',
      headers: {
        'Authorization': localStorage.getItem('gnomad-auth-token'),
        'Limit': '3',
      },
    })
    .then(data => data.json())
      .then(dataJson => {
        this.setState({
          conversations: dataJson,
          loaded: true,
        });
      });
  }


  render() {
    if (this.state.loaded === true) {
      return(
        <div className="profile-container ui centered container">
          <div className="max-width">
            <h1>{this.state.userData.user.first_name}</h1>

            <div className="profile-picture-container">
              <img src={this.state.userData.user.image_url} alt="profile-picture" className="border-radius-10"/>
          </div>
          <h2>A Little Bit About Me...</h2>
          <div className="bio-container ui centered container">
            <p>{this.state.userData.user.bio}</p>
          </div>
          <div className="ui section divider"></div>
          <Interests travel_interests={this.state.userData.travel_interests} host_interests={this.state.userData.host_interests} suggestions={this.state.userData.suggestions} />
         </div>
         <RecentChats conversations={this.state.conversations}/>
        </div>
    );
  }
  else {
    return ( <div>Internet gnomes are fetching your info...</div> );
  }
}
}
export default Dashboard;

@@ -120,24 +120,106 @@
 centChats';%0A
+import NewProfile from './NewProfile';%0Aimport %7B Button %7D from 'semantic-ui-react'%0A
 import %7B%0A  B
@@ -452,17 +452,167 @@
 se,%0A    
-%7D
+  editing: false,%0A    %7D;%0A    this.toggleEdit = this.toggleEdit.bind(this);%0A  %7D%0A%0A  toggleEdit(event) %7B%0A    this.setState(%7Bediting: !this.state.editing%7D)
 ;%0A  %7D%0A%0A 
@@ -1263,17 +1263,16 @@
 );%0A  %7D%0A%0A
-%0A
   render
@@ -1310,16 +1310,48 @@
 === true
+ && this.state.editing === false
 ) %7B%0A    
@@ -1702,32 +1702,192 @@
          %3C/div%3E%0A
+          %3Cdiv%3E%0A            %3CButton content='Edit' icon='edit' labelPosition='left' basic color='red'size='small' onClick=%7Bthis.toggleEdit%7D/%3E%0A          %3C/div%3E%0A%0A
           %3Ch2%3EA 
@@ -2383,16 +2383,123 @@
  );%0A  %7D%0A
+  else if (this.state.loaded === true && this.state.editing === true) %7B%0A    return ( %3CNewProfile /%3E );%0A  %7D%0A
   else %7B

add edit button and click handler to render profile form