Skip to content

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

50% complete cart functionality

parent 3b6bf2d2
Show whitespace changes
Inline Side-by-side
Showing with 293 additions and 27 deletions
package-lock.json
View file @ c97e53c2
......@@ -21,6 +21,7 @@
"react-redux": "^8.0.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-toastify": "^8.1.0",
"redux-thunk": "^2.4.1",
"sass": "^1.51.0",
"web-vitals": "^2.1.4"
......@@ -5445,6 +5446,14 @@
"wrap-ansi": "^7.0.0"
}
},
"node_modules/clsx": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
"engines": {
"node": ">=6"
}
},
"node_modules/co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
......@@ -14589,6 +14598,18 @@
}
}
},
"node_modules/react-toastify": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.1.0.tgz",
"integrity": "sha512-M+Q3rTmEw/53Csr7NsV/YnldJe4c7uERcY7Tma9mvLU98QT2VhIkKwjBzzxZkJRk/oBKyUAtkyMjMgO00hx6gQ==",
"dependencies": {
"clsx": "^1.1.1"
},
"peerDependencies": {
"react": ">=16",
"react-dom": ">=16"
}
},
"node_modules/react-transition-group": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
......@@ -21287,6 +21308,11 @@
"wrap-ansi": "^7.0.0"
}
},
"clsx": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
},
"co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
......@@ -27748,6 +27774,14 @@
"workbox-webpack-plugin": "^6.4.1"
}
},
"react-toastify": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-8.1.0.tgz",
"integrity": "sha512-M+Q3rTmEw/53Csr7NsV/YnldJe4c7uERcY7Tma9mvLU98QT2VhIkKwjBzzxZkJRk/oBKyUAtkyMjMgO00hx6gQ==",
"requires": {
"clsx": "^1.1.1"
}
},
"react-transition-group": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
package.json
View file @ c97e53c2
......@@ -16,6 +16,7 @@
"react-redux": "^8.0.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-toastify": "^8.1.0",
"redux-thunk": "^2.4.1",
"sass": "^1.51.0",
"web-vitals": "^2.1.4"
......
src/App.js
View file @ c97e53c2
......@@ -9,7 +9,7 @@ function App() {
return (
<>
<Routes>
<Route path="/" element={<Home/>} />
<Route path="/" element={<Home />} />
</Routes>
</>
);
......
src/Components/Card.js/Card.js
View file @ c97e53c2
import React from "react";
import { Card } from "antd";
import style from "./Card.module.scss"
import style from "./Card.module.scss";
import { addCart } from "../../store/Reducers/cartReducer";
import { useDispatch } from "react-redux";
const { Meta } = Card;
const MainCard = ({ data }) => {
const MainCard = ({ data, openNotification }) => {
const dispatch = useDispatch();
const firstLatter = data?.title?.charAt(0)?.toUpperCase();
return (
<div>
<Card
// hoverable
// style={{ width: 240, height: "500px" }}
cover={<img alt="example" src={data?.image} style={{height: 280}} />}
cover={<img alt="example" src={data?.image} style={{ height: 280 }} />}
>
<Meta
title={firstLatter + data?.title?.substring(1)}
// description={data?.price}
/>
<Meta title={firstLatter + data?.title?.substring(1)} />
<div className={style.priceAndButton}>
<p>RS: {data?.price}</p>
<button>Add To Cart</button>
<button onClick={() => dispatch(addCart({data, openNotification}))}>Add To Cart</button>
</div>
</Card>
</div>
......
src/Components/Drawer/Drawer.js 0 → 100644
View file @ c97e53c2
import React, { useState } from "react";
import { Drawer, Button, Space, Radio } from "antd";
import { useSelector } from "react-redux";
import style from "./Drawer.module.scss";
import mobileImg from "../../assets/images/infinix.jpeg";
import { AiFillPlusCircle, AiFillMinusCircle } from "react-icons/ai";
const MainDrawer = ({ visible, setVisible }) => {
const { item } = useSelector((state) => state.cart);
console.log(item);
const showDrawer = () => {
setVisible(true);
};
const onClose = () => {
setVisible(false);
};
console.log(window.innerWidth);
// window.innerWidth
return (
<>
<Drawer
title="Check Out"
placement="right"
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>
</div>
</div>
</div>
</>
);
})}
<div className={style.subTotalContainer}>
<p>Sub Total:</p>
<p>RS: 1200</p>
</div>
<button className={style.submitBtn}>Submit</button>
</Drawer>
</>
);
};
export default MainDrawer;
src/Components/Drawer/Drawer.module.scss 0 → 100644
View file @ c97e53c2
// .mainContainer {
// width: 100%;
// display: flex;
// justify-content: center;
// background-color: orange;
// .innerMainContainer{
// width: 90%;
// height: 140px;
// background-color: red;
// }
// }
.mainContainer {
width: 100%;
min-height: 150px;
// height: 100%;
background-color: white;
margin-top: 15px;
margin-bottom: 15px;
display: flex;
align-items: center;
border: 1px solid black;
.imageContainer {
width: 30%;
height: 80%;
object-fit: contain;
margin-left: 20px;
margin-right: 20px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.rightContainer {
margin-left: 0px;
margin-right: 20px;
width: 70%;
p {
margin: 2px;
}
p:nth-child(1) {
font-family: "Poppin-Medium";
}
.productPrice {
font-family: "Poppin-SemiBold";
}
.countingDiv {
// background-color: red;
display: flex;
justify-content: left;
align-items: center;
span {
font-size: 30px;
color: #56a514;
cursor: pointer;
padding: 0px 10px;
&:hover {
color: #3c750e;
}
}
p {
font-size: 22px;
margin: 0px;
}
}
}
}
.subTotalContainer {
display: flex;
justify-content: space-between;
align-items: center;
p {
margin: 0px;
}
p:nth-child(1) {
font-size: 18px;
font-family: "Poppin-SemiBold";
}
p:nth-child(2) {
font-size: 18px;
font-family: "Poppin-SemiBold";
letter-spacing: 0.2px;
}
}
.submitBtn {
width: 100%;
background-color: #56a514;
outline: none;
border: none;
padding: 8px 0px;
margin-top: 10px;
color: white;
font-size: 16px;
&:hover {
background-color: #3c750e;
}
}
src/Components/Navbar/Navbar.js
View file @ c97e53c2
......@@ -5,10 +5,13 @@ import logo from "../../assets/images/logo.png";
import { Input } from "antd";
import { IoCartOutline } from "react-icons/io5";
import { headerData } from "../../Helper/dummyData";
import { useSelector } from "react-redux";
const { Search } = Input;
const MainNavbar = () => {
const MainNavbar = ({ setVisible }) => {
const { item } = useSelector((state) => state.cart);
return (
<>
<div className={style.mainCOntainer}>
......@@ -44,10 +47,13 @@ const MainNavbar = () => {
<Nav.Link href="#pricing">Pricing</Nav.Link> */}
</Nav>
<Nav>
<Nav.Link href="#deets">
<div className={style.cartContianer}>
<Nav.Link>
<div
className={style.cartContianer}
onClick={() => setVisible(true)}
>
<IoCartOutline className={style.cartIcon} />
<p className={style.cartCount}>0</p>
<p className={style.cartCount}>{item.length}</p>
</div>
</Nav.Link>
</Nav>
......@@ -64,7 +70,9 @@ const MainNavbar = () => {
<a
href={item?.link}
className={
headerData?.length - 1 !== index ? style.borderRight : ""
headerData?.length - 1 !== index
? style.borderRight
: ""
}
>
{item?.link}
......
src/Components/NotificationBox/NotificationBox.js 0 → 100644
View file @ c97e53c2
import React from "react"
import { Button, notification } from 'antd';
const Context = React.createContext({ name: 'Default' });
const NotificationBox = () => {
const [api, contextHolder] = notification.useNotification();
const openNotification = placement => {
api.info({
message: `Notification ${placement}`,
description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
placement,
});
};
return (
<Context.Provider value={{ name: 'Ant Design' }}>
{contextHolder}
<Button type="danger" onClick={() => openNotification('bottomLeft')}>
bottomLeft
</Button>
</Context.Provider>
);
};
export default NotificationBox;
\ No newline at end of file
src/Screens/Home/Home.js
View file @ c97e53c2
import React from "react";
import React, { useState } from "react";
import MainNavbar from "../../Components/Navbar/Navbar";
import MainCarousel from "../../Components/Carousel/Carousel";
import style from "./Home.module.scss";
......@@ -11,13 +11,28 @@ import CategoriesCard from "../../Components/Card.js/CategoriesCard";
import { cardData, categoriesCardData } from "../../Helper/dummyData";
import Footer from "../../Components/Footer/Footer";
import { useDispatch, useSelector } from "react-redux";
import { addCart } from "../../store/Reducers/cartReducer";
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);
console.log(count);
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(count);
return (
<>
......@@ -25,7 +40,7 @@ const Home = () => {
<Container fluid className="p-0">
<Row>
<div>
<MainNavbar />
<MainNavbar setVisible={setVisible} />
</div>
<div>
<Container className={style.carouselContainer}>
......@@ -62,9 +77,11 @@ const Home = () => {
md={4}
sm={12}
className={style.cardCol}
onClick={() => dispatch(addCart(item))}
// onClick={() => {
// openNotification();
// }}
>
<MainCard data={item} />
<MainCard data={item} openNotification={openNotification} />
</Col>
);
})}
......@@ -126,6 +143,7 @@ const Home = () => {
</div>
</Row>
</Container>
<MainDrawer visible={visible} setVisible={setVisible} />
</section>
</>
);
......
src/Screens/Home/Home.module.scss
View file @ c97e53c2
......@@ -18,7 +18,7 @@
}
.thirdContainer{
margin-top: 120px;
margin-top: 20px;
padding-top: 20px;
background-color: rgb(243, 243, 243);
margin-bottom: 100px;
......
src/index.js
View file @ c97e53c2
......@@ -6,7 +6,7 @@ import "bootstrap/dist/css/bootstrap.min.css";
import { Provider } from "react-redux";
import store from "./store/store";
import { BrowserRouter } from "react-router-dom";
import 'antd/dist/antd.css';
import "antd/dist/antd.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
......
src/store/Reducers/cartReducer.js
View file @ c97e53c2
......@@ -8,7 +8,8 @@ export const cartSlice = createSlice({
reducers: {
addCart(state, action) {
console.log(action);
state.item.push(action.payload);
state.item.push(action.payload.data);
action.payload.openNotification()
},
},
});
......
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