Migrate to render props

1 files changed, 15 insertions, 14 deletions

diff --git a/frontend/components/RemoveFromCart.js b/frontend/components/RemoveFromCart.js
index 235ecce..d8c81b0 100644
--- a/frontend/components/RemoveFromCart.js
+++ b/frontend/components/RemoveFromCart.js
@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import { compose } from 'react-apollo';
+import { Mutation } from 'react-apollo';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { removeFromCartEnhancer } from '../enhancers/enhancers';
+import { REMOVE_FROM_CART_MUTATION, CURRENT_USER_QUERY } from '../queries/index';
 
 const BigButton = styled.button`
   font-size: 3rem;
@@ -16,26 +16,27 @@ const BigButton = styled.button`
 
 class RemoveFromCart extends Component {
   static propTypes = {
-    removeFromCart: PropTypes.func.isRequired,
     id: PropTypes.string.isRequired,
   };
 
-  handleRemoveFromCart = async () => {
-    await this.props.removeFromCart({
-      variables: {
-        id: this.props.id,
-      },
-    });
+  update = (proxy, payload) => {
+    const data = proxy.readQuery({ query: CURRENT_USER_QUERY });
+    const cartItemId = payload.data.removeFromCart.id;
+    data.me.cart = data.me.cart.filter(item => item.id !== cartItemId);
+    proxy.writeQuery({ query: CURRENT_USER_QUERY, data });
   };
 
   render() {
     return (
-      <BigButton title="Remove From Cart" onClick={this.handleRemoveFromCart}>
-        &times;
-      </BigButton>
+      <Mutation mutation={REMOVE_FROM_CART_MUTATION} variables={{ id: this.props.id }} update={this.update}>
+        {removeFromCart => (
+          <BigButton title="Remove From Cart" onClick={removeFromCart}>
+            &times;
+          </BigButton>
+        )}
+      </Mutation>
     );
   }
 }
 
-export default compose(removeFromCartEnhancer)(RemoveFromCart);
-export { RemoveFromCart };
+export default RemoveFromCart;