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/AddToCart.js | 84 +++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 71 insertions(+), 13 deletions(-)

(limited to 'components/AddToCart.js')

diff --git a/components/AddToCart.js b/components/AddToCart.js
index 0c40efe..9bcdb7f 100644
--- a/components/AddToCart.js
+++ b/components/AddToCart.js
@@ -1,6 +1,37 @@
 import { Component } from 'react';
-import { ADD_TO_CART_MUTATION, CURRENT_USER_QUERY } from '../queries';
+import { ADD_TO_CART_MUTATION, CURRENT_USER_QUERY, SINGLE_ITEM_QUERY } from '../queries';
+import { removeFromCartEnhancer, userEnhancer } from '../enhancers';
 import { graphql, compose } from 'react-apollo';
+import Transition from 'react-transition-group/Transition';
+import makeImage from '../lib/image';
+import styled from 'styled-components';
+
+const JumpImg = styled.img`
+  border: 0 solid black;
+  max-width: 100px;
+  transition: all 0.5s;
+  position: fixed;
+  left: ${props => props.x}px;
+  top: -100%;
+  &.jump-entered {
+    border-color: green;
+    transform-origin: 0 0;
+    transform: scale(0);
+    top: ${props => props.y}px;
+    left: ${props => props.x}px;
+  }
+  &.jump-entering {
+    border-color: yellow;
+    top: ${props => props.y}px;
+    left: ${props => props.x}px;
+  }
+  &.jump-exited {
+    border-color: red;
+  }
+  &.jump-exiting {
+    border-color: yellow;
+  }
+`;
 
 class AddToCart extends Component {
   componentDidMount() {
@@ -12,28 +43,55 @@ class AddToCart extends Component {
       variables: {
         userId: this.props.currentUserQuery.user.id,
         itemId: this.props.id,
-      }
+      },
     });
     this.props.currentUserQuery.refetch();
-    console.log(res)
-  }
+    console.log(res);
+  };
+
+  removeFromCart = async () => {
+    const res = await this.props.removeFromCart({
+      variables: {
+        userId: this.props.currentUserQuery.user.id,
+        itemId: this.props.id,
+      },
+    });
+    this.props.currentUserQuery.refetch();
+    console.log(res);
+  };
+
   render() {
     const user = this.props.currentUserQuery.user;
+
     if (!user) return <p>Loading...</p>;
     const cartIds = user.cart.map(item => item.id);
+    const image = this.props.singleItemQuery.Item.image;
+    const isInCart = cartIds.includes(this.props.id);
+    const { x, y } = document.querySelector('.cart').getBoundingClientRect();
+    console.log({ x, y });
+
     return (
       <div>
-
-        {
-          cartIds.includes(this.props.id)
-            ? <button>Added to cart ✅</button>
-            : <button onClick={this.addToCart}>Add To Cart 👜</button>
-        }
+        {isInCart ? (
+          <button onClick={this.removeFromCart}>❌ Remove From Cart</button>
+        ) : (
+          <button onClick={this.addToCart}>Add To Cart 👜</button>
+        )}
+        <Transition in={isInCart} timeout={1000}>
+          {status => <JumpImg x={x} y={y} src={makeImage(image)} className={`jump-${status}`} />}
+        </Transition>
       </div>
-    )
+    );
   }
 }
 
-const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' });
 const createOrderEnhancer = graphql(ADD_TO_CART_MUTATION, { name: 'addToCart' });
-export default compose(userEnhancer, createOrderEnhancer)(AddToCart);
+const singleItemEnhancer = graphql(SINGLE_ITEM_QUERY, {
+  name: 'singleItemQuery',
+  options: ({ id }) => ({
+    variables: {
+      id,
+    },
+  }),
+});
+export default compose(userEnhancer, createOrderEnhancer, removeFromCartEnhancer, singleItemEnhancer)(AddToCart);
-- 
cgit v1.3