suuuup everyone

2 files changed, 92 insertions, 0 deletions

diff --git a/stepped-solutions/43/frontend/components/CartItem.js b/stepped-solutions/43/frontend/components/CartItem.js
new file mode 100755
index 0000000..1be2128
--- /dev/null
+++ b/stepped-solutions/43/frontend/components/CartItem.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import formatMoney from '../lib/formatMoney';
+import RemoveFromCart from './RemoveFromCart';
+
+const CartItemStyles = styled.li`
+  padding: 1rem 0;
+  border-bottom: 1px solid ${props => props.theme.lightgrey};
+  display: grid;
+  align-items: center;
+  grid-template-columns: auto 1fr auto;
+  img {
+    margin-right: 10px;
+  }
+  h3,
+  p {
+    margin: 0;
+  }
+`;
+
+const CartItem = ({ cartItem }) => (
+  <CartItemStyles>
+    <img width="100" src={cartItem.item.image} alt={cartItem.item.title} />
+    <div className="cart-item-details">
+      <h3>{cartItem.item.title}</h3>
+      <p>
+        {formatMoney(cartItem.item.price * cartItem.quantity)}
+        {' - '}
+        <em>
+          {cartItem.quantity} &times; {formatMoney(cartItem.item.price)} each
+        </em>
+      </p>
+    </div>
+    <RemoveFromCart id={cartItem.id} />
+  </CartItemStyles>
+);
+
+CartItem.propTypes = {
+  cartItem: PropTypes.object.isRequired,
+};
+
+export default CartItem;
diff --git a/stepped-solutions/43/frontend/components/RemoveFromCart.js b/stepped-solutions/43/frontend/components/RemoveFromCart.js
new file mode 100755
index 0000000..b716e92
--- /dev/null
+++ b/stepped-solutions/43/frontend/components/RemoveFromCart.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Mutation } from 'react-apollo';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import gql from 'graphql-tag';
+import { CURRENT_USER_QUERY } from './User';
+
+const REMOVE_FROM_CART_MUTATION = gql`
+  mutation removeFromCart($id: ID!) {
+    removeFromCart(id: $id) {
+      id
+    }
+  }
+`;
+
+const BigButton = styled.button`
+  font-size: 3rem;
+  background: none;
+  border: 0;
+  &:hover {
+    color: ${props => props.theme.red};
+    cursor: pointer;
+  }
+`;
+
+class RemoveFromCart extends React.Component {
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+  };
+  render() {
+    return (
+      <Mutation mutation={REMOVE_FROM_CART_MUTATION} variables={{ id: this.props.id }}>
+        {(removeFromCart, { loading, error }) => (
+          <BigButton
+            disabled={loading}
+            onClick={() => {
+              removeFromCart().catch(err => alert(err.message));
+            }}
+            title="Delete Item"
+          >
+            &times;
+          </BigButton>
+        )}
+      </Mutation>
+    );
+  }
+}
+
+export default RemoveFromCart;