Adding cart items info to the header

ecommerce/views/v0/__init__.py

@@ -205,6 +205,27 @@ def get_object(self, username=None):  # noqa: ARG002
     def get_queryset(self):
         return Basket.objects.filter(user=self.request.user).all()
 
+    @action(
+        detail=False,
+        methods=["get"],
+        name="Basket Items Count",
+        url_name="basket_items_count",
+    )
+    def get_items_in_basket(self):
+        basket, _ = Basket.objects.get_or_create(user=self.request.user)
+        print(basket.get_products())
+        print(basket.get_products().count())
+
+        print(basket.get_basket_items())
+        print(basket.products.all())
+        return Response(
+            {
+                "message": "Discount applied",
+                "cartItemsCount": 5,
+            }
+        )
+
+
 
 class BasketItemViewSet(
     NestedViewSetMixin, ListCreateAPIView, mixins.DestroyModelMixin, GenericViewSet

frontend/public/src/components/TopBar.js

@@ -35,7 +35,7 @@ const TopBar = ({ currentUser }: Props) => {
       currentUser.id :
       "anonymousUser"
   )
-  const cartItemCount = 0
+  const cartItemCount = 1
   return (
     <header className="site-header d-flex d-flex flex-column">
       {showComponent ? (

frontend/public/src/containers/App.js

@@ -32,11 +32,19 @@ import CatalogPage from "./pages/CatalogPage"
 
 import type { Match, Location } from "react-router"
 import type { CurrentUser } from "../flow/authTypes"
+import {pathOr} from "ramda"
+import {
+  cartItemsCountQuery,
+  cartItemsCountQueryKey,
+  cartItemsCountSelector,
+  coursesQuery
+} from "../lib/queries/courseRuns"
 
 type Props = {
   match: Match,
   location: Location,
   currentUser: ?CurrentUser,
+  cartItemsCount: number,
   addUserNotification: Function
 }
 
@@ -135,15 +143,18 @@ 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 = props => [
+  cartItemsCountQuery(props.courseId),
+  users.currentUserQuery()
+]
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
   connectRequest(mapPropsToConfig)

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

@@ -4,6 +4,7 @@ import { nextState } from "./util"
 
 export const courseRunsSelector = pathOr(null, ["entities", "courseRuns"])
 export const coursesSelector = pathOr(null, ["entities", "courses"])
+export const cartItemsCountSelector = pathOr(null, ["entities", "cartItemsCount"])
 export const programsSelector = pathOr(null, ["entities", "programs"])
 
 export const courseRunsQueryKey = "courseRuns"
@@ -32,6 +33,18 @@ export const coursesQuery = (courseKey: string = "") => ({
   }
 })
 
+export const cartItemsCountQuery = () => ({
+  queryKey:  "cartItemsCount",
+  url:       `/api/baskets/basket_items_count/`,
+  transform: json => ({
+    cartItemsCount: json
+  }),
+  update: {
+    cartItemsCount: nextState
+  }
+})
+
+
 // This will need to be updated to v2 once we get the courses endpoint to allow for multiple ID query
 export const programsQuery = (programKey: string = "") => ({
   queryKey:  programsQueryKey,