Skip to content

Commit c999c17

Browse files
author
WebDeveloperGuide
committed
Cart Design and Cart Actions added
1 parent 7281934 commit c999c17

File tree

8 files changed

+125
-50
lines changed

8 files changed

+125
-50
lines changed

‎web_panel/src/components/Cart.js

Lines changed: 16 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,32 @@
1-
import React from 'react';
1+
import React, {useState} from 'react';
2+
import {useSelector,useDispatch} from 'react-redux';
3+
import CartProduct from './CartProduct';
4+
import CartTotal from './CartTotal';
5+
import {showCart} from '../redux/actions/cartActions';
26

37
const Cart = () => {
8+
const showCartStatus = useSelector((state)=> state.cart.showCart);
9+
const dispatch = useDispatch();
10+
const closeCart = () => {
11+
dispatch(showCart(false))
12+
}
13+
414
return(
515
<>
6-
<div className="cart-overlay">
16+
<div className= { 'cart-overlay' + (showCartStatus ? ' show' : '')}>
717
<aside className="cart">
8-
<button className="cart-close">
18+
<button className="cart-close" onClick={closeCart}>
919
<i className="fas fa-times" />
1020
</button>
1121
<header>
1222
<h3 className="text-slanted">your bag</h3>
1323
</header>
1424
{/* cart items */}
1525
<div className="cart-items">
16-
{/* single cart item */}
17-
<article className="cart-item">
18-
<img src="https://dl.airtable.com/.attachments/14ac9e946e1a02eb9ce7d632c83f742f/4fd98e64/product-1.jpeg" className="cart-item-img" alt="product" />
19-
<div className="cart-item-info">
20-
<h5 className="cart-item-name">high-back bench</h5>
21-
<span className="cart-item-price">$19.99</span>
22-
<button className="cart-item-remove-btn">remove</button>
23-
</div>
24-
<div>
25-
<button className="cart-item-increase-btn">
26-
<i className="fas fa-chevron-up" />
27-
</button>
28-
<span className="cart-item-amount">1</span>
29-
<button className="cart-item-decrease-btn">
30-
<i className="fas fa-chevron-down" />
31-
</button>
32-
</div>
33-
</article>
34-
{/* end of single cart item */}
35-
{/* single cart item */}
36-
<article className="cart-item">
37-
<img src="https://dl.airtable.com/.attachments/da5e17fd71f50578d525dd5f596e407e/d5e88ac8/product-2.jpg" className="cart-item-img" alt="product" />
38-
<div className="cart-item-info">
39-
<h5 className="cart-item-name">product</h5>
40-
<span className="cart-item-price">$19.99</span>
41-
<button className="cart-item-remove-btn">remove</button>
42-
</div>
43-
<div>
44-
<button className="cart-item-increase-btn">
45-
<i className="fas fa-chevron-up" />
46-
</button>
47-
<span className="cart-item-amount">1</span>
48-
<button className="cart-item-decrease-btn">
49-
<i className="fas fa-chevron-down" />
50-
</button>
51-
</div>
52-
</article>
53-
{/* end of single cart item */}
26+
<CartProduct/>
27+
<CartProduct/>
5428
</div>
55-
{/* footer */}
56-
<footer>
57-
<h3 className="cart-total text-slanted">total : $12.99</h3>
58-
<button className="cart-checkout btn">checkout</button>
59-
</footer>
29+
<CartTotal/>
6030
</aside>
6131
</div>
6232
</>

‎web_panel/src/components/CartProduct.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
3+
const CartProduct = () => {
4+
return(
5+
<>
6+
<article className="cart-item">
7+
<img src="https://dl.airtable.com/.attachments/14ac9e946e1a02eb9ce7d632c83f742f/4fd98e64/product-1.jpeg" className="cart-item-img" alt="product" />
8+
<div className="cart-item-info">
9+
<h5 className="cart-item-name">high-back bench</h5>
10+
<span className="cart-item-price">$19.99</span>
11+
<button className="cart-item-remove-btn">remove</button>
12+
</div>
13+
<div>
14+
<button className="cart-item-increase-btn">
15+
<i className="fas fa-chevron-up" />
16+
</button>
17+
<span className="cart-item-amount">1</span>
18+
<button className="cart-item-decrease-btn">
19+
<i className="fas fa-chevron-down" />
20+
</button>
21+
</div>
22+
</article>
23+
</>
24+
)
25+
}
26+
27+
export default CartProduct;

‎web_panel/src/components/CartTotal.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
3+
const CartTotal = () => {
4+
return(
5+
<>
6+
<footer>
7+
<h3 className="cart-total text-slanted">total : $12.99</h3>
8+
<button className="cart-checkout btn">checkout</button>
9+
</footer>
10+
</>
11+
)
12+
}
13+
14+
export default CartTotal;

‎web_panel/src/components/Navbar.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import React, {useEffect,useState} from 'react';
2+
import {useDispatch, useSelector} from 'react-redux';
23
import {Link} from 'react-router-dom';
34
import logo from '../images/logo.svg';
5+
import {showCart} from '../redux/actions/cartActions';
6+
47

58
const NavBar = () => {
9+
const dispatch = useDispatch();
10+
const showCartStatus = useSelector((state)=> state.cart.showCart);
611

7-
const [isCartOpen,setIsCartOpen] = useState(false);
812
const toggleCart = () => {
9-
setIsCartOpen(true);
13+
dispatch(showCart(!showCartStatus))
1014
}
1115

1216
useEffect(() => {

‎web_panel/src/redux/actions/cartActions.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { ActionTypes } from '../constants';
2+
import axios from 'axios';
3+
import { toast } from "react-toastify";
4+
import {ToastObjects} from "../../util/toastObject";
5+
6+
export const showCart = (cartStatus) => async(dispatch) =>{
7+
try{
8+
9+
dispatch({ type: ActionTypes.CART_STATUS, payload: cartStatus });
10+
11+
} catch (error){
12+
13+
const message =
14+
error.response && error.response.data.message
15+
? error.response.data.message
16+
: error.message;
17+
18+
toast.error(message, ToastObjects);
19+
}
20+
}
21+
22+
23+
export const setProductDetail = (id) => async(dispatch) =>{
24+
try{
25+
const response = await axios.get(`https://dummyjson.com/products/${id}`);
26+
console.log(response)
27+
dispatch({ type: ActionTypes.SET_PRODUCT_DETAIL, payload: response.data });
28+
29+
} catch (error){
30+
31+
const message =
32+
error.response && error.response.data.message
33+
? error.response.data.message
34+
: error.message;
35+
36+
toast.error(message, ToastObjects);
37+
}
38+
}
39+
40+
export const resetProductDetail = () => async(dispatch) =>{
41+
dispatch({ type: ActionTypes.RESET_PRODUCT_DETAIL});
42+
}

‎web_panel/src/redux/constants/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export const ActionTypes = {
22
FETCH_PRODUCTS:"FETCH_PRODUCTS",
33
SET_PRODUCT_DETAIL:"SET_PRODUCT_DETAIL",
4-
RESET_PRODUCT_DETAIL:"RESET_PRODUCT_DETAIL"
4+
RESET_PRODUCT_DETAIL:"RESET_PRODUCT_DETAIL",
5+
CART_STATUS:"CART_STATUS"
56
}

‎web_panel/src/redux/reducers/cartReducer.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ActionTypes } from '../constants';
2+
3+
const initialState = {
4+
cartProducts:[],
5+
showCart:false
6+
}
7+
8+
export const cartReducer = (state = initialState,{type,payload}) => {
9+
switch(type){
10+
case ActionTypes.CART_STATUS:
11+
return {...state,showCart:payload};
12+
default:
13+
return state;
14+
}
15+
}

‎web_panel/src/redux/reducers/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { combineReducers } from "redux";
22
import {productReducer} from './productReducer';
3+
import {cartReducer} from './cartReducer';
34

45
const reducers = combineReducers({
5-
allProducts:productReducer
6+
allProducts:productReducer,
7+
cart:cartReducer
68
});
79

810
export default reducers;

0 commit comments

Comments
 (0)