import React from 'react';

class Item extends React.Component {
  constructor() {
  super();

  this.state = {
    loading: true
      };
    }

  componentDidMount() {
    this.setState({
      key: this.props.id,
      id: this.props.id,
      name: this.props.name,
      description: this.props.description,
      createdAt: this.props.createdAt,
      updatedAt: this.props.updatedAt,
      loading: !!!this.props.id
    });
  }
  // $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

  updateItem(newItem) {
    console.log(newItem);
    this.syncState({item: newItem});
  }

  // toggleChecked(event) {
  //   this.syncState({
  //     completed: this.refs.completed.checked
  //   });
  // }

  syncState(updatedState) {
    console.log("Syncing state!");

    this.setState({
      loading: true
    });

    let component = this;

    let newState = jQuery.extend({
      id: this.state.id,
      name: this.state.name,
      description: this.state.description
    }, updatedState);

    this.setState(newState);

    console.log(newState);

    jQuery.ajax({
      type: "PUT",
      url: `https://fierce-brook-27687.herokuapp.com/items/${this.props.id}.json`,
      data: JSON.stringify({
          item: newState
      }),
      contentType: "application/json",
      dataType: "json"
    })

    .done(function(data) {
      console.log(data);

      component.setState({
        id: data.item.id,
        name: data.item.name,
        description: data.item.description
      });
    })

    .fail(function(error) {
      console.log(error);
    })

    .always(function() {
      component.setState({
        loading: false
      });
      component.props.onChange();
    });
}

    render() {
      console.log(this.state);
        return (
          <div>
            <ul>
              <li>{this.state.id}</li>
              <li>{this.state.name}</li>
              <li>{this.state.description}</li>
              <li>{this.state.availability}</li>
            </ul>
          </div>
        );
    }
}

export default Item;

@@ -432,54 +432,85 @@
   %7D%0A
-  // $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%0A
+%0A// ############### Update item to create an new item #######################
 %0A  u
@@ -1064,24 +1064,61 @@
 (newState);%0A
+// adding the new created item to the
 %0A    jQuery.
@@ -1746,18 +1746,738 @@
     %7D);%0A
-%7D%0A
+  %7D%0A%0A// ########DESTROY#############################################################%0A  destroyMe(event) %7B%0A    event.preventDefault();%0A    console.log(%22Destroy clicked!%22);%0A%0A    let component = this;%0A    // delete item from json%0A    jQuery.ajax(%7B%0A      type: %22DELETE%22,%0A      url: %60https://fierce-brook-27687.herokuapp.com/items/$%7Bthis.props.id%7D.json%60,%0A      contentType: %22application/json%22,%0A      dataType: %22json%22%0A    %7D)%0A%0A    .done(function(data) %7B%0A      console.log(data);%0A      console.log(%22Deleted! :)%22);%0A    %7D)%0A%0A    .fail(function(error) %7B%0A      console.log(error);%0A    %7D)%0A%0A    .always(function() %7B%0A      component.props.onDestroy();%0A    %7D);%0A  %7D%0A  // #####################################################################
 %0A    ren

add destroy function to item.js