1 files changed, 57 insertions, 0 deletions
diff --git a/finished-application/frontend/components/RemoveFromCart.js b/finished-application/frontend/components/RemoveFromCart.js
new file mode 100644
index 0000000..d29cbf1
--- /dev/null
+++ b/finished-application/frontend/components/RemoveFromCart.js
@@ -0,0 +1,57 @@
+import { Component } 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 Component {
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+  };
+
+  update = (cache, payload) => {
+    const data = cache.readQuery({ query: CURRENT_USER_QUERY });
+    // console.log(data.me.cart[0]);
+    const cartItemId = payload.data.removeFromCart.id;
+    data.me.cart = data.me.cart.filter(cartItem => cartItem.id !== cartItemId);
+    cache.writeQuery({ query: CURRENT_USER_QUERY, data });
+  };
+
+  render() {
+    return (
+      <Mutation
+        mutation={REMOVE_FROM_CART_MUTATION}
+        variables={{ id: this.props.id }}
+        update={this.update}
+      >
+        {(removeFromCart, { loading }) => (
+          <BigButton disabled={loading} title="Remove From Cart" onClick={() => removeFromCart}>
+            ×
+          </BigButton>
+        )}
+      </Mutation>
+    );
+  }
+}
+
+export default RemoveFromCart;
+export { REMOVE_FROM_CART_MUTATION };