From 072eca0e5038a7755ca9b2c94dfe1a0c3f110968 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 24 May 2018 15:19:21 -0400
Subject: colocate queries and components

---
 frontend/components/AddToCart.js      | 52 +++++++++++++++++++++++------------
 frontend/components/Cart.js           | 43 +++++++++++++++--------------
 frontend/components/CreateItem.js     | 23 +++++++++++++++-
 frontend/components/DeleteItem.js     | 19 +++++++++----
 frontend/components/EditUser.js       | 17 ++++++++++--
 frontend/components/Items.js          | 17 +++++++++++-
 frontend/components/Nav.js            | 12 +++-----
 frontend/components/Order.js          | 22 ++++++++++++++-
 frontend/components/OrderList.js      | 22 ++++++++++++++-
 frontend/components/Pagination.js     | 15 ++++++++--
 frontend/components/Permissions.js    | 25 ++++++++++++++++-
 frontend/components/PleaseSignIn.js   |  2 +-
 frontend/components/RemoveFromCart.js | 21 ++++++++------
 frontend/components/Reset.js          | 14 +++++++++-
 frontend/components/ResetRequest.js   | 11 +++++++-
 frontend/components/Search.js         | 12 +++++++-
 frontend/components/Signin.js         | 21 +++++++++++---
 frontend/components/Signout.js        | 14 ++++++++--
 frontend/components/Signup.js         | 20 +++++++++++---
 frontend/components/SingleItem.js     | 15 +++++++++-
 frontend/components/TakeMyMoney.js    | 21 ++++++++++++--
 frontend/components/UpdateItem.js     | 13 +++++++--
 frontend/components/User.js           | 45 ++++++++++++++++++++++++++++++
 23 files changed, 386 insertions(+), 90 deletions(-)
 create mode 100644 frontend/components/User.js

(limited to 'frontend/components')

diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index 7cb0856..03242a4 100644
--- a/frontend/components/AddToCart.js
+++ b/frontend/components/AddToCart.js
@@ -1,10 +1,24 @@
 import { Component } from 'react';
 import { Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
-import {
-  ADD_TO_CART_MUTATION,
-  CURRENT_USER_QUERY,
-} from '../queries/queries.graphql';
+import gql from 'graphql-tag';
+import User, { CURRENT_USER_QUERY } from './User';
+
+const ADD_TO_CART_MUTATION = gql`
+  mutation addToCart($id: ID!) {
+    addToCart(id: $id) {
+      id
+      quantity
+      item {
+        id
+        price
+        description
+        image
+        title
+      }
+    }
+  }
+`;
 
 class AddToCart extends Component {
   static propTypes = {
@@ -15,9 +29,7 @@ class AddToCart extends Component {
     const newCartItem = payload.data.addToCart;
     const data = cache.readQuery({ query: CURRENT_USER_QUERY });
 
-    const existingIndex = data.me.cart.findIndex(
-      cartItem => cartItem.id === newCartItem.id,
-    );
+    const existingIndex = data.me.cart.findIndex(cartItem => cartItem.id === newCartItem.id);
     if (existingIndex >= 0) {
       // already in cache, just replace it
       data.me.cart = [
@@ -34,19 +46,23 @@ class AddToCart extends Component {
   render() {
     const { id } = this.props;
     return (
-      <Mutation
-        mutation={ADD_TO_CART_MUTATION}
-        variables={{ id }}
-        update={this.update}
-      >
-        {(addToCart, { loading }) => (
-          <button disabled={loading} onClick={addToCart}>
-            🛒 Add{loading && 'ing'} To Cart
-          </button>
-        )}
-      </Mutation>
+      <User>
+        {({ data: { me }, loading }) => {
+          if (!me || loading) return null;
+          return (
+            <Mutation mutation={ADD_TO_CART_MUTATION} variables={{ id }} update={this.update}>
+              {(addToCart, { loading }) => (
+                <button disabled={loading} onClick={addToCart}>
+                  🛒 Add{loading && 'ing'} To Cart
+                </button>
+              )}
+            </Mutation>
+          );
+        }}
+      </User>
     );
   }
 }
 
 export default AddToCart;
+export { ADD_TO_CART_MUTATION };
diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js
index a815b78..7e8a9c5 100644
--- a/frontend/components/Cart.js
+++ b/frontend/components/Cart.js
@@ -1,14 +1,11 @@
 import React from 'react';
 import { Mutation, Query } from 'react-apollo';
 import { adopt } from 'react-adopt';
+import gql from 'graphql-tag';
 import TakeMyMoney from './TakeMyMoney';
 import formatMoney from '../lib/formatMoney';
 import CartItem from './CartItem';
-import {
-  CURRENT_USER_QUERY,
-  LOCAL_STATE_QUERY,
-  TOGGLE_CART_MUTATION,
-} from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from './User';
 import calcTotalPrice from '../lib/calcTotalPrice';
 import Error from './ErrorMessage';
 import CartStyles from './styles/CartStyles';
@@ -16,46 +13,51 @@ import Supreme from './styles/Supreme';
 import CloseButton from './styles/CloseButton';
 import SickButton from './styles/SickButton';
 
+const LOCAL_STATE_QUERY = gql`
+  query {
+    cartOpen @client
+  }
+`;
+
+const TOGGLE_CART_MUTATION = gql`
+  mutation {
+    toggleCart @client
+  }
+`;
+
 const Composed = adopt({
   toggleCart: ({ render }) => (
     <Mutation mutation={TOGGLE_CART_MUTATION}>
       {(mutate, result) => render({ mutate, result })}
     </Mutation>
   ),
-  localState: <Query query={LOCAL_STATE_QUERY} />,
-  currentUser: <Query query={CURRENT_USER_QUERY} data-test="cart" />,
+  localState: ({ render }) => <Query query={LOCAL_STATE_QUERY} children={render} />,
+  currentUser: ({ render }) => (
+    <Query children={render} query={CURRENT_USER_QUERY} data-test="cart" />
+  ),
 });
 
 const Cart = () => (
   <Composed>
     {({ toggleCart, localState, currentUser }) => {
-      const {
-        data: { me },
-        error,
-        loading,
-      } = currentUser;
+      const { data: { me }, error, loading } = currentUser;
       if (loading) return <p>Loading...</p>;
       if (error) return <Error error={error} />;
       if (!me) return null;
       return (
         <CartStyles open={localState.data.cartOpen}>
           <header>
-            <CloseButton title="close" onClick={toggleCart}>
+            <CloseButton title="close" onClick={toggleCart.mutate}>
               &times;
             </CloseButton>
 
             <Supreme>{me.name}'s Cart.</Supreme>
             <p>
-              You have {me.cart.length} item{me.cart.length === 1 ? '' : 's'} in
-              your cart.
+              You have {me.cart.length} item{me.cart.length === 1 ? '' : 's'} in your cart.
             </p>
           </header>
 
-          <ul>
-            {me.cart.map(cartItem => (
-              <CartItem key={cartItem.id} cartItem={cartItem} />
-            ))}
-          </ul>
+          <ul>{me.cart.map(cartItem => <CartItem key={cartItem.id} cartItem={cartItem} />)}</ul>
           <footer>
             <p>{formatMoney(calcTotalPrice(me.cart))}</p>
             <TakeMyMoney>
@@ -69,3 +71,4 @@ const Cart = () => (
 );
 
 export default Cart;
+export { LOCAL_STATE_QUERY, TOGGLE_CART_MUTATION };
diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js
index 06e2da3..fc3dcb2 100644
--- a/frontend/components/CreateItem.js
+++ b/frontend/components/CreateItem.js
@@ -1,11 +1,31 @@
 import React, { Component } from 'react';
 import { Mutation } from 'react-apollo';
 import Router from 'next/router';
-import { CREATE_ITEM_MUTATION } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import Error from './ErrorMessage';
 import Form from './styles/Form';
 import formatMoney from '../lib/formatMoney';
 
+const CREATE_ITEM_MUTATION = gql`
+  mutation CREATE_ITEM_MUTATION(
+    $description: String!
+    $title: String!
+    $price: Int!
+    $image: String
+    $largeImage: String
+  ) {
+    createItem(
+      description: $description
+      title: $title
+      price: $price
+      image: $image
+      largeImage: $largeImage
+    ) {
+      id
+    }
+  }
+`;
+
 class CreateItem extends Component {
   state = {
     title: '',
@@ -116,3 +136,4 @@ class CreateItem extends Component {
 }
 
 export default CreateItem;
+export { CREATE_ITEM_MUTATION };
diff --git a/frontend/components/DeleteItem.js b/frontend/components/DeleteItem.js
index 53fc04d..9b09378 100644
--- a/frontend/components/DeleteItem.js
+++ b/frontend/components/DeleteItem.js
@@ -1,10 +1,18 @@
 import React from 'react';
 import { Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
-import {
-  REMOVE_ITEM_MUTATION,
-  ALL_ITEMS_QUERY,
-} from '../queries/queries.graphql';
+import gql from 'graphql-tag';
+import { ALL_ITEMS_QUERY } from './Items';
+
+const DELETE_ITEM_MUTATION = gql`
+  mutation deleteItem($id: ID!) {
+    deleteItem(id: $id) {
+      id
+      title
+      description
+    }
+  }
+`;
 
 class DeleteItem extends React.Component {
   static propTypes = {
@@ -23,7 +31,7 @@ class DeleteItem extends React.Component {
   render() {
     return (
       <Mutation
-        mutation={REMOVE_ITEM_MUTATION}
+        mutation={DELETE_ITEM_MUTATION}
         variables={{ id: this.props.id }}
         update={this.update}
       >
@@ -44,3 +52,4 @@ class DeleteItem extends React.Component {
 }
 
 export default DeleteItem;
+export { DELETE_ITEM_MUTATION };
diff --git a/frontend/components/EditUser.js b/frontend/components/EditUser.js
index ce56e11..1bb8e5b 100644
--- a/frontend/components/EditUser.js
+++ b/frontend/components/EditUser.js
@@ -1,8 +1,18 @@
 import React from 'react';
 import { Query, Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
 import Form from './styles/Form';
-import { CURRENT_USER_QUERY, UPDATE_USER_MUTATION } from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from './User';
 import Error from './ErrorMessage';
+import User from './User';
+
+const UPDATE_USER_MUTATION = gql`
+  mutation updateUser($name: String!) {
+    updateUser(name: $name) {
+      name
+    }
+  }
+`;
 
 class EditUser extends React.Component {
   state = {
@@ -28,7 +38,7 @@ class EditUser extends React.Component {
 
   render() {
     return (
-      <Query query={CURRENT_USER_QUERY}>
+      <User>
         {({ data: { me }, loading }) => {
           if (loading) return <p>Loading...</p>;
           return (
@@ -62,9 +72,10 @@ class EditUser extends React.Component {
             </Mutation>
           );
         }}
-      </Query>
+      </User>
     );
   }
 }
 
 export default EditUser;
+export { UPDATE_USER_MUTATION };
diff --git a/frontend/components/Items.js b/frontend/components/Items.js
index 618cc84..394f16d 100644
--- a/frontend/components/Items.js
+++ b/frontend/components/Items.js
@@ -2,11 +2,25 @@ import React from 'react';
 import { Query } from 'react-apollo';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
+import gql from 'graphql-tag';
 import Pagination from './Pagination';
 import Item from './Item';
 import LoadingItem from './LoadingItem';
 import { perPage } from '../config';
-import { ALL_ITEMS_QUERY } from '../queries/queries.graphql';
+
+const ALL_ITEMS_QUERY = gql`
+  query ALL_ITEMS_QUERY($skip: Int = 0, $first: Int = 4) {
+    items(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+      __typename
+      id
+      title
+      price
+      description
+      image
+      largeImage
+    }
+  }
+`;
 
 const Items = styled.div`
   display: grid;
@@ -57,3 +71,4 @@ class ItemList extends React.Component {
 }
 
 export default ItemList;
+export { ALL_ITEMS_QUERY };
diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index 4bbce2d..826335f 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -1,21 +1,17 @@
 import React, { Fragment } from 'react';
 import Link from 'next/link';
 import { Query, ApolloConsumer } from 'react-apollo';
-import { CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import User from './User';
 import CartCount from './CartCount';
 import Signout from './Signout';
-import Dump from './Dump';
 import NavStyles from './styles/NavStyles';
 
 class Nav extends React.Component {
   render() {
     // below we set the fetchPolicy to network only so it forces re-fetch on the server
     return (
-      <Query
-        query={CURRENT_USER_QUERY}
-        fetchPolicy={process.browser ? 'cache-first' : 'network-only'}
-      >
-        {({ data: { me }, loading, error }) => (
+      <User>
+        {({ data: { me }, error }) => (
           <NavStyles data-test="nav">
             <Link href="/items">
               <a>Shop</a>
@@ -54,7 +50,7 @@ class Nav extends React.Component {
             )}
           </NavStyles>
         )}
-      </Query>
+      </User>
     );
   }
 }
diff --git a/frontend/components/Order.js b/frontend/components/Order.js
index a224c1b..6411abe 100644
--- a/frontend/components/Order.js
+++ b/frontend/components/Order.js
@@ -3,11 +3,30 @@ import { Query } from 'react-apollo';
 import { format } from 'date-fns';
 import Head from 'next/head';
 import PropTypes from 'prop-types';
-import { SINGLE_ORDER_QUERY } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import formatMoney from '../lib/formatMoney';
 import Error from './ErrorMessage';
 import OrderStyles from './styles/OrderStyles';
 
+const SINGLE_ORDER_QUERY = gql`
+  query SINGLE_ORDER_QUERY($id: ID!) {
+    order(id: $id) {
+      id
+      charge
+      total
+      createdAt
+      items {
+        id
+        title
+        price
+        description
+        image
+        quantity
+      }
+    }
+  }
+`;
+
 class Order extends Component {
   static propTypes = {
     id: PropTypes.string.isRequired,
@@ -73,3 +92,4 @@ class Order extends Component {
 }
 
 export default Order;
+export { SINGLE_ORDER_QUERY };
diff --git a/frontend/components/OrderList.js b/frontend/components/OrderList.js
index eef69ca..5886ad7 100644
--- a/frontend/components/OrderList.js
+++ b/frontend/components/OrderList.js
@@ -3,10 +3,29 @@ import { Query } from 'react-apollo';
 import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import styled from 'styled-components';
-import { USER_ORDERS_QUERY } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import formatMoney from '../lib/formatMoney';
 import OrderItemStyles from './styles/OrderItemStyles';
 
+const USER_ORDERS_QUERY = gql`
+  query orders {
+    orders(orderBy: createdAt_DESC) {
+      id
+      total
+      createdAt
+      updatedAt
+      items {
+        id
+        title
+        price
+        description
+        quantity
+        image
+      }
+    }
+  }
+`;
+
 const OrderUl = styled.ul`
   display: grid;
   grid-gap: 4rem;
@@ -71,3 +90,4 @@ class OrderList extends React.Component {
 }
 
 export default OrderList;
+export { USER_ORDERS_QUERY };
diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js
index 380026d..8b25e06 100644
--- a/frontend/components/Pagination.js
+++ b/frontend/components/Pagination.js
@@ -3,8 +3,18 @@ import { Query } from 'react-apollo';
 import styled from 'styled-components';
 import Link from 'next/link';
 import PropTypes from 'prop-types';
+import gql from 'graphql-tag';
 import { perPage } from '../config';
-import { ALL_ITEMS_QUERY } from '../queries/queries.graphql';
+
+const PAGINATION_QUERY = gql`
+  query itemsConnection($skip: Int = 0, $first: Int = 4) {
+    itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+      aggregate {
+        count
+      }
+    }
+  }
+`;
 
 const PaginationStyles = styled.div`
   text-align: center;
@@ -31,7 +41,7 @@ const PaginationStyles = styled.div`
 `;
 
 const Pagination = props => (
-  <Query query={ALL_ITEMS_QUERY}>
+  <Query query={PAGINATION_QUERY}>
     {({ data, loading, error }) => {
       if (loading || error) return null;
       const { aggregate } = data.itemsConnection;
@@ -78,3 +88,4 @@ Pagination.propTypes = {
 };
 
 export default Pagination;
+export { PAGINATION_QUERY };
diff --git a/frontend/components/Permissions.js b/frontend/components/Permissions.js
index 1807366..52a6acf 100644
--- a/frontend/components/Permissions.js
+++ b/frontend/components/Permissions.js
@@ -1,11 +1,33 @@
 import React from 'react';
 import { Query, Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
-import { ALL_USERS_QUERY, UPDATE_PERMISSIONS_MUTATION } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import Error from './ErrorMessage';
 import SickButton from './styles/SickButton';
 import Table from './styles/Table';
 
+const ALL_USERS_QUERY = gql`
+  query {
+    users {
+      id
+      name
+      email
+      permissions
+    }
+  }
+`;
+
+const UPDATE_PERMISSIONS_MUTATION = gql`
+  mutation updatePermissions($permissions: [Permission], $userId: ID!) {
+    updatePermissions(permissions: $permissions, userId: $userId) {
+      id
+      permissions
+      name
+      email
+    }
+  }
+`;
+
 const possiblePermissions = [
   'ADMIN',
   'USER',
@@ -108,3 +130,4 @@ const Permissions = () => (
 );
 
 export default Permissions;
+export { ALL_USERS_QUERY, UPDATE_PERMISSIONS_MUTATION };
diff --git a/frontend/components/PleaseSignIn.js b/frontend/components/PleaseSignIn.js
index 7e5e726..5646749 100644
--- a/frontend/components/PleaseSignIn.js
+++ b/frontend/components/PleaseSignIn.js
@@ -1,6 +1,6 @@
 import { Query } from 'react-apollo';
 import PropTypes from 'prop-types';
-import { CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from './User';
 import Signin from './Signin';
 
 const PleaseSignIn = props => (
diff --git a/frontend/components/RemoveFromCart.js b/frontend/components/RemoveFromCart.js
index 7ec2313..cf5b6fd 100644
--- a/frontend/components/RemoveFromCart.js
+++ b/frontend/components/RemoveFromCart.js
@@ -2,10 +2,16 @@ import { Component } from 'react';
 import { Mutation } from 'react-apollo';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import {
-  REMOVE_FROM_CART_MUTATION,
-  CURRENT_USER_QUERY,
-} from '../queries/queries.graphql';
+import gql from 'graphql-tag';
+import { CURRENT_USER_QUERY } from './User';
+
+const REMOVE_FROM_CART_MUTATION = gql`
+  mutation removeFromCart($id: ID!) {
+    removeFromCart(id: $id) {
+      id
+    }
+  }
+`;
 
 const BigButton = styled.button`
   font-size: 3rem;
@@ -38,11 +44,7 @@ class RemoveFromCart extends Component {
         update={this.update}
       >
         {(removeFromCart, { loading }) => (
-          <BigButton
-            disabled={loading}
-            title="Remove From Cart"
-            onClick={removeFromCart}
-          >
+          <BigButton disabled={loading} title="Remove From Cart" onClick={removeFromCart}>
             ×
           </BigButton>
         )}
@@ -52,3 +54,4 @@ class RemoveFromCart extends Component {
 }
 
 export default RemoveFromCart;
+export { REMOVE_FROM_CART_MUTATION };
diff --git a/frontend/components/Reset.js b/frontend/components/Reset.js
index c4d791c..bb2ece0 100644
--- a/frontend/components/Reset.js
+++ b/frontend/components/Reset.js
@@ -1,9 +1,20 @@
 import React from 'react';
 import { Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
+import gql from 'graphql-tag';
 import Form from './styles/Form';
 import Error from './ErrorMessage';
-import { RESET_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import { CURRENT_USER_QUERY } from './User';
+
+const RESET_MUTATION = gql`
+  mutation RESET_MUTATION($resetToken: String!, $password: String!, $confirmPassword: String!) {
+    resetPassword(resetToken: $resetToken, password: $password, confirmPassword: $confirmPassword) {
+      id
+      email
+      name
+    }
+  }
+`;
 
 class Reset extends React.Component {
   static propTypes = {
@@ -71,3 +82,4 @@ class Reset extends React.Component {
 }
 
 export default Reset;
+export { RESET_MUTATION };
diff --git a/frontend/components/ResetRequest.js b/frontend/components/ResetRequest.js
index 1762aa3..6aedcc1 100644
--- a/frontend/components/ResetRequest.js
+++ b/frontend/components/ResetRequest.js
@@ -1,9 +1,17 @@
 import React from 'react';
 import { Mutation } from 'react-apollo';
-import { REQUEST_RESET_MUTATION } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import Form from './styles/Form';
 import Error from './ErrorMessage';
 
+const REQUEST_RESET_MUTATION = gql`
+  mutation requestReset($email: String!) {
+    requestReset(email: $email) {
+      id
+    }
+  }
+`;
+
 class ResetRequest extends React.Component {
   state = {
     email: '',
@@ -44,3 +52,4 @@ class ResetRequest extends React.Component {
 }
 
 export default ResetRequest;
+export { REQUEST_RESET_MUTATION };
diff --git a/frontend/components/Search.js b/frontend/components/Search.js
index 9f43d36..a972db2 100644
--- a/frontend/components/Search.js
+++ b/frontend/components/Search.js
@@ -2,10 +2,19 @@ import React from 'react';
 import Downshift from 'downshift';
 import Router from 'next/router';
 import { ApolloConsumer } from 'react-apollo';
+import gql from 'graphql-tag';
 import styled, { keyframes } from 'styled-components';
 import debounce from 'lodash.debounce';
-import { SEARCH_ITEMS_QUERY } from '../queries/queries.graphql';
 
+const SEARCH_ITEMS_QUERY = gql`
+  query SEARCH_ITEMS_QUERY($searchTerm: String!) {
+    items(where: { OR: [{ title_contains: $searchTerm }, { description_contains: $searchTerm }] }) {
+      id
+      image
+      title
+    }
+  }
+`;
 function routeToItem(item) {
   Router.push({
     pathname: '/item',
@@ -131,3 +140,4 @@ class AutoComplete extends React.Component {
 }
 
 export default AutoComplete;
+export { SEARCH_ITEMS_QUERY };
diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index 23a5835..53cdb76 100644
--- a/frontend/components/Signin.js
+++ b/frontend/components/Signin.js
@@ -1,14 +1,26 @@
 import React, { Component } from 'react';
-import { Mutation, ApolloConsumer } from 'react-apollo';
-import { SIGNIN_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import { Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import { CURRENT_USER_QUERY } from './User';
 import Error from './ErrorMessage';
 import Form from './styles/Form';
 
+const SIGNIN_MUTATION = gql`
+  mutation SIGNIN_MUTATION($email: String!, $password: String!) {
+    signin(email: $email, password: $password) {
+      id
+      email
+      name
+    }
+  }
+`;
+
 class Signin extends Component {
   state = {
-    email: `wesbos@gmail.com`,
-    password: 'abc123',
+    email: '',
+    password: '',
   };
+
   saveToState = e => {
     const { name, value } = e.target;
     this.setState({ [name]: value });
@@ -64,3 +76,4 @@ class Signin extends Component {
 }
 
 export default Signin;
+export { SIGNIN_MUTATION };
diff --git a/frontend/components/Signout.js b/frontend/components/Signout.js
index fbd7fd9..ae87631 100644
--- a/frontend/components/Signout.js
+++ b/frontend/components/Signout.js
@@ -1,6 +1,15 @@
 import React, { Component } from 'react';
-import { Query, Mutation } from 'react-apollo';
-import { CURRENT_USER_QUERY, SIGN_OUT_MUTATION } from '../queries/queries.graphql';
+import { Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import { CURRENT_USER_QUERY } from './User';
+
+const SIGN_OUT_MUTATION = gql`
+  mutation SIGN_OUT_MUTATION {
+    signout {
+      message
+    }
+  }
+`;
 
 class Signout extends Component {
   render() {
@@ -13,3 +22,4 @@ class Signout extends Component {
 }
 
 export default Signout;
+export { SIGN_OUT_MUTATION };
diff --git a/frontend/components/Signup.js b/frontend/components/Signup.js
index 624bc10..9164e67 100644
--- a/frontend/components/Signup.js
+++ b/frontend/components/Signup.js
@@ -1,14 +1,25 @@
 import React, { Component } from 'react';
 import { Mutation } from 'react-apollo';
-import { SIGNUP_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
+import { CURRENT_USER_QUERY } from './User';
 import Form from './styles/Form';
 import Error from './ErrorMessage';
 
+const SIGNUP_MUTATION = gql`
+  mutation SIGNUP_MUTATION($email: String!, $name: String!, $password: String!) {
+    signup(email: $email, name: $name, password: $password) {
+      id
+      email
+      name
+    }
+  }
+`;
+
 class Signup extends Component {
   state = {
-    email: `wesbos@gmail.com`,
-    name: 'Wes Bos',
-    password: 'wes',
+    email: '',
+    name: '',
+    password: '',
   };
 
   saveToState = e => {
@@ -79,3 +90,4 @@ class Signup extends Component {
 }
 
 export default Signup;
+export { SIGNUP_MUTATION };
diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js
index f71e0fe..d543ad1 100644
--- a/frontend/components/SingleItem.js
+++ b/frontend/components/SingleItem.js
@@ -2,10 +2,22 @@ import { Query } from 'react-apollo';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Link from 'next/link';
-import { SINGLE_ITEM_QUERY } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import Error from './ErrorMessage';
 import AddToCart from './AddToCart';
 
+const SINGLE_ITEM_QUERY = gql`
+  query SINGLE_ITEM_QUERY($id: ID!) {
+    items(where: { id: $id }) {
+      id
+      title
+      description
+      largeImage
+      image
+    }
+  }
+`;
+
 const SingleItemStyles = styled.div`
   max-width: 1200px;
   margin: 2rem auto;
@@ -58,3 +70,4 @@ SingleItem.propTypes = {
 };
 
 export default SingleItem;
+export { SINGLE_ITEM_QUERY };
diff --git a/frontend/components/TakeMyMoney.js b/frontend/components/TakeMyMoney.js
index 5823d00..b9e42ea 100644
--- a/frontend/components/TakeMyMoney.js
+++ b/frontend/components/TakeMyMoney.js
@@ -4,9 +4,24 @@ import { Mutation, Query } from 'react-apollo';
 import Router from 'next/router';
 import NProgress from 'nprogress';
 import PropTypes from 'prop-types';
-import { CREATE_ORDER_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
 import calcTotalPrice from '../lib/calcTotalPrice';
 import Error from './ErrorMessage';
+import User, { CURRENT_USER_QUERY } from './User';
+
+const CREATE_ORDER_MUTATION = gql`
+  mutation createOrder($token: String!) {
+    createOrder(token: $token) {
+      id
+      charge
+      total
+      items {
+        id
+        title
+      }
+    }
+  }
+`;
 
 function totalItems(cart) {
   return cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0);
@@ -30,7 +45,7 @@ class TakeMyMoney extends Component {
   };
   render() {
     return (
-      <Query query={CURRENT_USER_QUERY}>
+      <User>
         {({ data: { me }, error }) => {
           if (!me || !me.cart.length) return null;
           if (error) return <Error error={error} />;
@@ -56,7 +71,7 @@ class TakeMyMoney extends Component {
             </Mutation>
           );
         }}
-      </Query>
+      </User>
     );
   }
 }
diff --git a/frontend/components/UpdateItem.js b/frontend/components/UpdateItem.js
index ecaac75..08ba254 100644
--- a/frontend/components/UpdateItem.js
+++ b/frontend/components/UpdateItem.js
@@ -1,10 +1,19 @@
 import React, { Component } from 'react';
 import { Query, Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
-import { SINGLE_ITEM_QUERY, UPDATE_ITEM_MUTATION } from '../queries/queries.graphql';
+import gql from 'graphql-tag';
+import { SINGLE_ITEM_QUERY } from './SingleItem';
 import Form from './styles/Form';
 import Error from './ErrorMessage';
 
+const UPDATE_ITEM_MUTATION = gql`
+  mutation updateItem($id: ID!, $title: String, $description: String, $price: Int) {
+    updateItem(id: $id, description: $description, title: $title, price: $price) {
+      id
+    }
+  }
+`;
+
 class UpdateItem extends Component {
   static propTypes = {
     id: PropTypes.string.isRequired,
@@ -18,7 +27,6 @@ class UpdateItem extends Component {
     if (type === 'number') {
       value = parseInt(value);
     }
-    console.log('Saving to state');
     const item = { ...this.state.item };
     item[name] = value;
     this.setState({ item });
@@ -94,3 +102,4 @@ class UpdateItem extends Component {
 }
 
 export default UpdateItem;
+export { UPDATE_ITEM_MUTATION };
diff --git a/frontend/components/User.js b/frontend/components/User.js
new file mode 100644
index 0000000..19c568d
--- /dev/null
+++ b/frontend/components/User.js
@@ -0,0 +1,45 @@
+import { Query } from 'react-apollo';
+import gql from 'graphql-tag';
+import PropTypes from 'prop-types';
+
+const CURRENT_USER_QUERY = gql`
+  query {
+    me {
+      id
+      email
+      name
+      permissions
+      orders {
+        id
+        charge
+        total
+      }
+      cart {
+        id
+        quantity
+        item {
+          __typename
+          id
+          title
+          price
+          description
+          image
+          largeImage
+        }
+      }
+    }
+  }
+`;
+
+const User = props => (
+  <Query {...props} query={CURRENT_USER_QUERY}>
+    {result => props.children(result)}
+  </Query>
+);
+
+User.propTypes = {
+  children: PropTypes.func.isRequired,
+};
+
+export default User;
+export { CURRENT_USER_QUERY };
-- 
cgit v1.3