import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import fetch from 'isomorphic-fetch'

export default class IndexPage extends React.Component {
  static async getInitialProps({res}) {
    const peopleDbHost = res ? process.env.PEOPLE_DB : window.peopleDbHost

    return { peopleDbHost, people: await (await fetch(`http://${peopleDbHost}/people`)).json()}
  }

  componentWillMount() {}

  render() {
    const {people} = this.props
    return (
      <div className="container">
        <script dangerouslySetInnerHTML={{__html: `window.peopleDbHost = ${JSON.stringify(this.props.peopleDbHost)}`}}>
        </script>
        <Head>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossOrigin="anonymous" />
        </Head>
        <style jsx>{`
          .panel {
            max-width: 50rem;
            margin: 10px;
          }
        `}
        </style>
        <div className="panel panel-default">
          <div className="panel-heading"><h1 className="panel-title">People</h1></div>
          <ul className="list-group">{
            people.map(person => (
              <Link href={`/person?id=${person.id}`} key={person.id}>
                <a className="list-group-item">
                  <div>
                    <h4 className="list-group-item-heading">{person.first} {person.last}</h4>
                    <p className="list-group-item-text">age {person.age}</p>
                  </div>
                </a>
              </Link>
            ))
          }</ul>
          <div className="panel-footer"><Link href="/person"><button>Add</button></Link></div>
        </div>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" />
      </div>
    )
  }
}

@@ -397,28 +397,69 @@
   co
-mponentWillMount() %7B
+nstructor(props) %7B%0A    super(props)%0A    this.state = props%0A  
 %7D%0A%0A 
@@ -496,21 +496,22 @@
  = this.
-props
+state%0A
 %0A    ret
@@ -1049,16 +1049,81 @@
       %7D%0A
+          .delete-button %7B%0A            float: right;%0A          %7D%0A
         
@@ -1487,24 +1487,222 @@
       %3Cdiv%3E%0A
+                    %3Cbutton className=%22btn btn-xs delete-button%22%0A                      onClick=%7B(ev) =%3E this.deletePerson(ev, person.id)%7D%3E%0A                      delete%0A                    %3C/button%3E%0A
             
@@ -2269,11 +2269,243 @@
    )%0A  %7D
+%0A%0A  async deletePerson(ev, id) %7B%0A    ev.stopPropagation()%0A    await fetch(%60http://$%7Bthis.state.peopleDbHost%7D/people/$%7Bid%7D%60, %7B%0A      method: 'DELETE'%0A    %7D)%0A%0A    this.setState(%7Bpeople: this.state.people.filter(p =%3E p.id !== id)%7D)%0A  %7D
 %0A%7D%0A

delete works