From cd0b07b3adb36fb5ec098f9e511ab45d774fee7b Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Tue, 30 Jan 2018 12:41:01 -0500
Subject: Move to Prisma Backend

---
 frontend/components/AddToCart.js | 100 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 100 insertions(+)
 create mode 100644 frontend/components/AddToCart.js

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

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);
-- 
cgit v1.3