updateS

1 files changed, 21 insertions, 27 deletions

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));