Skip to content

Commit

Permalink
adding sorting functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
ShilpaPandey26 committed Aug 27, 2024
1 parent 2ece73a commit e39c44c
Showing 1 changed file with 77 additions and 15 deletions.
92 changes: 77 additions & 15 deletions src/Pages/ShopCategory.jsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,65 @@
import React, { useContext, useState } from "react";
import { ShopContext } from "../Context/ShopContext";
import Dropdown from "../assets/dropdown_icon.png";
import Product from "./Product";
import Item from "../Components/Item";
import { Link } from "react-router-dom";


const ShopCategory = (props) => {
const { all_products } = useContext(ShopContext);
const [displayCount, setDisplayCount] = useState(12);
const [sortCriteria, setSortCriteria] = useState("default");


const [isDropdownOpen, setIsDropdownOpen] = useState(false);


// Filter products based on category
const filteredProducts = all_products.filter(
(item) => item.category === props.category
);


const filteredProducts = all_products.filter((item) => {
if (item.category === props.category) {
return item;
// Sort products based on selected criteria
const sortProducts = (products) => {
if (sortCriteria === "priceLowToHigh") {
return products.slice().sort((a, b) => parseFloat(a.new_price) - parseFloat(b.new_price));
} else if (sortCriteria === "priceHighToLow") {
return products.slice().sort((a, b) => parseFloat(b.new_price) - parseFloat(a.new_price));
} else if (sortCriteria === "popularity") {
// Ensure the 'popularity' attribute is available in your data
return products.slice().sort((a, b) => b.popularity - a.popularity);
} else if (sortCriteria === "discount") {
return products.slice().sort((a, b) => {
const discountA = a.old_price ? ((parseFloat(a.old_price) - parseFloat(a.new_price)) / parseFloat(a.old_price)) * 100 : 0;
const discountB = b.old_price ? ((parseFloat(b.old_price) - parseFloat(b.new_price)) / parseFloat(b.old_price)) * 100 : 0;
return discountB - discountA; // Sort in descending order
});
} else {
return products; // Default sort
}
});
};



// Apply sorting to the filtered products
const sortedProducts = sortProducts(filteredProducts);
console.log(filteredProducts)


// Handle the load more functionality
const showMore = () => {
setDisplayCount(displayCount + 12);
};

const handleClicked = () => {
alert("clicked");

// Handle sorting criteria change
const handleSortChange = (criteria) => {
setSortCriteria(criteria);
setIsDropdownOpen(false); // Close the dropdown after selecting a sort option
};


return (
<div>
<Link to="/">
Expand All @@ -31,29 +68,53 @@ const ShopCategory = (props) => {
<div className="flex items-center justify-between mt-4 ml-3">
<p>
<span className="text-black ml-4 ">
<p className="font-bold ">Showing 1-{displayCount} </p>
<p className="font-bold ">Showing 1-{displayCount} </p>
out of {filteredProducts.length} results
</span>
</p>
<div className="flex flex-row items-center justify-between mr-6 border-2 border-gray-400 px-1 py-1 rounded-2xl cursor-pointer">
<div className="relative mr-6">
<button
className="flex flex-row items-center justify-between"
onClick={handleClicked}
className="flex flex-row items-center justify-between border-2 border-gray-400 px-2 py-1 rounded-2xl cursor-pointer"
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
>
Sort By{" "}
<img src={Dropdown} alt="dropdown" className="w-3 h-2 m-2" />
</button>
{isDropdownOpen && (
<div className="absolute right-0 mt-2 w-48 bg-white border border-gray-300 rounded-lg shadow-lg z-10">
<ul>
<li
className="px-4 py-2 cursor-pointer hover:bg-gray-200"
onClick={() => handleSortChange("priceLowToHigh")}
>
Price-low to high
</li>
<li
className="px-4 py-2 cursor-pointer hover:bg-gray-200"
onClick={() => handleSortChange("priceHighToLow")}
>
Price- high to low
</li>
<li
className="px-4 py-2 cursor-pointer hover:bg-gray-200"
onClick={() => handleSortChange("discount")}
>
Discount
</li>
</ul>
</div>
)}
</div>
</div>
<div className="grid grid-cols-4 gap-3 m-auto">
{filteredProducts.slice(0, displayCount).map((item) => {
return <Item data={item} key={item.id} />;
})}
{sortedProducts.slice(0, displayCount).map((item) => (
<Item data={item} key={item.id} />
))}
</div>
{filteredProducts.length >= displayCount ? (
<div className="flex justify-center">
<button
className="bg-orange-400 text-white px-4 py-2 rounded-full mt-5"
className="bg-orange-400 text-white px-4 py-2 mt-4 rounded-full"
onClick={showMore}
>
Show More
Expand All @@ -64,4 +125,5 @@ const ShopCategory = (props) => {
);
};


export default ShopCategory;

0 comments on commit e39c44c

Please sign in to comment.