added toggling features of the cart into redux

Author: AdityaKumawat97

src/components/cart-dropdown/cart-dropdown.styles.scss

@@ -1,7 +1,7 @@
 .cart-dropdown {
     position: absolute;
     width: 240px;
-    height: 340px;
+    height: auto;
     display: flex;
     flex-direction: column;
     padding: 20px;

src/components/cart-icon/Cart-icon.jsx

@@ -1,11 +1,22 @@
 import React from 'react'
+import { connect } from 'react-redux'
+
+import { toggleCartHidden } from '../../redux/cart/cart.actions'
+
 import './cart-icon.styles.scss'
 import { ReactComponent as ShoppingIcon } from '../../assets/shopping-bag.svg'
-export default function CartIcon() {
+
+function CartIcon({ toggleCartHidden }) {
     return (
-        <div className="cart-icon">
+        <div className="cart-icon" onClick={toggleCartHidden}>
             <ShoppingIcon className="shopping-icon" />
             <span className="item-count">0</span>
         </div>
     )
 }
+
+const mapDispatchToProps = dispatch => ({
+    toggleCartHidden: () => dispatch(toggleCartHidden())
+})
+
+export default connect(null, mapDispatchToProps)(CartIcon)

src/components/header/header.component.jsx

@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom'
 import { auth } from '../../firebase/firebase.utils'
 import CartIcon from '../cart-icon/Cart-icon'
 import CartDropdown from '../cart-dropdown/cart-dropdown.component'
-function Header({ currentUser }) {
+function Header({ currentUser, hidden }) {
     return (
         <div className="header">
             <Link to="/" className="logo-container">
@@ -31,13 +31,17 @@ function Header({ currentUser }) {
                 }
                 <CartIcon />
             </div>
-            <CartDropdown />
+            {
+                hidden ? null : <CartDropdown />
+            }
+
         </div>
     )
 }
 
-const mapStatetoProps = state => ({
-    currentUser: state.user.currentUser
+const mapStatetoProps = ({ user: { currentUser }, cart: { hidden } }) => ({
+    currentUser,
+    hidden
 })
 
 export default connect(mapStatetoProps)(Header)

src/redux/cart/cart.actions.js

@@ -0,0 +1,5 @@
+import CartActionTypes from './cart.types'
+
+export const toggleCartHidden = () => ({
+    type: CartActionTypes.TOGGLE_CART_HIDDEN
+})

src/redux/cart/cart.reducer.js

@@ -0,0 +1,22 @@
+import CartActionTypes from './cart.types'
+
+
+const INITIAL_STATE = {
+    hidden: true
+}
+
+
+const cartReducer = (state = INITIAL_STATE, action) => {
+
+    switch (action.type) {
+        case CartActionTypes.TOGGLE_CART_HIDDEN:
+            return {
+                ...state,
+                hidden: !state.hidden
+            }
+            default:
+                return state
+    }
+}
+
+export default cartReducer

src/redux/cart/cart.types.js

@@ -0,0 +1,5 @@
+const CartActionTypes = {
+    TOGGLE_CART_HIDDEN: 'TOGGLE_CART_HIDDEN'
+}
+
+export default CartActionTypes

src/redux/root-reducer.js

@@ -1,7 +1,8 @@
 import { combineReducers } from 'redux'
 import userReducer from './user/user.reducer'
-
+import cartReducer from './cart/cart.reducer'
 
 export default combineReducers({
-    user: userReducer
+    user: userReducer,
+    cart: cartReducer
 })