1 files changed, 41 insertions, 0 deletions
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);