Updating and removing items in cart

Author: Matthew Freire

core/api/urls.py

@@ -5,13 +5,15 @@
     ItemDetailView,
     AddToCartView,
     OrderDetailView,
+    OrderQuantityUpdateView,
     PaymentView,
     AddCouponView,
     CountryListView,
     AddressListView,
     AddressCreateView,
     AddressUpdateView,
-    AddressDeleteView
+    AddressDeleteView,
+    OrderItemDeleteView
 )
 
 urlpatterns = [
@@ -29,4 +31,8 @@
     path('order-summary/', OrderDetailView.as_view(), name='order-summary'),
     path('checkout/', PaymentView.as_view(), name='checkout'),
     path('add-coupon/', AddCouponView.as_view(), name='add-coupon'),
+    path('order-items/<pk>/delete/',
+         OrderItemDeleteView.as_view(), name='order-item-delete'),
+    path('order-item/update-quantity/',
+         OrderQuantityUpdateView.as_view(), name='order-item-update-quantity'),
 ]

core/api/views.py

@@ -40,6 +40,42 @@ class ItemDetailView(RetrieveAPIView):
     queryset = Item.objects.all()
 
 
+class OrderQuantityUpdateView(APIView):
+    def post(self, request, *args, **kwargs):
+        slug = request.data.get('slug', None)
+        if slug is None:
+            return Response({"message": "Invalid data"}, status=HTTP_400_BAD_REQUEST)
+        item = get_object_or_404(Item, slug=slug)
+        order_qs = Order.objects.filter(
+            user=request.user,
+            ordered=False
+        )
+        if order_qs.exists():
+            order = order_qs[0]
+            # check if the order item is in the order
+            if order.items.filter(item__slug=item.slug).exists():
+                order_item = OrderItem.objects.filter(
+                    item=item,
+                    user=request.user,
+                    ordered=False
+                )[0]
+                if order_item.quantity > 1:
+                    order_item.quantity -= 1
+                    order_item.save()
+                else:
+                    order.items.remove(order_item)
+                return Response(status=HTTP_200_OK)
+            else:
+                return Response({"message": "This item was not in your cart"}, status=HTTP_400_BAD_REQUEST)
+        else:
+            return Response({"message": "You do not have an active order"}, status=HTTP_400_BAD_REQUEST)
+
+
+class OrderItemDeleteView(DestroyAPIView):
+    permission_classes = (IsAuthenticated, )
+    queryset = OrderItem.objects.all()
+
+
 class AddToCartView(APIView):
     def post(self, request, *args, **kwargs):
         slug = request.data.get('slug', None)

db.sqlite3

@@ -17,3 +17,5 @@ export const addressListURL = addressType =>
 export const addressCreateURL = `${endpoint}/addresses/create/`;
 export const addressUpdateURL = id => `${endpoint}/addresses/${id}/update/`;
 export const addressDeleteURL = id => `${endpoint}/addresses/${id}/delete/`;
+export const orderItemDeleteURL = id => `${endpoint}/order-items/${id}/delete/`;
+export const orderItemUpdateQuantityURL = `${endpoint}/order-item/update-quantity/`;

src/constants.js

@@ -22,7 +22,6 @@ class CustomLayout extends React.Component {
 
   render() {
     const { authenticated, cart, loading } = this.props;
-    console.log(cart);
     return (
       <div>
         <Menu inverted>

src/containers/Layout.js

@@ -3,6 +3,7 @@ import {
   Container,
   Dimmer,
   Header,
+  Icon,
   Image,
   Label,
   Loader,
@@ -11,9 +12,15 @@ import {
   Message,
   Segment
 } from "semantic-ui-react";
-import { Link } from "react-router-dom";
+import { connect } from "react-redux";
+import { Link, Redirect } from "react-router-dom";
 import { authAxios } from "../utils";
-import { orderSummaryURL } from "../constants";
+import {
+  addToCartURL,
+  orderSummaryURL,
+  orderItemDeleteURL,
+  orderItemUpdateQuantityURL
+} from "../constants";
 
 class OrderSummary extends React.Component {
   state = {
@@ -53,8 +60,57 @@ class OrderSummary extends React.Component {
     return text;
   };
 
+  handleFormatData = itemVariations => {
+    // convert [{id: 1},{id: 2}] to [1,2] - they're all variations
+    return Object.keys(itemVariations).map(key => {
+      return itemVariations[key].id;
+    });
+  };
+
+  handleAddToCart = (slug, itemVariations) => {
+    this.setState({ loading: true });
+    const variations = this.handleFormatData(itemVariations);
+    authAxios
+      .post(addToCartURL, { slug, variations })
+      .then(res => {
+        this.handleFetchOrder();
+        this.setState({ loading: false });
+      })
+      .catch(err => {
+        this.setState({ error: err, loading: false });
+      });
+  };
+
+  handleRemoveQuantityFromCart = slug => {
+    authAxios
+      .post(orderItemUpdateQuantityURL, { slug })
+      .then(res => {
+        this.handleFetchOrder();
+      })
+      .catch(err => {
+        this.setState({ error: err });
+      });
+  };
+
+  handleRemoveItem = itemID => {
+    authAxios
+      .delete(orderItemDeleteURL(itemID))
+      .then(res => {
+        this.handleFetchOrder();
+      })
+      .catch(err => {
+        this.setState({ error: err });
+      });
+  };
+
   render() {
     const { data, error, loading } = this.state;
+    const { isAuthenticated } = this.props;
+    if (!isAuthenticated) {
+      return <Redirect to="/login" />;
+    }
+    console.log(data);
+
     return (
       <Container>
         <Header>Order Summary</Header>
@@ -96,14 +152,39 @@ class OrderSummary extends React.Component {
                       {this.renderVariations(orderItem)}
                     </Table.Cell>
                     <Table.Cell>${orderItem.item.price}</Table.Cell>
-                    <Table.Cell>{orderItem.quantity}</Table.Cell>
+                    <Table.Cell textAlign="center">
+                      <Icon
+                        name="minus"
+                        style={{ float: "left", cursor: "pointer" }}
+                        onClick={() =>
+                          this.handleRemoveQuantityFromCart(orderItem.item.slug)
+                        }
+                      />
+                      {orderItem.quantity}
+                      <Icon
+                        name="plus"
+                        style={{ float: "right", cursor: "pointer" }}
+                        onClick={() =>
+                          this.handleAddToCart(
+                            orderItem.item.slug,
+                            orderItem.item_variations
+                          )
+                        }
+                      />
+                    </Table.Cell>
                     <Table.Cell>
                       {orderItem.item.discount_price && (
                         <Label color="green" ribbon>
                           ON DISCOUNT
                         </Label>
                       )}
                       ${orderItem.final_price}
+                      <Icon
+                        name="trash"
+                        color="red"
+                        style={{ float: "right", cursor: "pointer" }}
+                        onClick={() => this.handleRemoveItem(orderItem.id)}
+                      />
                     </Table.Cell>
                   </Table.Row>
                 );
@@ -136,4 +217,10 @@ class OrderSummary extends React.Component {
   }
 }
 
-export default OrderSummary;
+const mapStateToProps = state => {
+  return {
+    isAuthenticated: state.auth.token !== null
+  };
+};
+
+export default connect(mapStateToProps)(OrderSummary);