From 3b45dd7b593825721ec9ee9f6a49c732601b1ae0 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 21 Sep 2017 15:39:12 -0400
Subject: Cha Ching

---
 components/Items.js | 119 +++++++++++++---------------------------------------
 1 file changed, 30 insertions(+), 89 deletions(-)

(limited to 'components/Items.js')

diff --git a/components/Items.js b/components/Items.js
index d212ead..053c9af 100644
--- a/components/Items.js
+++ b/components/Items.js
@@ -1,20 +1,12 @@
-import { Component } from 'react'
-import { withApollo, graphql, compose } from 'react-apollo'
-import UpdateItem from './UpdateItem';
-import Link from 'next/link';
+import { Component } from 'react';
+import { withApollo, graphql, compose } from 'react-apollo';
 import styled from 'styled-components';
-import TakeMyMoney from './TakeMyMoney';
-import AddToCart from './AddToCart';
 import Pagination from './Pagination';
-import formatMoney from '../lib/formatMoney';
-import makeImage from '../lib/image';
-import slugify from 'slugify';
+import Item from './Item';
 
 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;
@@ -22,50 +14,39 @@ const Items = styled.div`
   grid-gap: 20px;
 `;
 
-const Item = styled.div`
-  background: #f3f3f3;
-  padding: 5px;
-  img {
-    width: 100%;
-  }
-`;
-
 class ItemList extends Component {
-
   componentDidMount() {
     this.prefetchNextItems(this.props.page);
   }
 
   componentWillReceiveProps(nextProps) {
     // update the next items if the page prop changed
-    if(this.props.page !== nextProps.page) {
+    if (this.props.page !== nextProps.page) {
       this.prefetchNextItems(nextProps.page);
     }
   }
 
-  prefetchNextItems = (currentPage) => {
+  prefetchNextItems = currentPage => {
     const page = currentPage + 1;
     console.log(`Prefetching Next items! Page ${page}`);
     this.props.client.query({
       query: ALL_ITEMS_QUERY,
       variables: {
-        skip: (page * 3) - 3
-      }
-    })
-  }
+        skip: page * 3 - 3,
+      },
+    });
+  };
 
   render() {
-    console.log("CLIENTTT!!", this.props.client);
-
     // 1
     if (this.props.allItemsQuery && this.props.allItemsQuery.loading) {
-      return <div>Loading</div>
+      return <div>Loading</div>;
     }
 
     // 2
     if (this.props.allItemsQuery && this.props.allItemsQuery.error) {
-      console.log(this.props.allItemsQuery.error)
-      return <div>Error</div>
+      console.log(this.props.allItemsQuery.error);
+      return <div>Error</div>;
     }
 
     // 3
@@ -73,53 +54,12 @@ class ItemList extends Component {
 
     return (
       <div>
-        <Pagination page={this.props.page}></Pagination>
+        <Pagination page={this.props.page} />
         <Title>Items For Sale</Title>
-        <Items>
-          {itemsToRender.map((item,i) => (
-            <Item className="item" key={i}>
-              { item.image ?  <img key={item.image.secret} src={makeImage(item.image)} /> : null }
-              <h3>
-                <Link href={{
-                  pathname: 'item',
-                  query: {
-                    slug: slugify(item.title),
-                    itemId: item.id
-                  },
-                }}>
-                  <a>{item.title}</a>
-                </Link>
-              </h3>
-
-              <p>{item.description}</p>
-              <Link href={{
-                pathname: '/admin/update',
-                query: { id: item.id }
-              }}>
-                <a>Edit ✏️</a>
-              </Link>
-
-              <TakeMyMoney
-                id={item.id}
-                amount={item.price}
-                name={item.title} // the pop-in header title
-                description={item.description} // the pop-in header subtitle
-                image={makeImage(item.image)}
-              >
-                <button>Buy for {formatMoney(item.price)}</button>
-              </TakeMyMoney>
-
-              <AddToCart id={item.id}></AddToCart>
-              <button onClick={() => this.props.removeItemMutation({ variables: { id: item.id }})}>&times; Delete item</button>
-
-            </Item>
-          ))}
-        </Items>
-
+        <Items key={this.props.page}>{itemsToRender.map((item, i) => <Item key={item.id} item={item} />)}</Items>
       </div>
-    )
+    );
   }
-
 }
 
 // 1
@@ -127,30 +67,31 @@ 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 itemsEnahncer = graphql(ALL_ITEMS_QUERY, { name: 'allItemsQuery', options({ page }) {
-  return {
-    variables: {
-      skip: (page * 3) - 3
-    },
-  }
-}});
+const itemEnhancer = graphql(ALL_ITEMS_QUERY, {
+  name: 'allItemsQuery',
+  options({ page }) {
+    return {
+      variables: {
+        skip: page * 3 - 3,
+      },
+    };
+  },
+});
 
 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 delted item
+      // 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 whereever we have used this data on the page
+      // 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(itemsEnahncer, deleteItemEnhancer)(ItemList));
+export default withApollo(compose(itemEnhancer, deleteItemEnhancer)(ItemList));
-- 
cgit v1.3