From d533941eacbb2faaa5bfa6421abf1816ae39386f Mon Sep 17 00:00:00 2001
From: jero <aneurysmjs@outlook.com>
Date: Mon, 19 Aug 2019 23:56:01 -0500
Subject: [PATCH] feat(usermenu): connect to store and get cart state

display cart's quantity next to cart icon
---
 src/app/components/core/UserMenu/UserMenu.js   | 10 ++++++++++
 src/app/components/core/UserMenu/UserMenu.scss |  9 +++++++++
 2 files changed, 19 insertions(+)

diff --git a/src/app/components/core/UserMenu/UserMenu.js b/src/app/components/core/UserMenu/UserMenu.js
index 7e68fc7b..03262f5f 100644
--- a/src/app/components/core/UserMenu/UserMenu.js
+++ b/src/app/components/core/UserMenu/UserMenu.js
@@ -1,13 +1,19 @@
 // @flow strict
 import React, { useState } from 'react';
+// $FlowFixMe
+import { useSelector } from 'react-redux';
 
 import Icon from '@/components/base/Icon/Icon';
 import { useLazy } from '@/hooks/useLazy';
+import { getCart } from '@/store/reducers/cart';
+
+import type { CartType } from '@/store/types/CartType';
 
 import './UserMenu.scss';
 
 const UserMenu = () => {
   const [open, setOpen] = useState(false);
+  const cart: CartType = useSelector(getCart);
 
   const handleOpen = () => setOpen(!open);
 
@@ -32,6 +38,7 @@ const UserMenu = () => {
           </Sidebar>)
         : null}
       <span
+        className="user-menu__cart-icon"
         tabIndex="-1"
         role="button"
         onKeyPress={() => {}}
@@ -41,6 +48,9 @@ const UserMenu = () => {
           size="20"
           path="icons/cart"
         />
+        <span className="user-menu__cart-quantity">
+          ({ cart.quantity })
+        </span>
       </span>
     </div>
   );
diff --git a/src/app/components/core/UserMenu/UserMenu.scss b/src/app/components/core/UserMenu/UserMenu.scss
index aef8c3eb..f62a99c4 100644
--- a/src/app/components/core/UserMenu/UserMenu.scss
+++ b/src/app/components/core/UserMenu/UserMenu.scss
@@ -6,4 +6,13 @@
   align-items: center;
   display: flex;
   padding: 0 px-to-rem(16);
+
+  @include element(cart-icon) {
+    align-items: center;
+    display: flex;
+  }
+
+  @include element(cart-quantity) {
+    margin-left: px-to-rem(5);
+  }
 }
\ No newline at end of file