Shopping cart count and add to cart

Author: Matthew Freire

core/api/serializers.py

@@ -1,5 +1,10 @@
 from rest_framework import serializers
-from core.models import Item
+from core.models import Item, Order, OrderItem
+
+
+class StringSerializer(serializers.StringRelatedField):
+    def to_internal_value(self, value):
+        return value
 
 
 class ItemSerializer(serializers.ModelSerializer):
@@ -25,3 +30,29 @@ def get_category(self, obj):
 
     def get_label(self, obj):
         return obj.get_label_display()
+
+
+class OrderItemSerializer(serializers.ModelSerializer):
+    item = StringSerializer()
+
+    class Meta:
+        model = OrderItem
+        fields = (
+            'id',
+            'item',
+            'quantity'
+        )
+
+
+class OrderSerializer(serializers.ModelSerializer):
+    order_items = serializers.SerializerMethodField()
+
+    class Meta:
+        model = Order
+        fields = (
+            'id',
+            'order_items'
+        )
+
+    def get_order_items(self, obj):
+        return OrderItemSerializer(obj.items.all(), many=True).data

core/api/urls.py

@@ -1,6 +1,12 @@
 from django.urls import path
-from .views import ItemListView
+from .views import (
+    ItemListView,
+    AddToCartView,
+    OrderDetailView
+)
 
 urlpatterns = [
-    path('product-list/', ItemListView.as_view(), name='product-list')
+    path('product-list/', ItemListView.as_view(), name='product-list'),
+    path('add-to-cart/', AddToCartView.as_view(), name='add-to-cart'),
+    path('order-summary/', OrderDetailView.as_view(), name='order-summary')
 ]

core/api/views.py

@@ -1,10 +1,60 @@
-from rest_framework.generics import ListAPIView
-from rest_framework.permissions import AllowAny
-from core.models import Item
-from .serializers import ItemSerializer
+from django.conf import settings
+from django.core.exceptions import ObjectDoesNotExist
+from django.shortcuts import render, get_object_or_404
+from django.utils import timezone
+from rest_framework.generics import ListAPIView, RetrieveAPIView
+from rest_framework.permissions import AllowAny, IsAuthenticated
+from rest_framework.views import APIView
+from rest_framework.response import Response
+from rest_framework.status import HTTP_200_OK, HTTP_400_BAD_REQUEST
+from core.models import Item, OrderItem, Order
+from .serializers import ItemSerializer, OrderSerializer
 
 
 class ItemListView(ListAPIView):
     permission_classes = (AllowAny,)
     serializer_class = ItemSerializer
     queryset = Item.objects.all()
+
+
+class AddToCartView(APIView):
+    def post(self, request, *args, **kwargs):
+        slug = request.data.get('slug', None)
+        if slug is None:
+            return Response({"message": "Invalid request"}, status=HTTP_400_BAD_REQUESTß)
+        item = get_object_or_404(Item, slug=slug)
+        order_item, created = OrderItem.objects.get_or_create(
+            item=item,
+            user=request.user,
+            ordered=False
+        )
+        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.quantity += 1
+                order_item.save()
+                return Response(status=HTTP_200_OK)
+            else:
+                order.items.add(order_item)
+                return Response(status=HTTP_200_OK)
+
+        else:
+            ordered_date = timezone.now()
+            order = Order.objects.create(
+                user=request.user, ordered_date=ordered_date)
+            order.items.add(order_item)
+            return Response(status=HTTP_200_OK)
+
+
+class OrderDetailView(RetrieveAPIView):
+    serializer_class = OrderSerializer
+    permission_classes = (IsAuthenticated,)
+
+    def get_object(self):
+        try:
+            order = Order.objects.get(user=self.request.user, ordered=False)
+            return order
+        except ObjectDoesNotExist:
+            return Response({"message": "You do not have an active order"}, status=HTTP_400_BAD_REQUEST)

home/urls.py

@@ -1,3 +1,5 @@
+from django.conf import settings
+from django.conf.urls.static import static
 from django.contrib import admin
 from django.urls import path, include, re_path
 from django.views.generic import TemplateView
@@ -8,5 +10,13 @@
     path('rest-auth/registration/', include('rest_auth.registration.urls')),
     path('admin/', admin.site.urls),
     path('api/', include('core.api.urls')),
-    re_path(r'^.*', TemplateView.as_view(template_name='index.html')),
 ]
+
+if settings.DEBUG:
+    urlpatterns += static(settings.MEDIA_URL,
+                          document_root=settings.MEDIA_ROOT)
+
+
+if not settings.DEBUG:
+    urlpatterns += [re_path(r'^.*',
+                            TemplateView.as_view(template_name='index.html'))]

requirements.txt

@@ -16,6 +16,7 @@ lazy-object-proxy==1.4.1
 mccabe==0.6.1
 oauthlib==3.0.1
 pep8==1.7.1
+Pillow==6.1.0
 pycodestyle==2.5.0
 pylint==2.3.1
 python3-openid==3.1.0

src/constants.js

@@ -2,6 +2,8 @@ const localhost = "http://127.0.0.1:8000";
 
 const apiURL = "/api";
 
-const endpoint = `${localhost}${apiURL}`;
+export const endpoint = `${localhost}${apiURL}`;
 
 export const productListURL = `${endpoint}/product-list/`;
+export const addToCartURL = `${endpoint}/add-to-cart/`;
+export const orderSummaryURL = `${endpoint}/order-summary/`;

src/containers/Layout.js

@@ -13,10 +13,16 @@ import {
 import { Link, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 import { logout } from "../store/actions/auth";
+import { fetchCart } from "../store/actions/cart";
 
 class CustomLayout extends React.Component {
+  componentDidMount() {
+    this.props.fetchCart();
+  }
+
   render() {
-    const { authenticated } = this.props;
+    const { authenticated, cart, loading } = this.props;
+    console.log(cart);
     return (
       <div>
         <Menu inverted>
@@ -41,6 +47,31 @@ class CustomLayout extends React.Component {
             <Link to="/products">
               <Menu.Item header>Products</Menu.Item>
             </Link>
+            <Menu.Menu inverted position="right">
+              <Dropdown
+                icon="cart"
+                loading={loading}
+                text={`${cart !== null ? cart.order_items.length : 0}`}
+                pointing
+                className="link item"
+              >
+                <Dropdown.Menu>
+                  {cart &&
+                    cart.order_items.map(order_item => {
+                      return (
+                        <Dropdown.Item key={order_item.id}>
+                          {order_item.quantity} x {order_item.item}
+                        </Dropdown.Item>
+                      );
+                    })}
+                  {cart && cart.order_items.length < 1 ? (
+                    <Dropdown.Item>No items in your cart</Dropdown.Item>
+                  ) : null}
+                  <Dropdown.Divider />
+                  <Dropdown.Item icon="arrow right" text="Checkout" />
+                </Dropdown.Menu>
+              </Dropdown>
+            </Menu.Menu>
           </Container>
         </Menu>
 
@@ -114,13 +145,16 @@ class CustomLayout extends React.Component {
 
 const mapStateToProps = state => {
   return {
-    authenticated: state.auth.token !== null
+    authenticated: state.auth.token !== null,
+    cart: state.cart.shoppingCart,
+    loading: state.cart.loading
   };
 };
 
 const mapDispatchToProps = dispatch => {
   return {
-    logout: () => dispatch(logout())
+    logout: () => dispatch(logout()),
+    fetchCart: () => dispatch(fetchCart())
   };
 };
 

src/containers/ProductList.js

@@ -12,7 +12,8 @@ import {
   Message,
   Segment
 } from "semantic-ui-react";
-import { productListURL } from "../constants";
+import { productListURL, addToCartURL } from "../constants";
+import { authAxios } from "../utils";
 
 class ProductList extends React.Component {
   state = {
@@ -34,6 +35,20 @@ class ProductList extends React.Component {
       });
   }
 
+  handleAddToCart = slug => {
+    this.setState({ loading: true });
+    authAxios
+      .post(addToCartURL, { slug })
+      .then(res => {
+        console.log(res.data);
+        // update the cart count
+        this.setState({ loading: false });
+      })
+      .catch(err => {
+        this.setState({ error: err, loading: false });
+      });
+  };
+
   render() {
     const { data, error, loading } = this.state;
     return (
@@ -66,7 +81,13 @@ class ProductList extends React.Component {
                   </Item.Meta>
                   <Item.Description>{item.description}</Item.Description>
                   <Item.Extra>
-                    <Button primary floated="right" icon labelPosition="right">
+                    <Button
+                      primary
+                      floated="right"
+                      icon
+                      labelPosition="right"
+                      onClick={() => this.handleAddToCart(item.slug)}
+                    >
                       Add to cart
                       <Icon name="cart plus" />
                     </Button>

src/index.js

@@ -7,11 +7,13 @@ import { Provider } from "react-redux";
 import thunk from "redux-thunk";
 
 import authReducer from "./store/reducers/auth";
+import cartReducer from "./store/reducers/cart";
 
 const composeEnhances = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 const rootReducer = combineReducers({
-  auth: authReducer
+  auth: authReducer,
+  cart: cartReducer
 });
 
 const store = createStore(rootReducer, composeEnhances(applyMiddleware(thunk)));

src/store/actions/actionTypes.js

@@ -2,3 +2,7 @@ export const AUTH_START = "AUTH_START";
 export const AUTH_SUCCESS = "AUTH_SUCCESS";
 export const AUTH_FAIL = "AUTH_FAIL";
 export const AUTH_LOGOUT = "AUTH_LOGOUT";
+
+export const CART_START = "CART_START";
+export const CART_SUCCESS = "CART_SUCCESS";
+export const CART_FAIL = "CART_FAIL";

src/store/actions/cart.js

@@ -0,0 +1,38 @@
+import axios from "axios";
+import { CART_START, CART_SUCCESS, CART_FAIL } from "./actionTypes";
+import { authAxios } from "../../utils";
+import { orderSummaryURL } from "../../constants";
+
+export const cartStart = () => {
+  return {
+    type: CART_START
+  };
+};
+
+export const cartSuccess = data => {
+  return {
+    type: CART_SUCCESS,
+    data
+  };
+};
+
+export const cartFail = error => {
+  return {
+    type: CART_FAIL,
+    error: error
+  };
+};
+
+export const fetchCart = () => {
+  return dispatch => {
+    dispatch(cartStart());
+    authAxios
+      .get(orderSummaryURL)
+      .then(res => {
+        dispatch(cartSuccess(res.data));
+      })
+      .catch(err => {
+        dispatch(cartFail(err));
+      });
+  };
+};

src/store/reducers/cart.js

@@ -0,0 +1,45 @@
+import { CART_START, CART_SUCCESS, CART_FAIL } from "../actions/actionTypes";
+import { updateObject } from "../utility";
+
+const initialState = {
+  shoppingCart: null,
+  error: null,
+  loading: false
+};
+
+const cartStart = (state, action) => {
+  return updateObject(state, {
+    error: null,
+    loading: true
+  });
+};
+
+const cartSuccess = (state, action) => {
+  return updateObject(state, {
+    shoppingCart: action.data,
+    error: null,
+    loading: false
+  });
+};
+
+const cartFail = (state, action) => {
+  return updateObject(state, {
+    error: action.error,
+    loading: false
+  });
+};
+
+const reducer = (state = initialState, action) => {
+  switch (action.type) {
+    case CART_START:
+      return cartStart(state, action);
+    case CART_SUCCESS:
+      return cartSuccess(state, action);
+    case CART_FAIL:
+      return cartFail(state, action);
+    default:
+      return state;
+  }
+};
+
+export default reducer;

src/utils.js

@@ -0,0 +1,9 @@
+import axios from "axios";
+import { endpoint } from "./constants";
+
+export const authAxios = axios.create({
+  baseURL: endpoint,
+  headers: {
+    Authorization: `Token ${localStorage.getItem("token")}`
+  }
+});