From d1ec47e89c38c4f056b673382aff07d81a341d45 Mon Sep 17 00:00:00 2001
From: Garima <sushri4tech@gmail.com>
Date: Wed, 7 Aug 2024 17:39:44 +0530
Subject: [PATCH] feat: Update filters for product listing page

- Replace dollar sign with rupee sign in price filter
- Fix rating filter to correctly filter products based on rating value
- Ensure filters accept and handle integer values correctly
- Improve filter styling and structure
---
 .../components/Popular_Categories/Filters.jsx | 43 +++++++++++++------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/User/components/Popular_Categories/Filters.jsx b/src/User/components/Popular_Categories/Filters.jsx
index c74f768b..bfcdfecd 100644
--- a/src/User/components/Popular_Categories/Filters.jsx
+++ b/src/User/components/Popular_Categories/Filters.jsx
@@ -30,15 +30,30 @@ function Filters({
         <FilterSection
           title="Category"
           options={[
-            "electronics",
-            "jewelery",
-            "beauty",
-            "skin-care",
-            "grocery",
-            "men's clothing",
-            "women's clothing",
-            "sunglasses",
-            "home decor"
+              "beauty", //added all the categories
+              "fragrances",
+              "furniture",
+              "groceries",
+              "home-decoration",
+              "kitchen-accessories",
+              "laptops",
+              "mens-shirts",
+              "mens-shoes",
+              "mens-watches",
+              "mobile-accessories",
+              "motorcycle",
+              "skin-care",
+              "smartphones",
+              "sports-accessories",
+              "sunglasses",
+              "tablets",
+              "tops",
+              "vehicle",
+              "womens-bags",
+              "womens-dresses",
+              "womens-jewellery",
+              "womens-shoes",
+              "womens-watches"
           ]}
           onChange={(e) => setCategoryFilter(e.target.value)}
         />
@@ -51,8 +66,12 @@ function Filters({
         {/* Filter section for Rating */}
         <FilterSection
           title="Rating"
-          options={["1", "2", "3", "4"]}
-          onChange={(e) => setRatingFilter(parseInt(e.target.value))}
+          options={["1", "2", "3", "4", "5"]}
+          onChange={(e) => {
+            const value = parseInt(e.target.value, 10); //converting into int from decimal
+            setRatingFilter(isNaN(value) ? 0.00 : value); //applying condition for rating or higher
+          }
+        }  
         />
       </div>
     </aside>
@@ -68,7 +87,7 @@ function FilterSection({ title, options, onChange }) {
         <option value="">All</option>
         {options.map((option) => (
           <option key={option} value={option}>
-            {title === "Price" ? `Under $${option}` : option}
+            {title === "Price" ? `Under ₹${option}` : option}
           </option>
         ))}
       </select>