Merge pull request AditiSharma00#16 from AditiSharma00/fw20_0743_day5

day5

pharmeasy/src/App.js

@@ -6,13 +6,15 @@ import Navbar from "./Components/Navbar/Navbar";
 import AllRoutes from "./Pages/AllRoutes";
 import Footer from "./Components/Footer/Footer";
 import Banner from "./Components/Footer/Banner";
+
 function App() {
   return (
     <div>
       <Navbar />
       <AllRoutes />
       <Banner />
       <Footer />
+
     </div>
   );
 }

pharmeasy/src/Components/CartItem.jsx

@@ -3,27 +3,30 @@ import styles from "./CartItem.module.css";
 
 
 const CartItem = ({ data, setdata }) => {
+  console.log("data",data)
+  const [arrdata,setarrdata]=useState(data ?data : null)
+  //console.log("arrdata",arrdata.data.image_src)
   const handleclick = (id) => {
-    let data = JSON.parse(localStorage.getItem("cartitem"));
+    let data = JSON.parse(localStorage.getItem("cartItems"));
     let finaldata = data.filter((ele) => {
-      if (ele._id !=id) return ele;
+      if (ele.id !==id) return ele;
     });
-    localStorage.setItem("cartitem", JSON.stringify(finaldata));
+    localStorage.setItem("cartItems", JSON.stringify(finaldata));
     setdata(finaldata);
   };
 useEffect(()=>{
 
 },[])
 
 function updateqty(id,value) {
-  let data = JSON.parse(localStorage.getItem("cartitem"));
+  let data = JSON.parse(localStorage.getItem("cartItems"));
   let finaldata = data.map((ele) => {
-    if (ele._id == id) return { ...ele, qty: Number(value) };
+    if (ele.id === id) return { ...ele, qty: Number(value) };
     else {
       return ele;
     }
   });
-  localStorage.setItem("cartitem", JSON.stringify(finaldata));
+  localStorage.setItem("cartItems", JSON.stringify(finaldata));
   setdata(finaldata);
 }
 
@@ -34,8 +37,8 @@ function updateqty(id,value) {
         <div className={styles.leftCartSection}>
           <div className={styles.imageWrapper}>
             <img
-            //   src={data.img1}
-            src="https://cdn01.pharmeasy.in/dam/products_otc/I09432/neurobion-forte-tablet-30s-2-1656661904.jpg?dim=100x0&dpr=1.25&q=100"
+                //  src={data.image_src}
+
               alt="cart item"
               className={styles.cartItemImage}
             />
@@ -68,7 +71,7 @@ function updateqty(id,value) {
                 className={styles.selectQuantity}
                 // eslint-disable-next-line no-undef
                 onChange={(e) => {
-                  updateqty(data._id,e.target.value);
+                  updateqty(data.id,e.target.value);
                 }}
               >
                 <option value="1">Qty 1</option>

pharmeasy/src/Pages/AllRoutes.jsx

@@ -5,6 +5,7 @@ import Home from "./Home";
 import NotFound from "./NotFound";
 import { Products } from "../Pages/ProductPage/Products";
 import { SingleProductPage } from '../Pages/SingleProdPage/SingleProductPage'
+import Cart from "./Cart/Cart";
 function AllRoutes() {
   return (
     <Routes>
@@ -13,6 +14,7 @@ function AllRoutes() {
       <Route path="/products" element={<Products />} />
       <Route path='/products/:id' element={<SingleProductPage />} />
       <Route path="/search/:name" element={<Search />}></Route>
+      <Route path="/cart" element={<Cart />} />
     </Routes>
   );
 }

pharmeasy/src/Pages/Cart/Cart.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import CartItem from "../../Components/CartItem";
 import styles from "./cart.module.css";
 import CartSwiper from "../../Components/CartSwiper.jsx";
@@ -9,24 +9,100 @@ import { HiCurrencyRupee } from "react-icons/hi";
 import { MdKeyboardArrowUp } from "react-icons/md";
 import { MdOutlineKeyboardArrowRight } from "react-icons/md";
 import AddressDrawer from "../../Components/AddAddressDrawer/AddressDrawer";
+import axios from "axios"
 
 const Cart = () => {
+
+  let data=[
+    {
+      "image_src": "https://cdn01.pharmeasy.in/dam/products_otc/N72858/smws-greenz-lemino-lemon-green-tea-with-licorice-60-servings-2-1641788473.jpg",
+      "productName": "Pharmeasy Vitamin D3 - Supports Bone Hea...",
+      "salePrice": 356.95,
+      "MRP": "₹649.00",
+      "discountPercent": "45% OFF",
+      "id": 1
+    },
+    {
+      "image_src": "https://cdn01.pharmeasy.in/dam/products_otc/L69936/namhya-ayurvedic-tea-150g-pouch-1-1647364731.jpg",
+      "productName": "Everherb (By Pharmeasy) Moringa (Drum St...",
+      "salePrice": 69.55,
+      "MRP": "₹599.00",
+      "discountPercent": "55% OFF",
+      "id": 2
+    },
+    {
+      "image_src": "https://cdn01.pharmeasy.in/dam/products_otc/S59403/healthvit-keto-fat-burner-formulated-in-usa-with-garcinia-green-tea-green-coffee-cla-60-capsules-2-1654249991.jpg",
+      "productName": "Coq 30mg Coenzyme Q10 Capsules, Nutraceu...",
+      "salePrice": 416.24,
+      "MRP": "₹433.58",
+      "discountPercent": "4% OFF",
+      "id": 3
+    },
+    {
+      "image_src": "https://cdn01.pharmeasy.in/dam/products_otc/T99337/tea-trunk-hibiscus-green-tea-100g-tin-2-1641790297.jpg",
+      "productName": "Pharmeasy Glutathione - Promotes Healthy...",
+      "salePrice": 769.45,
+      "MRP": "₹1399.00",
+      "discountPercent": "45% OFF",
+      "id": 4
+    }
+  ]
+
+
 
+
+
+
+    //console.log("data",data)
+
+    // const [localdata,setlocaldata]=useState({sprice:data.length === 0
+    //   ? 0
+    //   : data.length == 1
+    //   ? (data[0].price * data[0].qty).toFixed(2)
+    //   : data
+    //       .reduce((a, b) => a.price * a.qty + b.price * b.qty)
+    //       .toFixed(2),price:data.length == 0
+    //       ? 0
+    //       : data.length == 1
+    //       ? Number(data[0].offprice * data[0].qty).toFixed(2)
+    //       : data
+    //           .reduce(
+    //             (a, b) => a.offprice * a.qty + b.offprice * b.qty
+    //           )
+    //           .toFixed(2)})
+    // useEffect(() => {
+    //             localStorage.setItem('cartvalue',JSON.stringify({sprice:data.length == 0
+    //               ? 0
+    //               : data.length == 1
+    //               ? (data[0].price * data[0].qty).toFixed(2)
+    //               : data
+    //                   .reduce((a, b) => a.price * a.qty + b.price * b.qty)
+    //                   .toFixed(2),price:data.length == 0
+    //                   ? 0
+    //                   : data.length == 1
+    //                   ? Number(data[0].offprice * data[0].qty).toFixed(2)
+    //                   : data
+    //                       .reduce(
+    //                         (a, b) => a.offprice * a.qty + b.offprice * b.qty
+    //                       )
+    //                       .toFixed(2)}))
+
+    // }, []);
 
   return (
     <>
       <div className={styles.container}>
         <div className={styles.leftContainer}>
           <div className={styles.cartItemsWrapper}>
             <h1 className={styles.cartItemsNumber}>
-              {/* {data.length} Items in cart */}
+               Items in cart 
             </h1>
             <p className={styles.priceDes}>Prices are indicative</p>
           </div>
 
-          {/* {data.map((ele) => (
-            <CartItem key={ele._id} data={ele} setdata={setdata} />
-          ))} */}
+          {data.map((ele) => (
+            <CartItem key={ele.id} data={ele}  />
+          ))}
           <CartItem/>
           <div className={styles.swiperWrapper}>
             <div className={styles.trendingProductsWrapper}>