From 169b0953ad91f22bb3b2bf2d80d87ebfbe30d45d Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 22 Mar 2018 21:11:15 -0400
Subject: yay

---
 frontend/components/UpdateItem.js | 96 +++++++++++++++++++--------------------
 1 file changed, 47 insertions(+), 49 deletions(-)

(limited to 'frontend/components/UpdateItem.js')

diff --git a/frontend/components/UpdateItem.js b/frontend/components/UpdateItem.js
index 4841006..4292d41 100644
--- a/frontend/components/UpdateItem.js
+++ b/frontend/components/UpdateItem.js
@@ -1,16 +1,15 @@
 import React, { Component } from 'react';
-import { graphql, gql, compose } from 'react-apollo';
-import { SINGLE_ITEM_QUERY, UPDATE_LINK_MUTATION } from '../queries';
+import { Query, Mutation } from 'react-apollo';
+import { SINGLE_ITEM_QUERY, UPDATE_ITEM_MUTATION } from '../queries';
 import Form from './styles/Form';
-
-import { singleItemEnhancer } from '../enhancers/enhancers';
+import Error from './ErrorMessage';
+import Dump from './Dump';
 
 class UpdateItem extends Component {
   state = {
     item: {},
   };
 
-
   saveToState = e => {
     let { name, value, type } = e.target;
     if (type === 'number') {
@@ -22,64 +21,63 @@ class UpdateItem extends Component {
     this.setState({ item });
   };
 
-  updateItem = async e => {
+  updateItem = async (e, updateItemMutation) => {
+    console.log('Updating Item');
     e.preventDefault();
-    // pull the values from state
-    const { description, title } = this.state;
-    const { id } = this.props;
-    // create a mutation
-    // TODO: handle any errors. If you send an extra field it should break -how do we display those errors if they are currently only visible via the network tab?
-    // turn loading on
-    this.setState({ loading: true });
-    const res = await this.props.updateItem({
+
+    const res = await updateItemMutation({
       // pass in those variables from state
       variables: {
-        ...this.props.findItem.items[0],
+        id: this.props.id,
         ...this.state.item,
       },
     });
     console.log(res);
-    this.setState({ loading: false });
   };
 
   render() {
-    if (this.props.findItem.loading) {
-      return <p>Loading...</p>;
-    }
-
-    const item = this.props.findItem.items[0];
     return (
-      <div>
-        <Form onSubmit={this.updateItem}>
-          <h2>Edit {item.title}</h2>
-          {this.state.loading ? 'LOADING...' : 'Ready!'}
-          <fieldset disabled={this.state.loading}>
-            <label htmlFor="title">
-              Title
-              <input id="title" defaultValue={item.title} name="title" onChange={this.saveToState} type="text" />
-            </label>
+      <Query query={SINGLE_ITEM_QUERY} variables={{ id: this.props.id }}>
+        {({ data: { items } }) => {
+          if (!items || !items.length) return <p>Item Not Found</p>;
+          const [item] = items;
+          return (
+            <Mutation mutation={UPDATE_ITEM_MUTATION}>
+              {(updateItemMutation, { error, loading }) => (
+                <Form onSubmit={e => this.updateItem(e, updateItemMutation)}>
+                  <Error error={error} />
+                  <h2>Edit {item.title}</h2>
+                  <fieldset disabled={loading} aria-busy={loading}>
+                    <label htmlFor="title">
+                      Title
+                      <input
+                        id="title"
+                        defaultValue={item.title}
+                        name="title"
+                        onChange={this.saveToState}
+                        type="text"
+                      />
+                    </label>
 
-            <label htmlFor="description">
-              Description
-              <textarea defaultValue={item.description} name="description" onChange={this.saveToState} />
-            </label>
+                    <label htmlFor="description">
+                      Description
+                      <textarea defaultValue={item.description} name="description" onChange={this.saveToState} />
+                    </label>
 
-            <label htmlFor="price">
-              Price
-              <input type="number" name="price" onChange={this.saveToState} defaultValue={item.price} />
-            </label>
-            <button type="submit">Save...</button>
-          </fieldset>
-        </Form>
-      </div>
+                    <label htmlFor="price">
+                      Price
+                      <input type="number" name="price" onChange={this.saveToState} defaultValue={item.price} />
+                    </label>
+                    <button type="submit">Save...</button>
+                  </fieldset>
+                </Form>
+              )}
+            </Mutation>
+          );
+        }}
+      </Query>
     );
   }
 }
 
-const ComponentWithMutations = compose(
-  singleItemEnhancer,
-  // Second, the mutation for updating the link
-  graphql(UPDATE_LINK_MUTATION, { name: 'updateItem' })
-)(UpdateItem);
-
-export default ComponentWithMutations;
+export default UpdateItem;
-- 
cgit v1.3