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/CartList.js | 114 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 frontend/components/CartList.js

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

diff --git a/frontend/components/CartList.js b/frontend/components/CartList.js
new file mode 100644
index 0000000..b54aa39
--- /dev/null
+++ b/frontend/components/CartList.js
@@ -0,0 +1,114 @@
+import { Component } from 'react';
+import withData from '../lib/withData';
+import Items from '../components/Items';
+import Signup from '../components/Signup';
+import LoginAuth0 from '../components/LoginAuth0';
+import Page from '../components/Page';
+import { USER_ORDERS_QUERY, GET_CART_STATE } from '../queries';
+import { graphql, compose } from 'react-apollo';
+import has from 'lodash.has';
+import get from 'lodash.get';
+import styled from 'styled-components';
+import formatMoney from '../lib/formatMoney';
+import makeImage from '../lib/image';
+import TakeMyMoney from './TakeMyMoney';
+import { removeFromCartEnhancer } from '../enhancers';
+import { CURRENT_USER_QUERY } from '../queries';
+import PropTypes from 'prop-types';
+
+const CartStyles = styled.div`
+  padding: 20px;
+  position: relative;
+  background: white;
+  position: fixed;
+  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: translateX(100%);
+  transition: all 0.3s;
+  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
+  z-index: 5;
+  ${props => props.open && `transform: translateX(0);`};
+  .toggleOpen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateX(-100%);
+  }
+`;
+
+class CartList extends Component {
+  static contextTypes = {
+    client: PropTypes.object,
+  };
+
+  componentDidMount() {
+    setTimeout(this.props.currentUserQuery.refetch, 1);
+    // Set the cart state to be closed
+    this.context.client.writeQuery({
+      query: GET_CART_STATE,
+      data: { ui: { isCartOpen: true, __typename: 'Network' } },
+    });
+  }
+
+  toggleOpen = () => {
+    this.props.uiQuery.updateQuery(() => ({ ui: { isCartOpen: false, __typename: 'Network' } }));
+  };
+
+  render() {
+    if (this.props.loading) {
+      return <p>Loading....</p>;
+    }
+
+    if (this.props.error) {
+      return <p>Error....</p>;
+    }
+
+    // if (!has(this.props, 'currentUserQuery.user.cart')) {
+    //   return <p>Don't have it yet!</p>;
+    // }
+    // OMG Clean this up
+    let { user = {} } = this.props.currentUserQuery || {};
+    if (!user) user = {};
+    const cart = user.cart || [];
+    const userId = user.id;
+    // const userId = this.props.currentUserQuery.user.id;
+
+    const total = cart.reduce((a, b) => a + b.price, 0);
+    return (
+      <CartStyles open>
+        <button className="toggleOpen" onClick={this.toggleOpen}>
+          Open Cart
+        </button>
+        <h1>{cart.length} Items</h1>
+
+        <ul>
+          {cart.map(item => (
+            <li key={item.id}>
+              {item.title}
+              <button
+                onClick={() =>
+                  this.props.removeFromCart({
+                    variables: {
+                      userId,
+                      itemId: item.id,
+                    },
+                  })}
+              >
+                &times; Delete
+              </button>
+            </li>
+          ))}
+        </ul>
+        <TakeMyMoney amount={total} name="Testing 123" description="Test test 123">
+          <button>Buy for {formatMoney(total)}</button>
+        </TakeMyMoney>
+      </CartStyles>
+    );
+  }
+}
+
+const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' });
+const uiEnhancer = graphql(GET_CART_STATE, { name: 'uiQuery' });
+export default compose(userEnhancer, removeFromCartEnhancer, uiEnhancer)(CartList);
-- 
cgit v1.3