From 1450e579c67e3d969cb099dfe6c1cefd1e313fb5 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Fri, 15 Sep 2017 14:26:13 -0400
Subject: yep

---
 components/Cart.js | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 components/Cart.js

(limited to 'components/Cart.js')

diff --git a/components/Cart.js b/components/Cart.js
new file mode 100644
index 0000000..57a00fc
--- /dev/null
+++ b/components/Cart.js
@@ -0,0 +1,41 @@
+import { Component } from "react";
+import { graphql, compose } from "react-apollo";
+import { CURRENT_USER_QUERY } from "../queries";
+import styled from "styled-components";
+import formatMoney from "../lib/formatMoney.js";
+
+const cartStyles = styled.div`
+  background: white;
+  padding: 20px;
+`;
+
+class Cart extends Component {
+  componentDidMount() {
+    // This fetches the new data, but doesn't populate the user via props
+    // this.props.currentUserQuery.refetch();
+    // This fetches the new data, and populates the user via props
+    console.log("refetching!");
+    setTimeout(this.props.currentUserQuery.refetch, 1);
+  }
+
+  render() {
+    // Check for loading state..
+    const { loading, error } = this.props.currentUserQuery;
+    const { user } = this.props.currentUserQuery;
+    if (loading || error || !user) return <p>Cart Loading...</p>;
+    const { email = "" } = user;
+    const total = user.cart.reduce((a, b) => a + b.price, 0);
+
+    return (
+      <div>
+        <p>
+          💰 There are <strong>{user.cart.length}</strong> Items in your cart
+          totaling <strong>{formatMoney(total)}</strong>
+        </p>
+      </div>
+    );
+  }
+}
+
+const userEnhancer = graphql(CURRENT_USER_QUERY, { name: "currentUserQuery" });
+export default compose(userEnhancer)(Cart);
-- 
cgit v1.3