1 files changed, 75 insertions, 0 deletions
diff --git a/frontend/components/UpdateItem.js b/frontend/components/UpdateItem.js
new file mode 100644
index 0000000..27be90f
--- /dev/null
+++ b/frontend/components/UpdateItem.js
@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import { graphql, gql, compose } from 'react-apollo';
+import { SINGLE_ITEM_QUERY, UPDATE_LINK_MUTATION } from '../queries';
+
+class UpdateLink extends Component {
+  state = {
+    ...this.props.findItem.Item,
+  };
+
+  saveToState = e => {
+    let { name, value, type } = e.target;
+    if (type === 'number') {
+      value = parseInt(value);
+    }
+
+    this.setState({ [name]: value });
+  };
+
+  _createLink = async e => {
+    e.preventDefault();
+    // pull the values from state
+    const { description, title } = this.state;
+    const { id } = this.props;
+    // create a mutation
+    // TODO: handle any errors
+    // turn loading on
+    this.setState({ loading: true });
+    console.log(this.state);
+    const res = await this.props.updateItem({
+      // pass in those variables from state
+      variables: {
+        ...this.state,
+      },
+    });
+    this.setState({ loading: false });
+  };
+
+  render() {
+    return (
+      <div>
+        <h2>Edit {this.props.id}</h2>
+        {this.state.loading ? 'LOADING...' : 'Ready!'}
+        <form onSubmit={this._createLink}>
+          <label htmlFor="title">Title</label>
+          <input value={this.state.title} name="title" onChange={this.saveToState} type="text" />
+
+          <label htmlFor="description">Description</label>
+          <textarea value={this.state.description} name="description" onChange={this.saveToState} />
+
+          <label htmlFor="price">Price</label>
+          <input type="number" name="price" onChange={this.saveToState} value={this.state.price} />
+
+          <label htmlFor="fullPrice">Full Price</label>
+          <input type="number" name="fullPrice" onChange={this.saveToState} value={this.state.fullPrice} />
+
+          <button type="submit">Save...</button>
+        </form>
+      </div>
+    );
+  }
+}
+
+const ComponentWithMutations = compose(
+  // First, query for getting the link
+  graphql(SINGLE_ITEM_QUERY, {
+    name: 'findItem',
+    options: ({ id }) => ({
+      variables: { id },
+    }),
+  }),
+  // Second, the mutation for updating the link
+  graphql(UPDATE_LINK_MUTATION, { name: 'updateItem' })
+)(UpdateLink);
+
+export default ComponentWithMutations;