updateS

7 files changed, 83 insertions, 73 deletions

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;