Skip to content

H
hummartapp
Commit 13f4b693 authored by Muhammad Ameen's avatar Muhammad Ameen 💻
Browse files
Options

cart Functionality complete

parent c97e53c2
Hide whitespace changes
Inline Side-by-side
Showing with 311 additions and 112 deletions
.vscode/launch.json 0 → 100644
View file @ 13f4b693
{
// 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
View file @ 13f4b693
......@@ -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
View file @ 13f4b693
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
View file @ 13f4b693
......@@ -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
View file @ 13f4b693
......@@ -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
View file @ 13f4b693
......@@ -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
View file @ 13f4b693
......@@ -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
View file @ 13f4b693
......@@ -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
View file @ 13f4b693
.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
View file @ 13f4b693
......@@ -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;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment