1 files changed, 100 insertions, 0 deletions
diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
new file mode 100644
index 0000000..e46a1f5
--- /dev/null
+++ b/frontend/components/AddToCart.js
@@ -0,0 +1,100 @@
+import { Component } from 'react';
+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';
+import PropTypes from 'prop-types';
+
+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 {
+  static propTypes = {
+    currentUserQuery: PropTypes.object,
+  };
+
+  componentDidMount() {
+    this.props.currentUserQuery.refetch();
+  }
+
+  addToCart = async () => {
+    const res = await this.props.addToCart({
+      variables: {
+        userId: this.props.currentUserQuery.user.id,
+        itemId: this.props.id,
+      },
+    });
+    this.props.currentUserQuery.refetch();
+    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;
+    // TODO WTF
+    if (!user || this.props.singleItemQuery.loading || !this.props.singleItemQuery.Item) 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();
+    return (
+      <div>
+        {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 createOrderEnhancer = graphql(ADD_TO_CART_MUTATION, { name: 'addToCart' });
+const singleItemEnhancer = graphql(SINGLE_ITEM_QUERY, {
+  name: 'singleItemQuery',
+  options: ({ id }) => ({
+    variables: {
+      id,
+    },
+  }),
+});
+export default compose(userEnhancer, createOrderEnhancer, removeFromCartEnhancer, singleItemEnhancer)(AddToCart);