From bd9345e1d9fb8dd70033e4eb2e0a58936fee16e8 Mon Sep 17 00:00:00 2001
From: Saloni Atole <saloniatole172003@gmail.com>
Date: Thu, 11 Jul 2024 23:02:04 +0530
Subject: [PATCH] wishlist page added

---
 client/package-lock.json               | 17 ++++++-
 client/package.json                    |  3 +-
 client/src/App.jsx                     |  4 ++
 client/src/pages/Wishlist/wishlist.jsx | 62 ++++++++++++++++++++++++++
 4 files changed, 83 insertions(+), 3 deletions(-)
 create mode 100644 client/src/pages/Wishlist/wishlist.jsx

diff --git a/client/package-lock.json b/client/package-lock.json
index 2e8f6db..3874746 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -18,7 +18,8 @@
         "react-razorpay": "^2.0.1",
         "react-redux": "^8.1.2",
         "react-router-dom": "^6.16.0",
-        "redux-persist": "^6.0.0"
+        "redux-persist": "^6.0.0",
+        "uuid": "^10.0.0"
       },
       "devDependencies": {
         "@types/react": "^18.2.15",
@@ -1046,7 +1047,7 @@
       "version": "18.2.8",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.8.tgz",
       "integrity": "sha512-bAIvO5lN/U8sPGvs1Xm61rlRHHaq5rp5N3kp9C+NJ/Q41P8iqjkXSu0+/qu8POsjH9pNWb0OYabFez7taP7omw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -4801,6 +4802,18 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "4.4.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
diff --git a/client/package.json b/client/package.json
index 1db4ae2..4db3662 100644
--- a/client/package.json
+++ b/client/package.json
@@ -20,7 +20,8 @@
     "react-razorpay": "^2.0.1",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.16.0",
-    "redux-persist": "^6.0.0"
+    "redux-persist": "^6.0.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 300aac8..4c80b1a 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -14,6 +14,8 @@ import Retailer_home from "./pages/Retailer-home";
 import Product from "./pages/Product";
 import Cart from "./pages/Cart";
 import ScrollToTop from "./components/ScrollToTop";
+import Wishlist from "./pages/Wishlist/wishlist";
+import './App.css'
 function App() {
     return (
         <BrowserRouter>
@@ -30,7 +32,9 @@ function App() {
                     <Route path="about" element={<About />} />
                     <Route path="product" element={<Product />} />
                     <Route path="cart" element={<Cart />} />
+                    <Route path="wishlist" element={<Wishlist />} />
                     <Route path="retailer" element={<Layout_retailer />}>
+                    
                         <Route index element={<Retailer_home />} />
                     </Route>
                 </Route>
diff --git a/client/src/pages/Wishlist/wishlist.jsx b/client/src/pages/Wishlist/wishlist.jsx
new file mode 100644
index 0000000..f42ad70
--- /dev/null
+++ b/client/src/pages/Wishlist/wishlist.jsx
@@ -0,0 +1,62 @@
+// src/components/Wishlist.js
+import React, { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid'; // For generating unique keys
+
+const Wishlist = () => {
+  const [wishlist, setWishlist] = useState([]);
+
+  const addToWishlist = (product) => {
+    if (!wishlist.some(item => item.id === product.id)) {
+      setWishlist(prevWishlist => [...prevWishlist, { ...product, id: uuidv4() }]);
+    }
+  };
+
+  const removeFromWishlist = (productId) => {
+    setWishlist(prevWishlist => prevWishlist.filter(item => item.id !== productId));
+  };
+
+  const products = [
+    { id: uuidv4(), name: 'Running Shoes' },
+    { id: uuidv4(), name: 'Basketball Shoes' },
+    { id: uuidv4(), name: 'Casual Shoes' },
+  ];
+
+  return (
+    <div className="p-4">
+      <h1 className="text-3xl font-bold mb-4">Wishlist</h1>
+      <div className="space-y-4">
+        {products.map(product => (
+          <div key={product.id} className="flex justify-between items-center bg-white p-4 rounded-lg shadow-md">
+            <span>{product.name}</span>
+            <button
+              onClick={() => addToWishlist(product)}
+              className="px-4 py-2 rounded bg-gray-300 text-gray-800 hover:bg-gray-400 hover:text-gray-900"
+            >
+              Add to Wishlist
+            </button>
+          </div>
+        ))}
+      </div>
+      <h2 className="text-2xl font-bold my-4">My Wishlist</h2>
+      {wishlist.length === 0 ? (
+        <p>No items in wishlist</p>
+      ) : (
+        <ul>
+          {wishlist.map(item => (
+            <li key={item.id} className="flex justify-between items-center bg-white p-4 rounded-lg shadow-md">
+              <span>{item.name}</span>
+              <button
+                onClick={() => removeFromWishlist(item.id)}
+                className="px-4 py-2 rounded bg-red-500 text-white"
+              >
+                Remove
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default Wishlist;