WishList Implemented

ShwetKhatri2001 · Feb 27, 2024 · 0bc18ab · 0bc18ab
1 parent de20983
commit 0bc18ab
Show file tree

Hide file tree

Showing 8 changed files with 193 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.js b/src/App.js
@@ -10,17 +10,29 @@ import Header from "./components/Header/Header";
 import Feedback from "./components/Feedback/Feedback";
 import SignUp from "./components/SignUp/SignUp";
 import SignIn from './components/SignIn/Signin'
+import WishList from "./components/Wishlist/WishList";
+import { useState } from "react";
 
 const App = () => {
+  const [wishlist, setWishlist] = useState([]);
+
+  const addToWishlist = (item) => {
+    setWishlist([...wishlist, item]);
+  };
+  const handleRemoveItem = (id) => {
+    const updatedWishlist = wishlist.filter((item) => item.id !== id);
+    setWishlist(updatedWishlist);
+  };
   return (
     <>
     <BrowserRouter>
 
     <Header />
       <Routes>
-        <Route path="/" element={<ProductList />} />
+        <Route path="/" element={<ProductList addToWishlist={addToWishlist} wishlist={wishlist} removeFromWishlist={handleRemoveItem}/>} />
         <Route path="/sign-in" element={<SignIn />} />
         <Route path="/sign-up" element={<SignUp />} />
+        <Route path="/wishlist" element={<WishList wishlist={wishlist} onRemoveItem={handleRemoveItem}/>}/>
         <Route path="/about" element={<About />} />
         <Route path="/feedback" element={<Feedback />} />
         <Route path="/contact" element={<Contact />} />

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -5,6 +5,7 @@ import "./styles.css";
 const Header = () => {
   const navigationLinks = [
     { label: "Home", Path: "/" },
+    { label:"WishList" ,Path:"/wishlist"},
     { label: "About", Path: "/about" },
     { label: "Feedback", Path: "/feedback" },
     { label: "Contact", Path: "/contact" },

diff --git a/src/components/ModelViewer/ModelViewer.js b/src/components/ModelViewer/ModelViewer.js
@@ -3,12 +3,12 @@ import LazyLoad from "react-lazyload";
 // import "../../Products/ProductList.css";
 import QRCode from "qrcode.react";
 import Help from "./Help";
-const ModelViewer = ({ item }) => {
+const ModelViewer = ({ item, addToWishlist, removeFromWishlist, wishlist }) => {
   const [selectedVariant, setSelectedVariant] = useState('default');
   const [display, setDisplay] = useState(false);
   const [ARSupported, setARSupported] = useState(false);
   const [annotate, setAnnotate] = useState(false);
-
+  const [isInWishlist, setIsInWishlist] = useState(false);
 
 
   let modelViewer1 = {
@@ -82,8 +82,22 @@ const ModelViewer = ({ item }) => {
       modelViewer.variantName = event.target.value === 'Default' ? null : event.target.value;
     });
   }, []);
-
-
+
+  useEffect(() => {
+    if(wishlist){
+    const isInWishlist = wishlist.some((wishlistItem) => wishlistItem.id === item.id);
+    setIsInWishlist(isInWishlist);
+    }
+  }, [item, wishlist]);
+  const handleAddToWishlist = () => {
+    if (isInWishlist) {
+      removeFromWishlist(item.id);
+    } 
+    else 
+    {
+      addToWishlist(item);
+    }
+  };
 
   return (
     <div className="model-view">
@@ -185,7 +199,9 @@ const ModelViewer = ({ item }) => {
               <div>Rs. 1000</div>
               {!ARSupported && <h5>Scan the QR code for AR View on mobile</h5>}
             </div>
-            <div className="add-icon">+</div>
+            <button className="add-icon" onClick={handleAddToWishlist}>
+              {isInWishlist ? '-' : '+'}
+            </button>
           </div>
         </div>
       </LazyLoad>

diff --git a/src/components/ProductList/ProductList.js b/src/components/ProductList/ProductList.js
@@ -3,14 +3,13 @@ import productItems from "../../data/ProductItems";
 import ModelViewer from "../ModelViewer/ModelViewer";
 import "./ProductList.css";
 import LazyLoad from "react-lazyload";
-const ProductList = () => {
-  return (
+const ProductList = ({ addToWishlist,wishlist,removeFromWishlist }) => {
 
+  return (
     <section className="list-view">
-
-      {productItems.map((item, idx) => (
+      {productItems.map((item,idx) => (
         <LazyLoad key={idx}>
-          <ModelViewer item={item} />
+          <ModelViewer item={item} addToWishlist={addToWishlist} wishlist={wishlist} removeFromWishlist={removeFromWishlist} />
         </LazyLoad>
       ))}
     </section>

diff --git a/src/components/Wishlist/WishList.css b/src/components/Wishlist/WishList.css
@@ -0,0 +1,96 @@
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+
+  .cart-title {
+    text-align: center;
+    font-size: 32px;
+    margin-bottom: 20px;
+    font-family: 'Times New Roman', Times, serif;
+
+  }
+
+  .cart-paper {
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  .cart-heading {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    font-family: 'Times New Roman', Times, serif;
+
+  }
+
+  .wishlist-items {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+    max-height: 600px; 
+  overflow-y: auto;
+  }
+
+  .wishlist-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  }
+
+  .wishlist-details {
+    display: flex;
+    flex-direction: column;
+    font-family: 'Times New Roman', Times, serif;
+  }
+
+  .wishlist-name {
+    font-weight: bold;
+    font-size: 24px;
+  }
+
+  .wishlist-category 
+  {
+    font-size: 16px;
+    color: #555;
+  }
+
+  .wishlist-color {
+    color: #777;
+  }
+
+  .remove-btn {
+    background-color: #a10d0d;
+    color: #fff;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .remove-btn:hover {
+    background-color: #ff4646;
+  }
+
+  .go-back {
+    display: block;
+    text-align: center;
+    background-color:hsl(288, 100%, 64%) ;
+    color: #fff;
+    text-decoration: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    margin-top: 20px;
+  }
+
+  .go-back:hover {
+    background-color: hsl(276, 100%, 64%);
+  }
diff --git a/src/components/Wishlist/WishList.js b/src/components/Wishlist/WishList.js
@@ -0,0 +1,56 @@
+import React from "react";
+import "./WishList.css";
+import {Link} from 'react-router-dom';
+const WishList = ({wishlist,onRemoveItem}) => {
+  const isEmpty =wishlist.length===0;
+
+  const EmptyCart = () => {
+    return (
+      <>
+        <div className="alert">
+          You have no items in your WishList, start adding some!
+        </div>
+        <Link to="/" className="button go-back">
+          Go Back
+        </Link>
+      </>
+    );
+  };
+  const handleRemoveItem = (id) => {
+    onRemoveItem(id);
+  };
+  const FilledWishList = () => {
+    return (
+      <div className="wishlist-items">
+        {wishlist.map((item) => (
+          <div key={item.id} className="wishlist-item">
+            <div className="wishlist-details">
+              <div className="wishlist-name">{item.name}</div>
+              <div className="wishlist-category">Category: {item.category}</div>
+              <div className="wishlist-color">Color: {item.color}</div>
+            </div>
+            <button onClick={() => handleRemoveItem(item.id)} className="remove-btn">
+              Remove
+            </button>
+          </div>
+        ))}
+      </div>
+    );
+  };
+  return (
+    <div className="container">
+      <h3 className="cart-title">Your WishList</h3>
+      <div className="cart-grid">
+        <div className="cart-items-container">
+          <div className="cart-paper">
+            <h5 className="cart-heading">Added Items</h5>
+            <hr className="divider" />
+            {isEmpty ? <EmptyCart /> : <FilledWishList />}
+          </div>
+        </div>
+        </div>
+      </div>
+  );
+};
+
+export default WishList;
diff --git a/src/index.css b/src/index.css
@@ -23,8 +23,8 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
+  /* display: flex;
+  flex-direction: column; */
   justify-content: center;
   align-items: center;
   background-color:#e3e8ed;