import AddContactMutation from '../mutations/AddContactMutation';
import AddContact from './AddContact/AddContact';
import ContactDetails from './ContactDetails/ContactDetails';

class App extends React.Component {
  _handleAddContactSave = (name, email, phone, notes) => {
    Relay.Store.update(
      new AddContactMutation({
        name,
        email,
        phone,
        notes,
        viewer: this.props.viewer
      })
    );
  }
  renderContactNames() {
    return this.props.viewer.contacts.edges.map(edge =>
      <li key={edge.node.id}>{edge.node.name}</li>
    );
  }
  render() {
    return <div>
      <h1>Contact Organizer</h1>
      <p>Total contacts: {this.props.viewer.contacts.totalCount}</p>
      <ul>{this.renderContactNames()}</ul>
      <AddContact onSave={this._handleAddContactSave}/>
      <ContactDetails
        contacts={this.props.viewer.contacts}
        viewer={this.props.viewer}
      />
    </div>;
  }
}

export default Relay.createContainer(App, {
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        contacts(first: 123131) {
          edges {
            node {
              id,
              name,
            },
          },
          totalCount,
          ${ContactDetails.getFragment('contacts')},
        },
        ${AddContactMutation.getFragment('viewer')},
      }
    `,
  },
});

@@ -439,151 +439,8 @@
   %7D%0A
-  renderContactNames() %7B%0A    return this.props.viewer.contacts.edges.map(edge =%3E%0A      %3Cli key=%7Bedge.node.id%7D%3E%7Bedge.node.name%7D%3C/li%3E%0A    );%0A  %7D%0A
   re
@@ -571,51 +571,8 @@
 /p%3E%0A
-      %3Cul%3E%7Bthis.renderContactNames()%7D%3C/ul%3E%0A
     
@@ -959,28 +959,8 @@
 id,%0A
-              name,%0A
     

Clean up mock user list from main App component