updateS

14 files changed, 155 insertions, 114 deletions

diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
new file mode 100644
index 0000000..a92f73f
--- /dev/null
+++ b/frontend/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "eslint.enable": false
+}
\ No newline at end of file
diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js
index 27b62e5..e4aa77c 100644
--- a/frontend/components/CreateItem.js
+++ b/frontend/components/CreateItem.js
@@ -7,10 +7,10 @@ import { fileEndpoint } from '../config';
 
 class CreateLink extends Component {
   state = {
-    description: '',
-    title: '',
+    description: 'test',
+    title: 'testing title',
     image: '',
-    price: 0,
+    price: 500,
     fullPrice: 0,
     loading: false,
     error: {
@@ -41,20 +41,19 @@ class CreateLink extends Component {
   _createLink = async e => {
     e.preventDefault();
     // pull the values from state
-    const { description, title, image, price, fullPrice } = this.state;
+    const { description, title, price } = this.state;
     // create a mutation
     // TODO: handle any errors
     // turn loading on
     this.setState({ loading: true });
     try {
+      console.log('About to call create item mutation');
       const res = await this.props.createItemMutation({
         // pass in those variables from state
         variables: {
           description,
           title,
           price: parseInt(price),
-          fullPrice,
-          imageId: image,
         },
       });
     } catch (error) {
@@ -98,7 +97,7 @@ class CreateLink extends Component {
             type="text"
             placeholder="The desc for this item"
           />
-          <button disabled={!this.state.loading} type="submit">
+          <button disabledx={!this.state.loading} type="submit">
             Submit
           </button>
         </form>
@@ -117,6 +116,7 @@ export default graphql(CREATE_ITEM_MUTATION, {
     // This is much Better / efficient
     // Notice how the variable is called createItem - that is because createItem is the name of the query!
     update: (proxy, { data: { createItem } }) => {
+      console.log('UPDATING');
       const data = proxy.readQuery({ query: ALL_ITEMS_QUERY });
       // data is our store, allItems is our sub-"state", it's just an array. We can just add it to
       console.log({ createItem });
diff --git a/frontend/components/Header.js b/frontend/components/Header.js
index cc4cca7..5624fb5 100644
--- a/frontend/components/Header.js
+++ b/frontend/components/Header.js
@@ -19,19 +19,18 @@ class Header extends Component {
     // This fetches the new data, but doesn't populate the user via props
     // this.props.currentUserQuery.refetch();
     // This fetches the new data, and populates the user via props
-    setTimeout(this.props.currentUserQuery.refetch, 1);
+    // setTimeout(this.props.currentUserQuery.refetch, 1);
   }
 
   render() {
-    const user = this.props.currentUserQuery.user || {};
-    const { email = '' } = user;
+    // const user = this.props.currentUserQuery.user || {};
+    // const { email = '' } = user;
     return (
       <div>
-        <p>
+        {/* <p>
           Signed in as <strong>{email}</strong>
-        </p>
-        <Login />
-        <Cart />
+        </p> */}
+        {/* <Cart /> */}
         <Search />
       </div>
     );
@@ -39,4 +38,5 @@ class Header extends Component {
 }
 
 const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' });
-export default compose(userEnhancer)(Header);
+// export default compose(userEnhancer)(Header);
+export default Header;
diff --git a/frontend/components/Item.js b/frontend/components/Item.js
index 1b47fcf..eb19918 100644
--- a/frontend/components/Item.js
+++ b/frontend/components/Item.js
@@ -1,10 +1,10 @@
-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 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";
 
 const Item = styled.div`
   background: #f3f3f3;
@@ -16,13 +16,19 @@ 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}
+    {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,
+          itemId: item.id
         }}
       >
         <a>{item.title}</a>
@@ -54,7 +60,13 @@ const ItemComponent = ({ item }) => (
     </TakeMyMoney>
 
     <AddToCart id={item.id} />
-    <button onClick={() => this.props.removeItemMutation({ variables: { id: item.id } })}>&times; Delete item</button>
+    <button
+      onClick={() =>
+        this.props.removeItemMutation({ variables: { id: item.id } })
+      }
+    >
+      &times; Delete item
+    </button>
   </Item>
 );
 
diff --git a/frontend/components/Items.js b/frontend/components/Items.js
index 053c9af..3e2c738 100644
--- a/frontend/components/Items.js
+++ b/frontend/components/Items.js
@@ -1,21 +1,25 @@
-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 { 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;`;
+const Title = styled.h1`
+  font-size: 10px;
+`;
 
 const Items = styled.div`
   display: grid;
-  grid-template-columns: repeat(4, calc(33% - 20px));
+  grid-template-columns: repeat(4, 1fr);
   grid-gap: 20px;
 `;
 
 class ItemList extends Component {
   componentDidMount() {
+    console.log(this.props.allItemsQuery);
     this.prefetchNextItems(this.props.page);
   }
 
@@ -32,8 +36,8 @@ class ItemList extends Component {
     this.props.client.query({
       query: ALL_ITEMS_QUERY,
       variables: {
-        skip: page * 3 - 3,
-      },
+        skip: page * 3 - 3
+      }
     });
   };
 
@@ -50,13 +54,15 @@ class ItemList extends Component {
     }
 
     // 3
-    const itemsToRender = this.props.allItemsQuery.allItems;
+    const itemsToRender = this.props.allItemsQuery.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>
     );
   }
@@ -66,20 +72,8 @@ class ItemList extends Component {
 
 // We export the graphQL HOC - this will fetch the data and inject it into the ItemList compeont via props
 
-// Create some Enhancers
-const itemEnhancer = graphql(ALL_ITEMS_QUERY, {
-  name: 'allItemsQuery',
-  options({ page }) {
-    return {
-      variables: {
-        skip: page * 3 - 3,
-      },
-    };
-  },
-});
-
 const deleteItemEnhancer = graphql(DELETE_ITEM_MUTATION, {
-  name: 'removeItemMutation',
+  name: "removeItemMutation",
   options: {
     update: (proxy, { data: { deleteItem } }) => {
       // grab the data from our cache
@@ -90,8 +84,8 @@ const deleteItemEnhancer = graphql(DELETE_ITEM_MUTATION, {
 
       // 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));
diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index d1f341d..25965c2 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -1,5 +1,5 @@
-import Link from 'next/link';
-import styled from 'styled-components';
+import Link from "next/link";
+import styled from "styled-components";
 
 const StyledUl = styled.ul`
   margin: 0;
@@ -28,6 +28,9 @@ const Nav = () => (
     <Link prefetch href="/">
       <a>Home</a>
     </Link>
+    <Link prefetch href="/items">
+      <a>Just Items</a>
+    </Link>
     <Link prefetch href="/signup">
       <a>Sign Up</a>
     </Link>
diff --git a/frontend/components/Page.js b/frontend/components/Page.js
index f45d421..ceb0939 100644
--- a/frontend/components/Page.js
+++ b/frontend/components/Page.js
@@ -1,8 +1,8 @@
-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";
 
 const StyledPage = styled.div`
   font-family: sans-serif;
@@ -15,8 +15,8 @@ const Page = ({ children }) => (
   <StyledPage className="main">
     <Meta />
     <Nav />
-    <Header />
-    <CartList />
+    {/* <Header /> */}
+    {/* <CartList /> */}
     {children}
   </StyledPage>
 );
diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js
index dedd231..28785be 100644
--- a/frontend/components/Pagination.js
+++ b/frontend/components/Pagination.js
@@ -1,17 +1,19 @@
-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 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;
 
   if (loading) return <p>Loading Item...</p>;
 
-  const meta = props.allItemsQuery._allItemsMeta;
+  const { aggregate, pageInfo } = props.allItemsQuery.itemsConnection;
+
   const { page } = props;
-  const pages = Math.floor(meta.count / 3);
+  const pages = Math.floor(aggregate.count / 3);
   return (
     <div>
       <p>
@@ -19,17 +21,16 @@ const Pagination = props => {
         of
         <strong>{pages} </strong>
         -
-        <strong>{meta.count} </strong>
+        <strong>{aggregate.count} </strong>
         total
       </p>
-
-      {page > 1 ? (
+      {pageInfo.hasPreviousPage ? (
         <Link prefetch route="items" params={{ page: page - 1 }}>
           <a>←Prev</a>
         </Link>
       ) : null}
 
-      {page < pages ? (
+      {pageInfo.hasNextPage ? (
         <Link prefetch route="items" params={{ page: page + 1 }}>
           <a>Next →</a>
         </Link>
@@ -38,6 +39,6 @@ const Pagination = props => {
   );
 };
 
-const ComponentWithMutations = compose(graphql(ALL_ITEMS_QUERY, { name: 'allItemsQuery' }))(Pagination);
+const ComponentWithMutations = compose(itemEnhancer)(Pagination);
 
 export default ComponentWithMutations;
diff --git a/frontend/config.js b/frontend/config.js
index c2b78cb..7d5ebad 100644
--- a/frontend/config.js
+++ b/frontend/config.js
@@ -1,5 +1,5 @@
 // This is client side config only - don't put anything in here that shouldn't be public!
 export const projectId = `cj99zm6ye06sb01325ic751ww`;
-export const endpoint = `https://api.graph.cool/simple/v1/${projectId}`;
+export const endpoint = `http://localhost:4000`;
 export const imageEndpoint = `https://images.graph.cool/v1/${projectId}`;
 export const fileEndpoint = `https://api.graph.cool/file/v1/${projectId}`;
diff --git a/frontend/enhancers/enhancers.js b/frontend/enhancers/enhancers.js
new file mode 100644
index 0000000..525c720
--- /dev/null
+++ b/frontend/enhancers/enhancers.js
@@ -0,0 +1,13 @@
+import { ALL_ITEMS_QUERY } from "../queries/index";
+import { graphql } from "react-apollo";
+
+export const itemEnhancer = graphql(ALL_ITEMS_QUERY, {
+  name: "allItemsQuery",
+  options({ page }) {
+    return {
+      variables: {
+        skip: page * 3 - 3
+      }
+    };
+  }
+});
diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index 24fe584..128ccf1 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -1,21 +1,22 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import Items from '../components/Items';
-import Header from '../components/Header';
-import Page from '../components/Page';
-import withData from '../lib/withData';
+import { Component } from "react";
+import PropTypes from "prop-types";
+import Items from "../components/Items";
+import Header from "../components/Header";
+import Page from "../components/Page";
+import withData from "../lib/withData";
 
 const Home = props => {
   const page = parseInt(props.url.query.page) || 1;
   return (
     <Page>
+      <p>Hello</p>
       <Items page={page} />
     </Page>
   );
 };
 
 Home.propTypes = {
-  url: PropTypes.object,
+  url: PropTypes.object
 };
 
 export default withData(Home);
diff --git a/frontend/pages/items.js b/frontend/pages/items.js
index 52f9f86..3426f4b 100644
--- a/frontend/pages/items.js
+++ b/frontend/pages/items.js
@@ -1,2 +1,3 @@
-import Index from './index'
+import Index from './index';
+
 export default Index;
diff --git a/frontend/queries/fragments.js b/frontend/queries/fragments.js
index 019992e..1708d78 100644
--- a/frontend/queries/fragments.js
+++ b/frontend/queries/fragments.js
@@ -5,12 +5,6 @@ export const itemDetails = gql`
     id
     title
     price
-    fullPrice
     description
-    image {
-      id
-      url
-      secret
-    }
   }
 `;
diff --git a/frontend/queries/index.js b/frontend/queries/index.js
index 8b7897f..fb7445e 100644
--- a/frontend/queries/index.js
+++ b/frontend/queries/index.js
@@ -1,23 +1,26 @@
-import gql from 'graphql-tag';
-import { itemDetails } from './fragments';
+import gql from "graphql-tag";
+import { itemDetails } from "./fragments";
 
 export const CREATE_ITEM_MUTATION = gql`
   ${itemDetails}
-  mutation CreateLinkMutation($description: String!, $title: String!, $imageId: ID, $price: Int!) {
-    createItem(
-      description: $description,
-      title: $title,
-      imageId: $imageId
-      price: $price
-    ) {
+  mutation createItem($description: String!, $title: String!, $price: Int!) {
+    createItem(description: $description, title: $title, price: $price) {
       ...itemDetails
     }
   }
 `;
 
 export const CREATE_USER_MUTATION = gql`
-  mutation CreateUserMutation($email: String!, $name: String!, $idToken: String!) {
-    createUser(email: $email, name: $name, authProvider: { auth0: { idToken: $idToken } }) {
+  mutation CreateUserMutation(
+    $email: String!
+    $name: String!
+    $idToken: String!
+  ) {
+    createUser(
+      email: $email
+      name: $name
+      authProvider: { auth0: { idToken: $idToken } }
+    ) {
       id
       email
       name
@@ -52,11 +55,19 @@ export const CREATE_ORDER_MUTATION = gql`
 export const ALL_ITEMS_QUERY = gql`
   # Import the Fragment
   ${itemDetails}
-  query AllLinksQuery($skip: Int = 0, $first: Int = 3) {
-    _allItemsMeta {
-      count
+  query AllItemsQuery($skip: Int = 0, $first: Int = 3) {
+    itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+      aggregate {
+        count
+      }
     }
-    allItems(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+    items(orderBy: createdAt_DESC, first: $first, skip: $skip) {
       ...itemDetails
     }
   }
@@ -74,12 +85,14 @@ export const SINGLE_ITEM_QUERY = gql`
 export const SEARCH_ITEMS_QUERY = gql`
   ${itemDetails}
   query SearchItems($searchTerm: String!) {
-    allItems(filter:{
-     OR:[
-      { title_contains: $searchTerm },
-      { description_contains: $searchTerm },
-    ]
-    }) {
+    allItems(
+      filter: {
+        OR: [
+          { title_contains: $searchTerm }
+          { description_contains: $searchTerm }
+        ]
+      }
+    ) {
       ...itemDetails
     }
   }
@@ -97,12 +110,18 @@ export const DELETE_ITEM_MUTATION = gql`
 
 export const UPDATE_LINK_MUTATION = gql`
   ${itemDetails}
-  mutation UpdateItem($id: ID!, $title: String!, $description: String!, $price: Int!, $fullPrice: Int!) {
+  mutation UpdateItem(
+    $id: ID!
+    $title: String!
+    $description: String!
+    $price: Int!
+    $fullPrice: Int!
+  ) {
     updateItem(
-      id: $id,
-      description: $description,
-      title: $title,
-      price: $price,
+      id: $id
+      description: $description
+      title: $title
+      price: $price
       fullPrice: $fullPrice
     ) {
       ...itemDetails