Skip to content

Commit

Permalink
cart page
Browse files Browse the repository at this point in the history
  • Loading branch information
@varun2696
varun2696 committed Apr 2, 2023
1 parent b6da7f2 commit ff2a9e7
Show file tree
Hide file tree
Showing 7 changed files with 73 additions and 99 deletions.
4 changes: 2 additions & 2 deletions pharmeasy/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="https://assets.pharmeasy.in/apothecary/images/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
Expand All @@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>HappyPharmEasy</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
40 changes: 35 additions & 5 deletions pharmeasy/src/Pages/ProductPage/Products.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ export const Products = () => {
return store.prodReducer
});

const [storeData, setStoreData] = useState(products)
const [sort, setSort] = useState([])
const [update, setUpdate] = useState(false);
const { state, _ } = useContext(ProductContext)
const [category, setCategory] = useState('');

Expand All @@ -47,13 +50,40 @@ export const Products = () => {
else if (state === "covidKits") setCategory('Health Condition');

if (state) {
dispatch(getProducts(state))
dispatch(getProducts(state)).then(()=>{
setStoreData(products)
})
}
else {
setCategory('Health Care');
dispatch(getProducts('health-care'))
dispatch(getProducts('health-care')).then(()=>{
setStoreData(products)
})
}
}, [])
}, [state])

useEffect(() => {
setStoreData(sort)
}, [update]);


const handleSortByPrice = (e) => {
const { value } = e.target;
setUpdate(!update);
if (value === "asc") {
let asc = storeData.sort((a, b) => {
return a.salePrice - b.salePrice;
});
setSort(asc);
}
else if (value === "des") {
let des = storeData.sort((a, b) => {
return b.salePrice - a.salePrice;
});
setSort(des);
}
};



return (
Expand Down Expand Up @@ -129,7 +159,7 @@ export const Products = () => {
</Heading>
<HStack gap='10px'>
<Text w='60px' fontSize={'14px'}>Sort By :</Text>
<Select w='180px' h='30px'>
<Select w='180px' h='30px' onChange={handleSortByPrice}>
<option value="">Select</option>
<option value="asc">Price Low to High</option>
<option value="des">Price High to Low</option>
Expand All @@ -138,7 +168,7 @@ export const Products = () => {
</HStack>

<Grid templateColumns='repeat(3, 1fr)' gap={6}>
{products?.map((el) => (
{storeData?.map((el) => (
<ProductCard key={el.id} alt={el.id}
{...el} />
))}
Expand Down
75 changes: 35 additions & 40 deletions pharmeasy/src/Pages/SingleProdPage/SingleProductPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,50 +6,45 @@ import { FaRegStar, FaShareAlt, FaStar } from "react-icons/fa";
import { TiStarHalfOutline } from "react-icons/ti";
import { BiChevronRight } from "react-icons/bi";
import { SimilarProductSlider } from './SimilarProductSlider';
import { useDispatch, useSelector } from 'react-redux';
import { postCartProduct } from '../../Redux/cartReducer/cartAction';
import { useSelector } from 'react-redux';

// const initState = {
// image_src: '',
// productName: '',
// salePrice: +(''),
// MRP: '',
// discountPercent: '',
// id: +('')
// }
const cartItem = localStorage.getItem('cartItems') || [];

export const SingleProductPage = () => {

const dispatch = useDispatch();
const [cartItems, setCartItems] = useState([]);
const { id } = useParams()
const [cartData, setCartData] = useState('')
const [cartData, setCartData] = useState({})
const { products } = useSelector((store) => {
return store.prodReducer
});


useEffect(() => {
const singleProdData = products.find((el) => el.id === +id)
// console.log(id);
// console.log('find_item',singleProdData);
setCartData(singleProdData);
const items = JSON.parse(localStorage.getItem("cartItems")) || [];
setCartItems(items);
// console.log(items);
}, [])

console.log('cartitem', cartData);

useEffect(() => {
if (id) {
const singleProdData = products.find((el) => el.id === +id)
// console.log('find_item',singleProdData);
setCartData(singleProdData)
}
}, [])

const handleAddToCart = () => {
// dispatch(postCartProduct(cartData)).then((res)=>{
// console.log('postCart res', res);
// })
// console.log('strd', cartData);

if (cartData) {
cartItem.push(cartData)
localStorage.setItem('cartItmes', JSON.stringify(cartItem));
console.log('ccc', cartItem);
}

const handleAddToCart = () => {
const newItems = [...cartItems];
newItems.push(cartData)
setCartItems(newItems);
localStorage.setItem("cartItems", JSON.stringify(newItems));
}
// console.log('localstorageItem',cartItems.length);


return (
<Box border={'0px solid'} px='100px' mt={'20px'}>
Expand Down Expand Up @@ -102,7 +97,7 @@ export const SingleProductPage = () => {
// transtion='opacity 1s'
h={'95%'}
w='95%'
src={"https://assets.pharmeasy.in/apothecary/images/offers_1_ff.webp?dim=256x0"} alt="" />
src={cartData.image_src} alt="" />
</Box>
</Flex>
<Flex
Expand All @@ -118,13 +113,13 @@ export const SingleProductPage = () => {
cursor="pointer"
>
<Image
w="75%"
h="50px"
transition="all 0.4s ease"
_hover={{
transform: "scale(1.2)",
transition: "all 0.4s ease",
}}
src={'https://assets.pharmeasy.in/apothecary/images/offers_1_ff.webp?dim=256x0'}
src={cartData.image_src}
/>
</Center>
<Center
Expand All @@ -136,13 +131,13 @@ export const SingleProductPage = () => {
cursor="pointer"
>
<Image
w="75%"
h="50px"
transition="all 0.4s ease"
_hover={{
transform: "scale(1.2)",
transition: "all 0.4s ease",
}}
src='https://assets.pharmeasy.in/apothecary/images/offers_1_ff.webp?dim=256x0'
src={cartData.image_src}
/>
</Center>
<Center
Expand All @@ -154,13 +149,13 @@ export const SingleProductPage = () => {
cursor="pointer"
>
<Image
w="75%"
h="50px"
transition="all 0.4s ease"
_hover={{
transform: "scale(1.2)",
transition: "all 0.4s ease",
}}
src={'https://assets.pharmeasy.in/apothecary/images/offers_1_ff.webp?dim=256x0'}
src={cartData.image_src}
/>
</Center>
</Flex>
Expand Down Expand Up @@ -191,10 +186,10 @@ export const SingleProductPage = () => {
noOfLines={1}
height="30px"
>
{"product.name"}
{cartData.productName}
</Text>
<Text fontSize="14" color="#0f847e" py="2px">
Visit {'storename'} Store
Visit Store
</Text>
<Flex
className=" rating"
Expand Down Expand Up @@ -224,10 +219,10 @@ export const SingleProductPage = () => {
border={'0px solid'}
>
<Text fontSize="22px" fontWeight="700" border={'0px solid'}>
₹{'242.25'}
₹{cartData.salePrice}
</Text>
<Text fontSize="14px" color="#8e9ca7" pt='1'>
MRP₹<span style={{ textDecoration: "line-through" }}>285.00</span>
MRP₹<span style={{ textDecoration: "line-through" }}>{cartData.MRP}</span>
</Text>
<Flex
border={'0px solid'}
Expand All @@ -241,7 +236,7 @@ export const SingleProductPage = () => {
w="75px"
bgImage='url("https://assets.pharmeasy.in/web-assets/dist/1602b4ce.svg")'
>
{15} % OFF
{cartData.discountPercent}
</Flex>
</Flex>
<Text fontSize="12px" color="#8e9ca7" mt='-2'>
Expand Down Expand Up @@ -291,7 +286,7 @@ export const SingleProductPage = () => {
>
<Box mt='7'>
<Text fontSize="14px" fontWeight="600" p="10px">
{"qty"} Items in Cart
{cartItems.length} Items in Cart
</Text>
<Link to="/cart">
<Button
Expand Down
16 changes: 0 additions & 16 deletions pharmeasy/src/Redux/cartReducer/cartAction.js
View file

This file was deleted.

5 changes: 0 additions & 5 deletions pharmeasy/src/Redux/cartReducer/cartActionTypes.js
View file

This file was deleted.

30 changes: 0 additions & 30 deletions pharmeasy/src/Redux/cartReducer/cartReducer.js
View file

This file was deleted.

2 changes: 1 addition & 1 deletion pharmeasy/src/Redux/productsReducer/prodAction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { GET_PRODUCT_SUCCESS, PRODUCT_FAILURE, PRODUCT_REQ } from "./prodActionT

export const getProducts = (category) => (dispatch) => {
dispatch({ type: PRODUCT_REQ })
axios.get(`https://upset-dove-zipper.cyclic.app/${category}`)
return axios.get(`https://upset-dove-zipper.cyclic.app/${category}`)
.then((res) => {
// console.log('getProductRes', res);
dispatch({ type: GET_PRODUCT_SUCCESS, payload: res.data })
Expand Down

0 comments on commit ff2a9e7

Please sign in to comment.