cart Functionality complete

.vscode/launch.json

+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file

src/Components/Card.js/Card.js

@@ -17,7 +17,9 @@ const MainCard = ({ data, openNotification }) => {
         <Meta title={firstLatter + data?.title?.substring(1)} />
         <div className={style.priceAndButton}>
           <p>RS: {data?.price}</p>
-          <button onClick={() => dispatch(addCart({data, openNotification}))}>Add To Cart</button>
+          <button onClick={() => dispatch(addCart({ data, openNotification }))}>
+            Add To Cart
+          </button>
         </div>
       </Card>
     </div>

src/Components/Drawer/Drawer.js

-import React, { useState } from "react";
-import { Drawer, Button, Space, Radio } from "antd";
-import { useSelector } from "react-redux";
+import { Drawer } from "antd";
+import { useDispatch, useSelector } from "react-redux";
 import style from "./Drawer.module.scss";
-import mobileImg from "../../assets/images/infinix.jpeg";
 import { AiFillPlusCircle, AiFillMinusCircle } from "react-icons/ai";
+import { MdCancel } from "react-icons/md";
+import {
+  removeItem,
+  increaseQuantity,
+  decreaseQuantity,
+} from "../../store/Reducers/cartReducer";
+import { notification } from "antd";
 
 const MainDrawer = ({ visible, setVisible }) => {
-  const { item } = useSelector((state) => state.cart);
+  const dispatch = useDispatch();
+  const { cart, total } = useSelector((state) => state.cart);
 
-  console.log(item);
-
-  const showDrawer = () => {
-    setVisible(true);
+  const openNotification = () => {
+    notification.success({
+      message: "HUM MART",
+      description: " Item Remove from Cart Successfully",
+      className: "custom-class",
+      placement: "bottomLeft",
+      duration: 2.5,
+    });
   };
 
   const onClose = () => {
     setVisible(false);
   };
 
-  console.log(window.innerWidth);
+  // console.log(window.innerWidth);
+
+  const removeItemFromCart = (item) => {
+    dispatch(removeItem({ item, openNotification }));
+    console.log(item);
+  };
+
+  const productCountingUp = (item) => {
+    dispatch(increaseQuantity(item));
+  };
 
-  // window.innerWidth
+  const productCountingDown = (item) => {
+    dispatch(decreaseQuantity(item));
+  };
 
   return (
     <>
@@ -30,44 +51,76 @@ const MainDrawer = ({ visible, setVisible }) => {
         width={500}
         onClose={onClose}
         visible={visible}
-        // extra={
-        //   <Space>
-        //     <Button onClick={onClose}>Cancel</Button>
-        //     <Button type="primary" onClick={onClose}>
-        //       OK
-        //     </Button>
-        //   </Space>
-        // }
       >
-        {item?.map((item, index) => {
-          return (
-            <>
-              <div className={style.mainContainer}>
-                <div className={style.imageContainer}>
-                  <img src={item?.image} alt="" />
-                </div>
-                <div className={style.rightContainer}>
-                  <p>{item?.title}</p>
-                  <p className={style.productPrice}>Rs: {item?.price}</p>
-                  <div className={style.countingDiv}>
-                    <span>
-                      <AiFillMinusCircle />
-                    </span>
-                    <p>0</p>
-                    <span>
-                      <AiFillPlusCircle />
-                    </span>
+        {Object.values(cart)?.length === 0 ? (
+          <>
+            <div className={style.emptyCartText}>
+              <h3>No Item in your cart</h3>
+            </div>
+          </>
+        ) : (
+          Object.values(cart)?.map((item, index) => {
+            return (
+              <>
+                <div key={index} className={style.mainContainer}>
+                  <div
+                    className={style.crossDiv}
+                    onClick={() => removeItemFromCart(item)}
+                  >
+                    <MdCancel className={style.crossIcon} />
+                  </div>
+                  <div className={style.imageContainer}>
+                    <img src={item?.data?.image} alt="" />
+                  </div>
+                  <div className={style.rightContainer}>
+                    <p>{item?.data?.title}</p>
+                    <p className={style.productPrice}>
+                      Rs: {item?.data?.price}
+                    </p>
+                    <div className={style.countingDiv}>
+                      <span
+                        className={
+                          item?.counting < 2
+                            ? style.minusDisable
+                            : style.plusMinus
+                        }
+                        onClick={
+                          item?.counting < 2
+                            ? undefined
+                            : () => productCountingDown(item)
+                        }
+                      >
+                        <AiFillMinusCircle />
+                      </span>
+                      <p>{item?.counting}</p>
+                      <span
+                        className={style.plusMinus}
+                        onClick={() => productCountingUp(item)}
+                      >
+                        <AiFillPlusCircle />
+                      </span>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </>
-          );
-        })}
+              </>
+            );
+          })
+        )}
         <div className={style.subTotalContainer}>
           <p>Sub Total:</p>
-          <p>RS: 1200</p>
+          <p>RS: {total}</p>
         </div>
-        <button className={style.submitBtn}>Submit</button>
+
+        <button
+          className={
+            Object.values(cart)?.length === 0
+              ? style.submitBtnDisable
+              : style.submitBtn
+          }
+          disabled={Object.values(cart)?.length === 0}
+        >
+          Submit
+        </button>
       </Drawer>
     </>
   );

src/Components/Drawer/Drawer.module.scss

@@ -10,6 +10,15 @@
 //     }
 // }
 
+.emptyCartText {
+  text-align: center;
+  margin: 20px 0px;
+  h3 {
+    font-family: "Poppin-SemiBold";
+    color: red;
+  }
+}
+
 .mainContainer {
   width: 100%;
   min-height: 150px;
@@ -20,6 +29,26 @@
   display: flex;
   align-items: center;
   border: 1px solid black;
+  position: relative;
+  .crossDiv {
+    position: absolute;
+    // top: 0px;
+    bottom: 134px;
+    right: -12px;
+    font-size: 25px;
+    color: white;
+    z-index: 1;
+    background-color: red;
+    height: 25px;
+    width: 25px;
+    border-radius: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    .crossIcon {
+    }
+  }
   .imageContainer {
     width: 30%;
     height: 80%;
@@ -40,20 +69,23 @@
       margin: 2px;
     }
     p:nth-child(1) {
-        font-family: "Poppin-Medium";
-
+      font-family: "Poppin-Medium";
     }
     .productPrice {
       font-family: "Poppin-SemiBold";
     }
 
     .countingDiv {
-      //   background-color: red;
       display: flex;
       justify-content: left;
       align-items: center;
+      .minusDisable {
+        font-size: 30px;
+        color: #658845;
+        padding: 0px 10px;
+      }
 
-      span {
+      .plusMinus {
         font-size: 30px;
         color: #56a514;
         cursor: pointer;
@@ -81,7 +113,7 @@
   p:nth-child(1) {
     font-size: 18px;
     font-family: "Poppin-SemiBold";
-}
+  }
   p:nth-child(2) {
     font-size: 18px;
     font-family: "Poppin-SemiBold";
@@ -102,3 +134,14 @@
     background-color: #3c750e;
   }
 }
+
+.submitBtnDisable {
+  width: 100%;
+  background-color: #79a853;
+  outline: none;
+  border: none;
+  padding: 8px 0px;
+  margin-top: 10px;
+  color: white;
+  font-size: 16px;
+}

src/Components/Footer/Footer.js

@@ -2,7 +2,6 @@ import React from "react";
 import style from "./Footer.module.scss";
 import { Container, Row, Col } from "react-bootstrap";
 import { AiOutlineCaretRight } from "react-icons/ai";
-import { HiOutlineMail } from "react-icons/hi";
 import { FaArrowRight, FaHome, FaEnvelope,FaPhoneAlt, FaMapMarkerAlt } from "react-icons/fa";
 import playStoreImg from "../../assets/images/playstore.png"
 import appStoreImg from "../../assets/images/app_store.png"

src/Components/Footer/Footer.module.scss

@@ -28,18 +28,19 @@ $main_green: #56a514;
     }
   }
 
-  .firstContainer, .secondContainer, .thirdContainer, .fourthContainer {
+  .firstContainer,
+  .secondContainer,
+  .thirdContainer,
+  .fourthContainer {
     padding-top: 40px;
     padding-bottom: 20px;
   }
 
   .fourthContainer {
-      img {
-          cursor: pointer;
-          width: 90%;
-          height: 85px;
-        //   background-color: rebeccapurple;
-
-      }
+    img {
+      cursor: pointer;
+      width: 90%;
+      height: 85px;
+    }
   }
 }

src/Components/Navbar/Navbar.js

@@ -10,7 +10,7 @@ import { useSelector } from "react-redux";
 const { Search } = Input;
 
 const MainNavbar = ({ setVisible }) => {
-  const { item } = useSelector((state) => state.cart);
+  const { cart } = useSelector((state) => state.cart);
 
   return (
     <>
@@ -53,7 +53,7 @@ const MainNavbar = ({ setVisible }) => {
                       onClick={() => setVisible(true)}
                     >
                       <IoCartOutline className={style.cartIcon} />
-                      <p className={style.cartCount}>{item.length}</p>
+                      <p className={style.cartCount}>{Object.values(cart).length}</p>
                     </div>
                   </Nav.Link>
                 </Nav>

src/Screens/Home/Home.js

@@ -13,23 +13,45 @@ import Footer from "../../Components/Footer/Footer";
 import { useDispatch, useSelector } from "react-redux";
 
 import MainDrawer from "../../Components/Drawer/Drawer";
-import NotificationBox from "../../Components/NotificationBox/NotificationBox";
 import { notification } from "antd";
 
 const Home = () => {
   const dispatch = useDispatch();
-  const count = useSelector((state) => state.cart.item);
+  const {cart} = useSelector((state) => state.cart);
 
   const [visible, setVisible] = useState(false);
 
-  const openNotification = () => {
-    notification.success({
-      message: "HUM MART",
-      description: " Item Added in to Cart Successfully",
-      className: "custom-class",
-      placement: "bottomLeft",
-      duration: 2.5,
-    });
+  console.log(cart)
+
+  const openNotification = (item, behaviour) => {
+    if (behaviour === "success") {
+      console.log(item);
+      notification.success({
+        message: "HUM MART",
+        description: `${item}`,
+        className: "custom-class",
+        placement: "bottomLeft",
+        duration: 2.5,
+      });
+    } else if (behaviour === "warning") {
+      console.log(item);
+      notification.warning({
+        message: "HUM MART",
+        description: `${item}`,
+        className: "custom-class",
+        placement: "bottomLeft",
+        duration: 2.5,
+      });
+    } else if (behaviour === "error") {
+      console.log(item);
+      notification.error({
+        message: "HUM MART",
+        description: `${item}`,
+        className: "custom-class",
+        placement: "bottomLeft",
+        duration: 2.5,
+      });
+    }
   };
 
   // console.log(count);
@@ -77,11 +99,11 @@ const Home = () => {
                         md={4}
                         sm={12}
                         className={style.cardCol}
-                        // onClick={() => {
-                        //   openNotification();
-                        // }}
                       >
-                        <MainCard data={item} openNotification={openNotification} />
+                        <MainCard
+                          data={item}
+                          openNotification={openNotification}
+                        />
                       </Col>
                     );
                   })}

src/Screens/Home/Home.module.scss

-
 .carouselContainer {
   margin-top: 30px;
   margin-bottom: 30px;
@@ -17,59 +16,55 @@
   }
 }
 
-.thirdContainer{
-    margin-top: 20px;
-    padding-top: 20px;
-    background-color: rgb(243, 243, 243);
-    margin-bottom: 100px;
+.thirdContainer {
+  margin-top: 20px;
+  padding-top: 20px;
+  background-color: rgb(243, 243, 243);
+  margin-bottom: 100px;
 
-    .thirdContainerHeading{
-        border-bottom: 1px solid rgb(154, 154, 154);
-        h2{
-            font-family: "Poppin-Medium";
-        }
-    }
-    .cardCol {
-        margin: 40px 0px;
+  .thirdContainerHeading {
+    border-bottom: 1px solid rgb(154, 154, 154);
+    h2 {
+      font-family: "Poppin-Medium";
     }
+  }
+  .cardCol {
+    margin: 40px 0px;
+  }
 }
 
-.fourthContainer{
-    // margin-top: 120px;
-    padding-top: 20px;
-    background-color: rgb(243, 243, 243);
-    .fourthContainerHeading{
-        border-bottom: 1px solid rgb(154, 154, 154);
-        h2{
-            font-family: "Poppin-Medium";
-        }
-    }
-    .categoriesCardContainer{
-        margin-top: 20px;
-        margin-bottom: 20px;
+.fourthContainer {
+  padding-top: 20px;
+  background-color: rgb(243, 243, 243);
+  .fourthContainerHeading {
+    border-bottom: 1px solid rgb(154, 154, 154);
+    h2 {
+      font-family: "Poppin-Medium";
     }
+  }
+  .categoriesCardContainer {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
 }
 
-.fifthContainer{
+.fifthContainer {
   margin-top: 50px !important;
-  h3{
+  h3 {
     font-family: "Poppin-Medium";
   }
   p {
     font-family: "Poppin-Regular";
-    text-align:justify
+    text-align: justify;
   }
 }
 
-.footerDiv{
+.footerDiv {
   margin-top: 30px !important;
-
-  // border: 1px solid black;
 }
 
 @media only screen and (max-width: 1200px) {
   .carouselContainer {
-    // background-color: red;
     .leftImages {
       display: flex;
       flex-direction: row;

src/store/Reducers/cartReducer.js

@@ -3,16 +3,85 @@ import { createSlice } from "@reduxjs/toolkit";
 export const cartSlice = createSlice({
   name: "cart",
   initialState: {
+    cart: {},
     item: [],
+    total: 0,
   },
   reducers: {
     addCart(state, action) {
-      console.log(action);
-      state.item.push(action.payload.data);
-      action.payload.openNotification()
+      const data = action.payload.data;
+      // const findItem = state.item.find(
+      //   (item) => item.id === action.payload.data.id
+      // );
+      // console.log(findItem);
+      // if (findItem === undefined) {
+      //   state.item.push(action.payload.data);
+      //   action.payload.openNotification(
+      //     "Item Added in to Cart Successfully",
+      //     "success"
+      //   );
+      //   state.total += action.payload.data.price;
+      // } else {
+      //   action.payload.openNotification("This Item Already Exist", "warning");
+      // }
+      if (state.cart[data.id]) {
+        state.cart[data.id].counting++;
+        console.log("first Add", state.cart[data.id].counting);
+        action.payload.openNotification(
+          "Your Product Quantity Increase",
+          "warning"
+        );
+        state.total += action.payload.data.price;
+      } else {
+        state.cart[data.id] = {
+          counting: 1,
+          data: data,
+        };
+        action.payload.openNotification(
+          "Item Added in to Cart Successfully",
+          "success"
+        );
+        state.total += action.payload.data.price;
+        console.log("Not Add");
+      }
+    },
+    removeItem(state, action) {
+      // console.log(action);
+      // console.log(state.item);
+      // const newItem = state.item.filter(
+      //   (item) => item.id !== action.payload.item.id
+      // );
+      // state.total = state.total - action.payload.item.price;
+      // action.payload.openNotification();
+      // console.log(newItem);
+      // state.item = newItem;
+
+      // const newItem = state.cart.filter(
+      //   (item) => item?.data?.id !== action.payload.item?.data?.id
+      // );
+      // state.total = state.total - action.payload.item?.data?.price;
+      // action.payload.openNotification();
+      // console.log(newItem);
+      // state.item = newItem;
+
+      // state.cart[action.payload?.item] =
+
+      delete state.cart[action.payload.item.data.id];
+      state.total =
+        state.total -
+        action.payload?.item?.data?.price * action.payload?.item?.counting;
+    },
+    increaseQuantity(state, action) {
+      state.cart[action.payload?.data?.id].counting++;
+      state.total += action.payload.data.price;
+    },
+    decreaseQuantity(state, action) {
+      state.cart[action.payload?.data?.id].counting--;
+      state.total = state.total - action.payload.data.price;
     },
   },
 });
 // each case under reducers becomes an action
-export const { addCart } = cartSlice.actions;
+export const { addCart, removeItem, increaseQuantity, decreaseQuantity } =
+  cartSlice.actions;
 export default cartSlice.reducer;