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/Item.js | 114 +++++++++++++++++++++-----------------------
 1 file changed, 55 insertions(+), 59 deletions(-)

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

diff --git a/frontend/components/Item.js b/frontend/components/Item.js
index eb19918..d19af0e 100644
--- a/frontend/components/Item.js
+++ b/frontend/components/Item.js
@@ -1,10 +1,13 @@
-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 React from 'react';
+import styled from 'styled-components';
+import slugify from 'slugify';
+import { compose } from 'react-apollo';
+import { Link } from '../routes';
+import AddToCart from './AddToCart';
+import makeImage from '../lib/image';
+import TakeMyMoney from './TakeMyMoney';
+import formatMoney from '../lib/formatMoney';
+import { removeItemMutation } from '../enhancers/enhancers';
 
 const Item = styled.div`
   background: #f3f3f3;
@@ -14,60 +17,53 @@ 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}
-    <h3>
-      <Link
-        route="item"
-        params={{
-          slug: slugify(item.title),
-          itemId: item.id
-        }}
-      >
-        <a>{item.title}</a>
-      </Link>
-    </h3>
+class ItemComponent extends React.Component {
+  removeItem = () => {
+    this.props.removeItem({ variables: { id: this.props.item.id } });
+  };
+  render() {
+    const item = this.props.item;
+    return (
+      <Item key={item.id}>
+        {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,
+            }}
+          >
+            <a>{item.title}</a>
+          </Link>
+        </h3>
 
-    <p>{item.description}</p>
-    {/* {
+        <p>{item.description}</p>
 
-      <Link
-        href={{
-          pathname: '/admin/update',
-          query: { id: item.id },
-        }}
-      >
-        <a>Edit ✏️</a>
-      </Link>
+        <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>
 
-    <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} />
-    <button
-      onClick={() =>
-        this.props.removeItemMutation({ variables: { id: item.id } })
-      }
-    >
-      &times; Delete item
-    </button>
-  </Item>
-);
+        {/* <AddToCart id={item.id} /> */}
+        <button onClick={this.removeItem}>&times; Delete item</button>
+      </Item>
+    );
+  }
+}
 
-export default ItemComponent;
+export default compose(removeItemMutation)(ItemComponent);
-- 
cgit v1.3