Adding cart items info to the header

ecommerce/views/v0/__init__.py

@@ -559,6 +559,17 @@ def cart(self, request):
 
         return Response(BasketWithProductSerializer(basket).data)
 
+    @action(
+        detail=False,
+        methods=["get"],
+        name="Basket Items Count",
+        url_name="basket_items_count",
+    )
+    def basket_items_count(self, request):
+        basket, _ = Basket.objects.get_or_create(user=request.user)
+
+        return Response(basket.basket_items.count())
+
 
 @method_decorator(csrf_exempt, name="dispatch")
 class CheckoutCallbackView(View):

frontend/public/src/components/Header.js

@@ -10,10 +10,11 @@ import TopBar from "./TopBar"
 
 type Props = {
   currentUser: CurrentUser,
+  cartItemsCount: number,
   location: ?Location
 }
 
-const Header = ({ currentUser, location }: Props) => {
+const Header = ({ currentUser, cartItemsCount, location }: Props) => {
   if (currentUser && currentUser.is_authenticated) {
     Sentry.getCurrentScope().setUser({
       id:       currentUser.id,
@@ -30,7 +31,11 @@ const Header = ({ currentUser, location }: Props) => {
   }
   return (
     <React.Fragment>
-      <TopBar currentUser={currentUser} location={location} />
+      <TopBar
+        currentUser={currentUser}
+        cartItemsCount={cartItemsCount}
+        location={location}
+      />
     </React.Fragment>
   )
 }

frontend/public/src/components/TopBar.js

@@ -14,10 +14,11 @@ import { checkFeatureFlag } from "../lib/util"
 
 type Props = {
   currentUser: CurrentUser,
+  cartItemsCount: number,
   location: ?Location
 }
 
-const TopBar = ({ currentUser }: Props) => {
+const TopBar = ({ currentUser, cartItemsCount }: Props) => {
   // Delay any alert displayed on page-load by 500ms in order to
   // ensure the alert is read by screen readers.
   const [showComponent, setShowComponent] = useState(false)
@@ -35,7 +36,6 @@ const TopBar = ({ currentUser }: Props) => {
       currentUser.id :
       "anonymousUser"
   )
-  const cartItemCount = 0
   return (
     <header className="site-header d-flex d-flex flex-column">
       {showComponent ? (
@@ -80,9 +80,9 @@ const TopBar = ({ currentUser }: Props) => {
                       onClick={() => (window.location = routes.cart)}
                       aria-label="Cart"
                     />
-                    {cartItemCount ? (
+                    {cartItemsCount ? (
                       <span className="badge" id="cart-count">
-                        {cartItemCount}
+                        {cartItemsCount}
                       </span>
                     ) : null}
                     <MixedLink

frontend/public/src/components/TopBar_test.js

@@ -9,10 +9,17 @@ import { makeUser, makeAnonymousUser } from "../factories/user"
 describe("TopBar component", () => {
   describe("for anonymous users", () => {
     const user = makeAnonymousUser()
+    const cartItemsCount = 0
 
     it("has an AnonymousMenu component", () => {
       assert.isOk(
-        shallow(<TopBar currentUser={user} location={null} />)
+        shallow(
+          <TopBar
+            currentUser={user}
+            cartItemsCount={cartItemsCount}
+            location={null}
+          />
+        )
           .find("AnonymousMenu")
           .exists()
       )
@@ -21,9 +28,16 @@ describe("TopBar component", () => {
 
   describe("for logged in users", () => {
     const user = makeUser()
+    const cartItemsCount = 3
     it("has a UserMenu component", () => {
       assert.isOk(
-        shallow(<TopBar currentUser={user} location={null} />)
+        shallow(
+          <TopBar
+            currentUser={user}
+            cartItemsCount={cartItemsCount}
+            location={null}
+          />
+        )
           .find("UserMenu")
           .exists()
       )

frontend/public/src/containers/App.js

@@ -32,11 +32,16 @@ import CatalogPage from "./pages/CatalogPage"
 
 import type { Match, Location } from "react-router"
 import type { CurrentUser } from "../flow/authTypes"
+import {
+  cartItemsCountQuery,
+  cartItemsCountSelector
+} from "../lib/queries/cart"
 
 type Props = {
   match: Match,
   location: Location,
   currentUser: ?CurrentUser,
+  cartItemsCount: number,
   addUserNotification: Function
 }
 
@@ -59,15 +64,19 @@ export class App extends React.Component<Props, void> {
   }
 
   render() {
-    const { match, currentUser, location } = this.props
+    const { match, currentUser, cartItemsCount, location } = this.props
     if (!currentUser) {
       // application is still loading
       return <div className="app" />
     }
 
     return (
       <div className="app" aria-flowto="notifications-container">
-        <Header currentUser={currentUser} location={location} />
+        <Header
+          currentUser={currentUser}
+          cartItemsCount={cartItemsCount}
+          location={location}
+        />
         <div id="main" className="main-page-content">
           <Switch>
             <Route
@@ -135,15 +144,15 @@ export class App extends React.Component<Props, void> {
 }
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: currentUserSelector
+  currentUser:    currentUserSelector,
+  cartItemsCount: cartItemsCountSelector
 })
 
 const mapDispatchToProps = {
   addUserNotification
 }
 
-const mapPropsToConfig = () => [users.currentUserQuery()]
-
+const mapPropsToConfig = () => [cartItemsCountQuery(), users.currentUserQuery()]
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   connectRequest(mapPropsToConfig)

frontend/public/src/containers/HeaderApp.js

@@ -15,9 +15,14 @@ import {
 
 import type { Store } from "redux"
 import type { CurrentUser } from "../flow/authTypes"
+import {
+  cartItemsCountQuery,
+  cartItemsCountSelector
+} from "../lib/queries/cart"
 
 type Props = {
   currentUser: ?CurrentUser,
+  cartItemsCount: number,
   store: Store<*, *>,
   addUserNotification: Function
 }
@@ -41,22 +46,29 @@ export class HeaderApp extends React.Component<Props, void> {
   }
 
   render() {
-    const { currentUser } = this.props
+    const { currentUser, cartItemsCount } = this.props
 
     if (!currentUser) {
       // application is still loading
       return <div />
     }
 
-    return <Header currentUser={currentUser} location={null} />
+    return (
+      <Header
+        currentUser={currentUser}
+        cartItemsCount={cartItemsCount}
+        location={null}
+      />
+    )
   }
 }
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: currentUserSelector
+  currentUser:    currentUserSelector,
+  cartItemsCount: cartItemsCountSelector
 })
 
-const mapPropsToConfig = () => [users.currentUserQuery()]
+const mapPropsToConfig = () => [cartItemsCountQuery(), users.currentUserQuery()]
 
 const mapDispatchToProps = {
   addUserNotification

frontend/public/src/lib/queries/cart.js

@@ -5,6 +5,10 @@ import { getCsrfOptions, nextState } from "./util"
 export const cartSelector = pathOr(null, ["entities", "cartItems"])
 export const totalPriceSelector = pathOr(null, ["entities", "totalPrice"])
 export const orderHistorySelector = pathOr(null, ["entities", "orderHistory"])
+export const cartItemsCountSelector = pathOr(null, [
+  "entities",
+  "cartItemsCount"
+])
 
 export const discountedPriceSelector = pathOr(null, [
   "entities",
@@ -115,3 +119,14 @@ export const applyCartMutation = (productId: string) => ({
   },
   update: {}
 })
+
+export const cartItemsCountQuery = () => ({
+  queryKey:  "cartItemsCount",
+  url:       `/api/checkout/basket_items_count/`,
+  transform: json => ({
+    cartItemsCount: json
+  }),
+  update: {
+    cartItemsCount: nextState
+  }
+})