From 4fb8969f6994d8414f388f583d8e270d4e4a67e9 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Fri, 23 Mar 2018 11:11:09 -0400
Subject: ya

---
 frontend/components/Cart.js           |  5 +----
 frontend/components/CartCount.js      |  8 ++++++-
 frontend/components/CartItem.js       | 41 +++++++++++++++++++++--------------
 frontend/components/RemoveFromCart.js |  7 +++++-
 frontend/components/Signin.js         | 12 ++++++++--
 frontend/components/TakeMyMoney.js    |  9 +++-----
 6 files changed, 52 insertions(+), 30 deletions(-)

(limited to 'frontend/components')

diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js
index fee757e..0a77754 100644
--- a/frontend/components/Cart.js
+++ b/frontend/components/Cart.js
@@ -6,6 +6,7 @@ import formatMoney from '../lib/formatMoney';
 import { UIContext } from './UIContext';
 import CartItem from './CartItem';
 import { CURRENT_USER_QUERY } from '../queries/index';
+import calcTotalPrice from '../lib/calcTotalPrice';
 
 const CartStyles = styled.div`
   padding: 20px;
@@ -72,10 +73,6 @@ const CloseButton = styled.button`
   right: 0;
 `;
 
-function calcTotalPrice(cart) {
-  return cart.reduce((tally, cartItem) => tally + cartItem.quantity * cartItem.item.price, 0);
-}
-
 const Cart = props => (
   <UIContext.Consumer>
     {context => (
diff --git a/frontend/components/CartCount.js b/frontend/components/CartCount.js
index 245b07b..5af472a 100644
--- a/frontend/components/CartCount.js
+++ b/frontend/components/CartCount.js
@@ -42,7 +42,13 @@ const AnimationStyles = styled.span`
 const CartCount = ({ count }) => (
   <AnimationStyles>
     <TransitionGroup>
-      <CSSTransition className="count" classNames="count" key={count} timeout={{ enter: 2000, exit: 2000 }}>
+      <CSSTransition
+        unmountOnExit
+        className="count"
+        classNames="count"
+        key={count}
+        timeout={{ enter: 400, exit: 400 }}
+      >
         <Dot>{count}</Dot>
       </CSSTransition>
     </TransitionGroup>
diff --git a/frontend/components/CartItem.js b/frontend/components/CartItem.js
index 895b688..6c6d575 100644
--- a/frontend/components/CartItem.js
+++ b/frontend/components/CartItem.js
@@ -20,22 +20,31 @@ const CartItemStyles = styled.li`
   }
 `;
 
-const CartItem = ({ cartItem }) => (
-  <CartItemStyles key={cartItem.id}>
-    <img width="100" src={cartItem.item.image} alt={cartItem.item.title} />
-    <div className="cart-item-details">
-      <h3>{cartItem.item.title}</h3>
-      <p>
-        {formatMoney(cartItem.quantity * cartItem.item.price)}
-        {' — '}
-        <em>
-          {cartItem.quantity} &times; {formatMoney(cartItem.item.price)} each
-        </em>
-      </p>
-    </div>
-    <RemoveFromCart id={cartItem.id} />
-  </CartItemStyles>
-);
+const CartItem = ({ cartItem }) => {
+  if (!cartItem.item)
+    return (
+      <CartItemStyles key={cartItem.id}>
+        <p>Ack! That Item is gone!</p>
+        <RemoveFromCart id={cartItem.id} />
+      </CartItemStyles>
+    );
+  return (
+    <CartItemStyles key={cartItem.id}>
+      <img width="100" src={cartItem.item.image} alt={cartItem.item.title} />
+      <div className="cart-item-details">
+        <h3>{cartItem.item.title}</h3>
+        <p>
+          {formatMoney(cartItem.quantity * cartItem.item.price)}
+          {' — '}
+          <em>
+            {cartItem.quantity} &times; {formatMoney(cartItem.item.price)} each
+          </em>
+        </p>
+      </div>
+      <RemoveFromCart id={cartItem.id} />
+    </CartItemStyles>
+  );
+};
 
 CartItem.propTypes = {
   cartItem: PropTypes.object.isRequired,
diff --git a/frontend/components/RemoveFromCart.js b/frontend/components/RemoveFromCart.js
index d8c81b0..752f0a8 100644
--- a/frontend/components/RemoveFromCart.js
+++ b/frontend/components/RemoveFromCart.js
@@ -28,7 +28,12 @@ class RemoveFromCart extends Component {
 
   render() {
     return (
-      <Mutation mutation={REMOVE_FROM_CART_MUTATION} variables={{ id: this.props.id }} update={this.update}>
+      <Mutation
+        mutation={REMOVE_FROM_CART_MUTATION}
+        variables={{ id: this.props.id }}
+        update={this.update}
+        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
+      >
         {removeFromCart => (
           <BigButton title="Remove From Cart" onClick={removeFromCart}>
             &times;
diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index a211528..9f9eb96 100644
--- a/frontend/components/Signin.js
+++ b/frontend/components/Signin.js
@@ -14,10 +14,13 @@ class Signin extends Component {
     e.preventDefault();
     const res = await signin();
     localStorage.setItem('token', res.data.signin.token);
-    return Promise.resolve('it worked');
     // TODO refetch current user query
   };
 
+  update = (proxy, result) => {
+    console.log(proxy, result);
+  };
+
   saveToState = e => {
     const { name, value } = e.target;
     this.setState({ [name]: value });
@@ -25,7 +28,12 @@ class Signin extends Component {
 
   render() {
     return (
-      <Mutation mutation={SIGNIN_MUTATION} variables={this.state} refetchQueries={[{ query: CURRENT_USER_QUERY }]}>
+      <Mutation
+        update={this.update}
+        mutation={SIGNIN_MUTATION}
+        variables={this.state}
+        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
+      >
         {(signin, { data, loading, error }) => (
           <Form onSubmit={e => this.loginUser(e, signin)}>
             <Error error={error} />
diff --git a/frontend/components/TakeMyMoney.js b/frontend/components/TakeMyMoney.js
index e52b08c..6adf866 100644
--- a/frontend/components/TakeMyMoney.js
+++ b/frontend/components/TakeMyMoney.js
@@ -4,15 +4,12 @@ import { Mutation, Query } from 'react-apollo';
 import Router from 'next/router';
 import NProgress from 'nprogress';
 import { CREATE_ORDER_MUTATION, CURRENT_USER_QUERY } from '../queries';
+import calcTotalPrice from '../lib/calcTotalPrice';
 
 function totalItems(cart) {
   return cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0);
 }
 
-function total(cart) {
-  return cart.reduce((tally, cartItem) => tally + cartItem.item.price * cartItem.quantity, 0);
-}
-
 class TakeMyMoney extends Component {
   onToken = async (res, createOrder) => {
     NProgress.start();
@@ -38,10 +35,10 @@ class TakeMyMoney extends Component {
             <Mutation mutation={CREATE_ORDER_MUTATION}>
               {createOrder => (
                 <StripeCheckout
-                  amount={total(me.cart)}
+                  amount={calcTotalPrice(me.cart)}
                   name="Sick Fits Haul"
                   description={`Order of ${totalItems(me.cart)} Items From Sick Fits`}
-                  image={me.cart[0].item.image}
+                  image={me.cart[0].item && me.cart[0].item.image}
                   token={res => this.onToken(res, createOrder)}
                   stripeKey="pk_lclTtThFp8CnO3QtEZSd8HA9mFUps"
                   currency="USD"
-- 
cgit v1.3