From 19c9683e2126c68cb9d231293162c756d69c51fb Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 8 Feb 2018 10:41:16 -0500
Subject: WIP

---
 frontend/components/Items.js | 56 ++++++++++++++------------------------------
 1 file changed, 17 insertions(+), 39 deletions(-)

(limited to 'frontend/components/Items.js')

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));
-- 
cgit v1.3