From 46a0ba30ef54a7e36206481a4f5b2bf1f9702fca Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Mon, 12 Mar 2018 14:06:25 -0400
Subject: wip

---
 frontend/components/Items.js | 51 ++++++++++++--------------------------------
 1 file changed, 14 insertions(+), 37 deletions(-)

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

diff --git a/frontend/components/Items.js b/frontend/components/Items.js
index 6206592..01d9786 100644
--- a/frontend/components/Items.js
+++ b/frontend/components/Items.js
@@ -1,16 +1,10 @@
-import { Component } from 'react';
-import { withApollo, graphql, compose } from 'react-apollo';
+import React from 'react';
+import { 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';
-
-const Title = styled.h1`
-  font-size: 10px;
-`;
-
 const Items = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -19,38 +13,21 @@ const Items = styled.div`
   margin: 0 auto;
 `;
 
-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) {
-      this.prefetchNextItems(nextProps.page);
-    }
-  }
-
-  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,
-      },
-    });
-  };
+const Center = styled.div`
+  text-align: center;
+`;
 
+class ItemList extends React.Component {
+  something() { }
   render() {
-    console.log(this.props);
+    const { loading, error } = this.props.itemsQuery;
     // 1
-    if (this.props.itemsQuery && this.props.itemsQuery.loading) {
+    if (loading) {
       return <div>Loading</div>;
     }
 
     // 2
-    if (this.props.itemsQuery && this.props.itemsQuery.error) {
+    if (error) {
       console.log(this.props.itemsQuery.error);
       return <div>Error</div>;
     }
@@ -59,13 +36,13 @@ class ItemList extends Component {
     const itemsToRender = this.props.itemsQuery.items;
 
     return (
-      <div>
+      <Center>
         <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>
-      </div>
+        <Pagination page={this.props.page} />
+      </Center>
     );
   }
 }
 
-export default withApollo(compose(itemEnhancer)(ItemList));
+export default compose(itemEnhancer)(ItemList);
-- 
cgit v1.3