Skip to content

Commit 7aee43a

Browse files
snehalgadgesnehalgadge
committed
store created
1 parent 09025ba commit 7aee43a

File tree

6 files changed

+143
-13
lines changed

6 files changed

+143
-13
lines changed

‎04_REACT/ecommerce-app/package-lock.json‎

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎04_REACT/ecommerce-app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"react-router-dom": "^6.14.1",
2222
"react-scripts": "5.0.1",
2323
"react-slick": "^0.29.0",
24+
"redux-persist": "^6.0.0",
2425
"slick-carousel": "^1.8.1",
2526
"swiper": "^10.0.3",
2627
"uuid": "^9.0.0",

‎04_REACT/ecommerce-app/src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import{
55
Outlet,
66
Route,
77
RouterProvider,
8+
ScrollRestoration,
89
} from "react-router-dom"
910
import Header from './components/Header/Header'
1011
import Footer from './components/Footer/Footer'
@@ -18,6 +19,7 @@ const Layout =() =>{
1819
return(
1920
<div className='bg-gray-100'>
2021
<Header />
22+
<ScrollRestoration />
2123
<Outlet />
2224
<Footer />
2325
</div>

‎04_REACT/ecommerce-app/src/pages/Cart.js‎

Lines changed: 76 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
1-
import React from 'react'
2-
import { useSelector } from 'react-redux'
1+
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
2+
import React, {useEffect, useState} from 'react'
3+
import { useDispatch, useSelector } from 'react-redux'
4+
import { deleteItem, resetCart, decrementQuantity, incrementQuantity} from '../redux/amazonSlice'
35

46
const Cart = () => {
7+
const dispatch = useDispatch();
58
const products = useSelector((state) => state.amazonReducer.products)
9+
const [totalPrice, setTotalPrice] = useState("")
10+
11+
useEffect(() =>{
12+
let Total = 0;
13+
products.map((item)=>{
14+
Total += item.price * item.quantity;
15+
return setTotalPrice(Total.toFixed(2))
16+
})
17+
},[products])
618
return (
719
<div className='w-full bg-gray-100 p-4'>
820
<div className='container mx-auto h-96 grid grid-cols-5 gap-8'>
@@ -17,19 +29,76 @@ const Cart = () => {
1729
{
1830
products.map((item)=>(
1931
<div className='w-full border-b-[1px] border-b-gray-300 p-4 flex
20-
items-center gap-6' >
21-
<div>
32+
items-center gap-6'>
33+
<div className='w-full flex items-center gap-6'>
34+
<div key={item.id}
35+
className='w-1/5'>
2236
<img
2337
src={item.image}
2438
className='w-full h-44 object-contain'
2539
alt='ProductsImgs'/>
2640
</div>
41+
<div className='w-3/5'>
42+
<h2 className='font-semibold text-lg'>{item.title}</h2>
43+
<p className='text-sm'>{item.description.subString(0,100)}</p>
44+
<p className='text-base'>Unit Price
45+
<span className='font-semibold'>
46+
${item.price}
47+
</span></p>
48+
<div className='bg-[#F0F2F2] flex justify-center items-center gap-1 w-24
49+
py-1 text-center drop-shadow-lg rounded-md'>
50+
<p>Qty:</p>
51+
<p onClick={()=>dispatch(decrementQuantity(item.id))}
52+
className='cursor-pointer bg-gray-200 px-1 rounded-md
53+
hover:bg-gray-300'>
54+
-
55+
</p>
56+
<p>{item.quantity}</p>
57+
<p onClick={()=>dispatch(incrementQuantity(item.id))}
58+
className='cursor-pointer bg-gray-200 px-1 rounded-md
59+
hover:bg-gray-300'>
60+
+
61+
</p>
62+
</div>
63+
<button onClick={() => dispatch(deleteItem(item.id))}
64+
className='bg-red-500 w-36 py-1 rounded-lg
65+
text-white mt-2 hover:bg-red-700
66+
active:bg-red-900 duration-300'>
67+
Delete Item
68+
</button>
69+
</div>
70+
<div>
71+
<p className='text-lg font-bodyFont font-semibold'>
72+
${item.price * item.quantity}
73+
</p>
74+
</div>
75+
</div>
2776
</div>
28-
))
29-
}
77+
))}
78+
</div>
79+
<div className='w-ful py-2'>
80+
<button onclick={() =>dispatch(resetCart())} className='bg-red-500 w-36 py-2 rounded-lg text-white mt-2
81+
hover:bg-red-700 active:bg-red-900 duration-300'>Clear Cart</button>
82+
</div>
83+
</div>
84+
<div className='w-full h-52 bg-white col-span-1 flex items-center p-4'>
85+
<div>
86+
<p className='flex gap-2 items-start text-sm'>
87+
<span>
88+
<CheckCircleIcon className='bg-white text-green-500 rounded-full'/>
89+
</span>{" "}
90+
Your order qualifies for FREE Shipping Choose this option at checkout. See details....
91+
</p>
92+
</div>
93+
<div>
94+
<p className='font-semibold px-10 py-1 flex flex-col gap-2 items-cente justify-center'>
95+
Total: <span className='text-lg font-bold'>${totalPrice}</span></p>
3096
</div>
97+
<button className='w-full font-medium text-base bg-gradient-to-tr
98+
from-yellow-400 to yellow-500 border hover:from-yellow-300 hover:to-yellow-600
99+
active:from-yellow-400 active:to-yellow-500 duration-200 py-1.5 rounded-md
100+
mt-3'>Proceed to Pay</button>
31101
</div>
32-
<div className='w-full h-full bg-white col-span-1'></div>
33102
</div>
34103
</div>
35104
)

‎04_REACT/ecommerce-app/src/redux/amazonSlice.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,28 @@ export const amazonSlice = createSlice({
1616
}else{
1717
state.products.push(action.payload)
1818
}
19-
}
19+
},
20+
incrementQuantity:(state,action)=>{
21+
const item = state.products.find((item) => item.id === action.payload)
22+
item.quantity++
23+
},
24+
decrementQuantity:(state,action)=>{
25+
const item = state.products.find((item) => item.id === action.payload)
26+
if(item.quantity <= 1) {
27+
item.quantity = 1
28+
}else{
29+
item.quantity--
30+
}
31+
},
32+
deleteItem:(state,action) =>{
33+
state.products = state.products.filter((item) =>item.id!== action.payload)
34+
},
35+
resetCart:(state) =>{
36+
state.products = []
37+
},
2038
}
2139
})
2240

23-
export const{ addToCart } = amazonSlice.actions;
41+
export const{ addToCart, deleteItem, resetCart, incrementQuantity, decrementQuantity }
42+
= amazonSlice.actions;
2443
export default amazonSlice.reducer;

‎04_REACT/ecommerce-app/src/redux/store.js‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,34 @@
11
import { configureStore } from '@reduxjs/toolkit';
22
import amazonReducer from "../redux/amazonSlice"
33

4+
import {
5+
persistStore,
6+
persistReducer,
7+
FLUSH,
8+
REHYDRATE,
9+
PAUSE,
10+
PERSIST,
11+
PURGE,
12+
REGISTER,
13+
} from 'redux-persist'
14+
import storage from 'redux-persist/lib/storage'
15+
16+
const persistConfig = {
17+
key: 'root',
18+
version: 1,
19+
storage,
20+
}
21+
22+
const persistedReducer = persistReducer(persistConfig)
23+
424
export const store = configureStore({
5-
reducer: {
6-
amazonReducer
7-
},
25+
reducer: persistedReducer,
26+
middleware: (getDefaultMiddleware) =>
27+
getDefaultMiddleware({
28+
serializableCheck: {
29+
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
30+
},
31+
}),
832
});
933

10-
export default store
34+
export let persistor = persistStore(store)

0 commit comments

Comments
 (0)