WIP

12 files changed, 405 insertions, 251 deletions

diff --git a/frontend/components/Header.js b/frontend/components/Header.js
index 5624fb5..5e1a620 100644
--- a/frontend/components/Header.js
+++ b/frontend/components/Header.js
@@ -6,6 +6,7 @@ import Login from './LoginAuth0';
 import Search from './Search';
 import NProgress from 'nprogress';
 import Router from 'next/router';
+import Signout from './Signout';
 
 Router.onRouteChangeStart = url => {
   console.log(`Loading: ${url}`);
@@ -23,20 +24,17 @@ class Header extends Component {
   }
 
   render() {
-    // const user = this.props.currentUserQuery.user || {};
-    // const { email = '' } = user;
     return (
       <div>
-        {/* <p>
-          Signed in as <strong>{email}</strong>
-        </p> */}
+        {this.props.currentUser.me ? this.props.currentUser.me.email : 'Not Signed in'}
+        <Signout />
         {/* <Cart /> */}
-        <Search />
+        {/* <Search /> */}
       </div>
     );
   }
 }
 
-const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' });
-// export default compose(userEnhancer)(Header);
-export default Header;
+const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' });
+export default compose(userEnhancer)(Header);
+// export default Header;
diff --git a/frontend/components/Item.js b/frontend/components/Item.js
index eb19918..d19af0e 100644
--- a/frontend/components/Item.js
+++ b/frontend/components/Item.js
@@ -1,10 +1,13 @@
-import styled from "styled-components";
-import slugify from "slugify";
-import { Link } from "../routes";
-import AddToCart from "./AddToCart";
-import makeImage from "../lib/image";
-import TakeMyMoney from "./TakeMyMoney";
-import formatMoney from "../lib/formatMoney";
+import React from 'react';
+import styled from 'styled-components';
+import slugify from 'slugify';
+import { compose } from 'react-apollo';
+import { Link } from '../routes';
+import AddToCart from './AddToCart';
+import makeImage from '../lib/image';
+import TakeMyMoney from './TakeMyMoney';
+import formatMoney from '../lib/formatMoney';
+import { removeItemMutation } from '../enhancers/enhancers';
 
 const Item = styled.div`
   background: #f3f3f3;
@@ -14,60 +17,53 @@ const Item = styled.div`
   }
 `;
 
-const ItemComponent = ({ item }) => (
-  <Item key={item.id}>
-    {item.image ? (
-      <img
-        key={item.image.secret}
-        src={makeImage(item.image)}
-        alt={item.title}
-      />
-    ) : null}
-    <h3>
-      <Link
-        route="item"
-        params={{
-          slug: slugify(item.title),
-          itemId: item.id
-        }}
-      >
-        <a>{item.title}</a>
-      </Link>
-    </h3>
+class ItemComponent extends React.Component {
+  removeItem = () => {
+    this.props.removeItem({ variables: { id: this.props.item.id } });
+  };
+  render() {
+    const item = this.props.item;
+    return (
+      <Item key={item.id}>
+        {item.image ? <img key={item.image.secret} src={makeImage(item.image)} alt={item.title} /> : null}
+        <h3>
+          <Link
+            route="item"
+            params={{
+              slug: slugify(item.title),
+              itemId: item.id,
+            }}
+          >
+            <a>{item.title}</a>
+          </Link>
+        </h3>
 
-    <p>{item.description}</p>
-    {/* {
+        <p>{item.description}</p>
 
-      <Link
-        href={{
-          pathname: '/admin/update',
-          query: { id: item.id },
-        }}
-      >
-        <a>Edit ✏️</a>
-      </Link>
+        <Link
+          href={{
+            pathname: '/admin/update',
+            query: { id: item.id },
+          }}
+        >
+          <a>Edit ✏️</a>
+        </Link>
 
-    } */}
+        <TakeMyMoney
+          id={item.id}
+          amount={item.price}
+          name={item.title} // the pop-in header title
+          description={item.description} // the pop-in header subtitle
+          image={makeImage(item.image)}
+        >
+          <button>Buy for {formatMoney(item.price)}</button>
+        </TakeMyMoney>
 
-    <TakeMyMoney
-      id={item.id}
-      amount={item.price}
-      name={item.title} // the pop-in header title
-      description={item.description} // the pop-in header subtitle
-      image={makeImage(item.image)}
-    >
-      <button>Buy for {formatMoney(item.price)}</button>
-    </TakeMyMoney>
-
-    <AddToCart id={item.id} />
-    <button
-      onClick={() =>
-        this.props.removeItemMutation({ variables: { id: item.id } })
-      }
-    >
-      &times; Delete item
-    </button>
-  </Item>
-);
+        {/* <AddToCart id={item.id} /> */}
+        <button onClick={this.removeItem}>&times; Delete item</button>
+      </Item>
+    );
+  }
+}
 
-export default ItemComponent;
+export default compose(removeItemMutation)(ItemComponent);
diff --git a/frontend/components/Items.js b/frontend/components/Items.js
index 3e2c738..a3f98c9 100644
--- a/frontend/components/Items.js
+++ b/frontend/components/Items.js
@@ -1,11 +1,11 @@
-import { Component } from "react";
-import { withApollo, graphql, compose } from "react-apollo";
-import styled from "styled-components";
-import Pagination from "./Pagination";
-import Item from "./Item";
-import { itemEnhancer } from "../enhancers/enhancers";
+import { Component } from 'react';
+import { withApollo, graphql, compose } from 'react-apollo';
+import styled from 'styled-components';
+import Pagination from './Pagination';
+import Item from './Item';
+import { itemEnhancer } from '../enhancers/enhancers';
 
-import { ALL_ITEMS_QUERY, DELETE_ITEM_MUTATION } from "../queries";
+import { ALL_ITEMS_QUERY, DELETE_ITEM_MUTATION } from '../queries';
 
 const Title = styled.h1`
   font-size: 10px;
@@ -19,7 +19,6 @@ const Items = styled.div`
 
 class ItemList extends Component {
   componentDidMount() {
-    console.log(this.props.allItemsQuery);
     this.prefetchNextItems(this.props.page);
   }
 
@@ -36,56 +35,35 @@ class ItemList extends Component {
     this.props.client.query({
       query: ALL_ITEMS_QUERY,
       variables: {
-        skip: page * 3 - 3
-      }
+        skip: page * 3 - 3,
+      },
     });
   };
 
   render() {
+    console.log(this.props);
     // 1
-    if (this.props.allItemsQuery && this.props.allItemsQuery.loading) {
+    if (this.props.itemsQuery && this.props.itemsQuery.loading) {
       return <div>Loading</div>;
     }
 
     // 2
-    if (this.props.allItemsQuery && this.props.allItemsQuery.error) {
-      console.log(this.props.allItemsQuery.error);
+    if (this.props.itemsQuery && this.props.itemsQuery.error) {
+      console.log(this.props.itemsQuery.error);
       return <div>Error</div>;
     }
-
+    console.log(this.props);
     // 3
-    const itemsToRender = this.props.allItemsQuery.items;
+    const itemsToRender = this.props.itemsQuery.items;
 
     return (
       <div>
         <Pagination page={this.props.page} />
         <Title>Items For Sale</Title>
-        <Items key={this.props.page}>
-          {itemsToRender.map((item, i) => <Item key={item.id} item={item} />)}
-        </Items>
+        <Items key={this.props.page}>{itemsToRender.map((item, i) => <Item key={item.id} item={item} />)}</Items>
       </div>
     );
   }
 }
 
-// 1
-
-// We export the graphQL HOC - this will fetch the data and inject it into the ItemList compeont via props
-
-const deleteItemEnhancer = graphql(DELETE_ITEM_MUTATION, {
-  name: "removeItemMutation",
-  options: {
-    update: (proxy, { data: { deleteItem } }) => {
-      // grab the data from our cache
-      const data = proxy.readQuery({ query: ALL_ITEMS_QUERY });
-
-      // filter out the deleted item
-      data.allItems = data.allItems.filter(item => item.id !== deleteItem.id);
-
-      // and then "set state" (update cache), so it will update wherever we have used this data on the page
-      proxy.writeQuery({ query: ALL_ITEMS_QUERY, data });
-    }
-  }
-});
-
-export default withApollo(compose(itemEnhancer, deleteItemEnhancer)(ItemList));
+export default withApollo(compose(itemEnhancer)(ItemList));
diff --git a/frontend/components/Page.js b/frontend/components/Page.js
index ceb0939..291bdcd 100644
--- a/frontend/components/Page.js
+++ b/frontend/components/Page.js
@@ -1,8 +1,26 @@
-import styled from "styled-components";
-import Header from "./Header";
-import Meta from "./Meta";
-import Nav from "./Nav";
-import CartList from "./CartList";
+import styled from 'styled-components';
+import Header from './Header';
+import Meta from './Meta';
+import Nav from './Nav';
+import CartList from './CartList';
+import { Component } from 'react';
+
+class ErrorBoundary extends Component {
+  state = {
+    error: null,
+    errorInfo: null,
+  };
+  componentDidCatch(error, errorInfo) {
+    console.log('Caught an erorrror!');
+    this.setState({ error, errorInfo });
+  }
+  render() {
+    if (this.state.error) {
+      return <p>Shit! AN error!</p>;
+    }
+    return this.props.children;
+  }
+}
 
 const StyledPage = styled.div`
   font-family: sans-serif;
@@ -13,11 +31,13 @@ const StyledPage = styled.div`
 
 const Page = ({ children }) => (
   <StyledPage className="main">
-    <Meta />
-    <Nav />
-    {/* <Header /> */}
-    {/* <CartList /> */}
-    {children}
+    <ErrorBoundary>
+      <Meta />
+      <Nav />
+      <Header />
+      {/* <CartList /> */}
+      {children}
+    </ErrorBoundary>
   </StyledPage>
 );
 
diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js
index 28785be..2cb5080 100644
--- a/frontend/components/Pagination.js
+++ b/frontend/components/Pagination.js
@@ -1,16 +1,16 @@
-import React, { Component } from "react";
-import { graphql, gql, compose } from "react-apollo";
-import { ALL_ITEMS_QUERY } from "../queries";
-import withData from "../lib/withData";
-import { Link } from "../routes";
-import { itemEnhancer } from "../enhancers/enhancers";
+import React, { Component } from 'react';
+import { graphql, gql, compose } from 'react-apollo';
+import { ALL_ITEMS_QUERY } from '../queries';
+import withData from '../lib/withData';
+import { Link } from '../routes';
+import { itemEnhancer } from '../enhancers/enhancers';
 
 const Pagination = props => {
-  const { loading, error } = props.allItemsQuery;
+  const { loading, error } = props.itemsQuery;
 
   if (loading) return <p>Loading Item...</p>;
 
-  const { aggregate, pageInfo } = props.allItemsQuery.itemsConnection;
+  const { aggregate, pageInfo } = props.itemsQuery.itemsConnection;
 
   const { page } = props;
   const pages = Math.floor(aggregate.count / 3);
diff --git a/frontend/components/RequestReset.js b/frontend/components/RequestReset.js
new file mode 100644
index 0000000..de16751
--- /dev/null
+++ b/frontend/components/RequestReset.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import { graphql, compose } from 'react-apollo';
+import { REQUEST_RESET_MUTATION } from '../queries';
+
+class ResetRequest extends Component {
+  state = {
+    email: `wesbos@gmail.com`,
+    password: 'abc123',
+    errors: [],
+  };
+
+  requestReset = async e => {
+    e.preventDefault();
+    console.log(this.state.email);
+    const res = await this.props.requestReset({
+      variables: {
+        email: this.state.email,
+      },
+    });
+    if (res.errors) {
+      this.setState({ errors: res.errors });
+    }
+    console.log(res);
+    // // pull the values from state
+    // const { email, password } = this.state;
+    // this.setState({ loading: true, errors: [] });
+    // const res = await this.props.signin({
+    //   // pass in those variables from state
+    //   variables: { name, email, password },
+    // });
+    // if (res.errors) {
+    //   this.setState({ errors: res.errors });
+    //   return;
+    // }
+    // localStorage.setItem('token', res.data.signin.token);
+    // // TODO refetch current user query
+    // this.props.currentUser.refetch();
+    // this.setState({ loading: false });
+  };
+
+  saveToState = e => {
+    const { name, value } = e.target;
+    this.setState({ [name]: value });
+  };
+
+  render() {
+    return (
+      <div>
+        {this.state.loading ? 'LOADING...' : 'Ready!'}
+
+        {this.state.errors ? this.state.errors.map(err => <p>{err.message}</p>) : null}
+        <h2>Request a Reset</h2>
+        <form onSubmit={this.requestReset}>
+          <label htmlFor="email">
+            Email
+            <input value={this.state.email} onChange={this.saveToState} name="email" type="text" placeholder="email" />
+          </label>
+
+          <button type="submit">Request Reset!</button>
+        </form>
+      </div>
+    );
+  }
+}
+
+// When we submit this mutation, we need to update our store - we have a few ways to do that:
+// One - we can go nucular and run refetchQueries() which will just go get everything - this is easy, but at the cost of efficiency.
+
+const requestResetEnhancer = graphql(REQUEST_RESET_MUTATION, { name: 'requestReset' });
+
+export default compose(requestResetEnhancer)(ResetRequest);
diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
new file mode 100644
index 0000000..aac1222
--- /dev/null
+++ b/frontend/components/Signin.js
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import { graphql, compose } from 'react-apollo';
+import { SIGNIN_MUTATION, CURRENT_USER_QUERY } from '../queries';
+
+class Signin extends Component {
+  state = {
+    email: `wesbos@gmail.com`,
+    password: 'abc123',
+    errors: [],
+  };
+
+  loginUser = async e => {
+    e.preventDefault();
+    // pull the values from state
+    const { email, password } = this.state;
+    this.setState({ loading: true, errors: [] });
+    const res = await this.props.signin({
+      // pass in those variables from state
+      variables: { name, email, password },
+    });
+    if (res.errors) {
+      this.setState({ errors: res.errors });
+      return;
+    }
+    localStorage.setItem('token', res.data.signin.token);
+    // TODO refetch current user query
+    this.props.currentUser.refetch();
+
+    this.setState({ loading: false });
+  };
+
+  saveToState = e => {
+    const { name, value } = e.target;
+    this.setState({ [name]: value });
+  };
+
+  render() {
+    return (
+      <div>
+        {this.state.loading ? 'LOADING...' : 'Ready!'}
+
+        {this.state.errors ? this.state.errors.map(err => <p>{err.message}</p>) : null}
+
+        <form onSubmit={this.loginUser}>
+          <label htmlFor="email">
+            Email
+            <input value={this.state.email} onChange={this.saveToState} name="email" type="text" placeholder="email" />
+          </label>
+
+          <label htmlFor="password">
+            Password
+            <input
+              type="password"
+              name="password"
+              id="password"
+              className="password"
+              placeholder="password"
+              value={this.state.password}
+              onChange={this.saveToState}
+            />
+          </label>
+
+          <button type="submit">Sign In!</button>
+        </form>
+      </div>
+    );
+  }
+}
+
+// When we submit this mutation, we need to update our store - we have a few ways to do that:
+// One - we can go nucular and run refetchQueries() which will just go get everything - this is easy, but at the cost of efficiency.
+
+const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' });
+const signinEnhancer = graphql(SIGNIN_MUTATION, { name: 'signin' });
+
+export default compose(signinEnhancer, userEnhancer)(Signin);
diff --git a/frontend/components/Signout.js b/frontend/components/Signout.js
new file mode 100644
index 0000000..97eef40
--- /dev/null
+++ b/frontend/components/Signout.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { graphql, compose } from 'react-apollo';
+import { CURRENT_USER_QUERY } from '../queries';
+
+class Signout extends Component {
+  signout = () => {
+    console.log('Signing Out');
+    localStorage.removeItem('token');
+    this.props.currentUser.refetch();
+  };
+
+  render() {
+    const { me, loading, error } = this.props.currentUser;
+    if (!me || loading || error) return null;
+    return <button onClick={this.signout}>Sign Out of {me.id}👋 🏻</button>;
+  }
+}
+
+const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' });
+export default compose(userEnhancer)(Signout);
diff --git a/frontend/components/Signup.js b/frontend/components/Signup.js
index 57e2569..746f1e4 100644
--- a/frontend/components/Signup.js
+++ b/frontend/components/Signup.js
@@ -1,94 +1,92 @@
 import React, { Component } from 'react';
-import { graphql, gql } from 'react-apollo';
-import { CREATE_USER_MUTATION } from '../queries';
+import { graphql, compose } from 'react-apollo';
+import { SIGNUP_MUTATION, CURRENT_USER_QUERY } from '../queries';
 
 class Signup extends Component {
-  constructor() {
-    super();
-    const idToken = typeof window !== 'undefined' ? localStorage.getItem('auth0IdToken') || '' : '';
-    this.state = {
-      email: '',
-      name: '',
-      idToken,
-      error: undefined,
-    };
-  }
+  state = {
+    email: `wesbos+${Date.now()}@gmail.com`,
+    name: 'Wes Bos',
+    password: 'abc123',
+    error: undefined,
+  };
+
+  createUser = async e => {
+    e.preventDefault();
+    // pull the values from state
+    const { email, name, password } = this.state;
+    // create a mutation
+    // TODO: handle any errors
+    // turn loading on
+    this.setState({ loading: true });
+    console.log({ name, email, password });
+    try {
+      const res = await this.props.signup({
+        // pass in those variables from state
+        variables: { name, email, password },
+      });
+      localStorage.setItem('token', res.data.signup.token);
+      // TODO refetch current user query
+      this.props.currentUser.refetch();
+    } catch (error) {
+      this.setState({ error });
+      console.dir(error);
+    }
+    this.setState({ loading: false });
+  };
+
+  saveToState = e => {
+    const { name, value } = e.target;
+    this.setState({ [name]: value });
+  };
 
   render() {
     return (
       <div>
         {this.state.loading ? 'LOADING...' : 'Ready!'}
 
-        {this.state.error ? <p>{this.state.error.message}</p> : ''}
+        {this.state.error ? <p>{this.state.error.message}</p> : null}
 
-        <form onSubmit={this._createUser}>
-          <p>
+        <form onSubmit={this.createUser}>
+          <label htmlFor="email">
             Email
-            <input
-              value={this.state.email}
-              onChange={e => this.setState({ email: e.target.value })}
-              type="text"
-              placeholder="email"
-            />
-          </p>
+            <input value={this.state.email} onChange={this.saveToState} name="email" type="text" placeholder="email" />
+          </label>
 
-          <p>
+          <label htmlFor="name">
             Name
-            <input
-              value={this.state.name}
-              onChange={e => this.setState({ name: e.target.value })}
-              type="text"
-              placeholder="name"
-            />
-          </p>
+            <input type="text" name="name" placeholder="name" value={this.state.name} onChange={this.saveToState} />
+          </label>
 
-          <p>
-            idToken
+          <label htmlFor="password">
+            Password
             <input
-              disabled
-              value={this.state.idToken}
-              onChange={e => this.setState({ idToken: e.target.value })}
-              type="text"
-              placeholder="name"
+              type="password"
+              name="password"
+              id="password"
+              className="password"
+              placeholder="password"
+              value={this.state.password}
+              onChange={this.saveToState}
             />
-          </p>
+          </label>
 
           <button type="submit">Submit</button>
         </form>
       </div>
     );
   }
-
-  _createUser = async e => {
-    e.preventDefault();
-    // pull the values from state
-    const { email, name, idToken } = this.state;
-    // create a mutation
-    // TODO: handle any errors
-    // turn loading on
-    this.setState({ loading: true });
-    console.log(name, email, idToken);
-    try {
-      const res = await this.props.createUserMutation({
-        // pass in those variables from state
-        variables: { name, email, idToken },
-      });
-    } catch (error) {
-      this.setState({ error });
-      console.dir(error);
-    }
-    this.setState({ loading: false });
-  };
 }
+
 // When we submit this mutation, we need to update our store - we have a few ways to do that:
 // One - we can go nucular and run refetchQueries() which will just go get everything - this is easy, but at the cost of efficiency.
 
-export default graphql(CREATE_USER_MUTATION, {
-  name: 'createUserMutation',
+const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' });
+
+const signupEnhancer = graphql(SIGNUP_MUTATION, {
+  name: 'signup',
   options: {
-    // Easy, but slow
-    // refetchQueries: ['AllLinksQuery']
-    // This is much Better / efficient
-    // Notice how the variable is called createItem - that is because createItem is the name of the query!
+    refetchQueries: ['currentUser'],
   },
-})(Signup);
+});
+
+export default compose(userEnhancer, signupEnhancer)(Signup);
diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js
index 297c33d..9d18074 100644
--- a/frontend/components/SingleItem.js
+++ b/frontend/components/SingleItem.js
@@ -1,36 +1,22 @@
 import { graphql, compose } from 'react-apollo';
-import { Motion, spring } from 'react-motion';
 import { SINGLE_ITEM_QUERY } from '../queries';
+import { singleItemEnhancer } from '../enhancers/enhancers';
 import makeImage from '../lib/image';
 
 const SingleItem = props => {
-  if (!props.findItem.Item) return <p>Not ready</p>;
-  console.log(props.findItem.Item);
-
-  if (props.loading) return <p>Loading...</p>;
+  if (props.loading || !props.item) return <p>Loading...</p>;
   if (props.error) return <p>Error...</p>;
-
-  const item = props.findItem.Item;
+  console.log(props);
+  const item = props.findItem.items[0];
   return (
     <div>
       <img src={makeImage(item.image)} alt={item.title} />
       <h2>Viewing {item.title}</h2>
-
-      <Motion defaultStyle={{ x: 0 }} style={{ x: spring(100) }}>
-        {value => <div>{value.x}</div>}
-      </Motion>
+      <p>{item.description}</p>
     </div>
   );
 };
 
-const ComponentWithMutations = compose(
-  graphql(SINGLE_ITEM_QUERY, {
-    name: 'findItem',
-    // This comes from Props
-    options: ({ id }) => ({
-      variables: { id },
-    }),
-  })
-)(SingleItem);
+const ComponentWithMutations = compose(singleItemEnhancer)(SingleItem);
 
 export default ComponentWithMutations;
diff --git a/frontend/components/TakeMyMoney.js b/frontend/components/TakeMyMoney.js
index d68cca1..042e9c8 100644
--- a/frontend/components/TakeMyMoney.js
+++ b/frontend/components/TakeMyMoney.js
@@ -1,25 +1,25 @@
 import { Component } from 'react';
 import StripeCheckout from 'react-stripe-checkout';
-import { CREATE_ORDER_MUTATION, CURRENT_USER_QUERY } from '../queries';
 import { graphql, compose } from 'react-apollo';
-
+import { CREATE_ORDER_MUTATION, CURRENT_USER_QUERY } from '../queries';
 
 class TakeMyMoney extends Component {
-  onToken = async (res) => {
+  onToken = async res => {
+    console.log('We got a toooken!');
     const token = res.id;
     const userId = this.props.currentUserQuery.user.id;
     const itemId = this.props.id;
     console.log(`Going to make a purchase with ${token}`);
-    console.log(`THe person that bought this was ${userId}`)
-    console.log(`The item id is ${itemId}`)
-    const charge = await this.props.createOrder({ variables: { token, userId, itemId }});
+    console.log(`THe person that bought this was ${userId}`);
+    console.log(`The item id is ${itemId}`);
+    const charge = await this.props.createOrder({ variables: { token, userId, itemId } });
     alert(`Back from the charge! ${charge.id}`);
     console.log(charge);
-
-  }
+  };
   render() {
-    const user = this.props.currentUserQuery.user || {};
-    const email = user.email || '';
+    // const user = this.props.currentUserQuery.user || {};
+    // const email = user.email || '';
+    const email = 'wesbos@gmail.com';
     return (
       <div>
         <StripeCheckout
@@ -34,10 +34,10 @@ class TakeMyMoney extends Component {
           {this.props.children}
         </StripeCheckout>
       </div>
-    )
+    );
   }
 }
 
 const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' });
 const createOrderEnhancer = graphql(CREATE_ORDER_MUTATION, { name: 'createOrder' });
-export default compose(userEnhancer, createOrderEnhancer)(TakeMyMoney);
+export default compose(createOrderEnhancer)(TakeMyMoney);
diff --git a/frontend/components/UpdateItem.js b/frontend/components/UpdateItem.js
index 27be90f..febe2ad 100644
--- a/frontend/components/UpdateItem.js
+++ b/frontend/components/UpdateItem.js
@@ -2,58 +2,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 {
+import { singleItemEnhancer } from '../enhancers/enhancers';
+
+class UpdateItem extends Component {
   state = {
-    ...this.props.findItem.Item,
+    item: {},
   };
+  componentDidMount() {
+    console.log(this.props);
+  }
 
   saveToState = e => {
     let { name, value, type } = e.target;
     if (type === 'number') {
       value = parseInt(value);
     }
-
-    this.setState({ [name]: value });
+    console.log('Saving to state');
+    const item = { ...this.state.item };
+    item[name] = value;
+    this.setState({ item });
   };
 
-  _createLink = async e => {
+  updateItem = 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
+    // 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 });
-    console.log(this.state);
     const res = await this.props.updateItem({
       // pass in those variables from state
       variables: {
-        ...this.state,
+        ...this.props.findItem.items[0],
+        ...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>
         <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} />
+        <form onSubmit={this.updateItem}>
+          <fieldset disabled={this.state.loading}>
+            <label htmlFor="title">
+              Title
+              <input id="title" defaultValue={item.title} name="title" onChange={this.saveToState} type="text" />
+            </label>
 
-          <label htmlFor="fullPrice">Full Price</label>
-          <input type="number" name="fullPrice" onChange={this.saveToState} value={this.state.fullPrice} />
+            <label htmlFor="description">
+              Description
+              <textarea defaultValue={item.description} name="description" onChange={this.saveToState} />
+            </label>
 
-          <button type="submit">Save...</button>
+            <label htmlFor="price">
+              Price
+              <input type="number" name="price" onChange={this.saveToState} defaultValue={item.price} />
+            </label>
+            <button type="submit">Save...</button>
+          </fieldset>
         </form>
       </div>
     );
@@ -61,15 +78,9 @@ class UpdateLink extends Component {
 }
 
 const ComponentWithMutations = compose(
-  // First, query for getting the link
-  graphql(SINGLE_ITEM_QUERY, {
-    name: 'findItem',
-    options: ({ id }) => ({
-      variables: { id },
-    }),
-  }),
+  singleItemEnhancer,
   // Second, the mutation for updating the link
   graphql(UPDATE_LINK_MUTATION, { name: 'updateItem' })
-)(UpdateLink);
+)(UpdateItem);
 
 export default ComponentWithMutations;