adding sorting functionality(desc according to new ruleJSON Server's behavior for sorting changed with different versions.? _sort=-price)

Author: murtazatankiwala456

src/features/product/components/ProductList.js

@@ -18,11 +18,9 @@ import {
 } from "@heroicons/react/20/solid";
 
 const sortOptions = [
-  { name: "Most Popular", href: "#", current: true },
-  { name: "Best Rating", href: "#", current: false },
-  { name: "Newest", href: "#", current: false },
-  { name: "Price: Low to High", href: "#", current: false },
-  { name: "Price: High to Low", href: "#", current: false },
+  { name: "Best Rating", sort: "rating", current: false },
+  { name: "Price: Low to High", sort: "price", order: "asc", current: false },
+  { name: "Price: High to Low", sort: "price", order: "desc", current: false },
 ];
 
 const filters = [
@@ -67,11 +65,19 @@ export default function ProductList() {
   const products = useSelector(selectAllProducts);
   const dispatch = useDispatch();
   const [filter, setFilter] = useState({});
+
   const handleFilter = (e, section, option) => {
     const newFilter = { ...filter, [section.id]: option.value };
     setFilter(newFilter);
     dispatch(fetchProductsByFiltersAsync(newFilter));
-    console.log(section.id, option.value);
+  };
+  const handleSort = (e, option) => {
+    const newFilter = {
+      ...filter,
+      _sort: option.order === "desc" ? `-${option.sort}` : option.sort,
+    };
+    setFilter(newFilter);
+    dispatch(fetchProductsByFiltersAsync(newFilter));
   };
 
   useEffect(() => {
@@ -223,8 +229,10 @@ export default function ProductList() {
                       {sortOptions.map((option) => (
                         <Menu.Item key={option.name}>
                           {({ active }) => (
-                            <a
-                              href={option.href}
+                            <p
+                              onClick={(e) => {
+                                handleSort(e, option);
+                              }}
                               className={classNames(
                                 option.current
                                   ? "font-medium text-gray-900"
@@ -234,7 +242,7 @@ export default function ProductList() {
                               )}
                             >
                               {option.name}
-                            </a>
+                            </p>
                           )}
                         </Menu.Item>
                       ))}

src/features/product/productAPI.js

@@ -9,6 +9,22 @@ export function fetchAllProducts() {
 export function fetchProductsByFilters(filter) {
   // filter ={"category":"frangrances"}
   // filter ={"brand":"Essence"}
+  // TODO:we will on server  support mutilple value
+
+  // reference for sorting functionality
+  //   JSON Server's behavior for sorting changed with different versions.
+
+  // To resolve the issue, update JSON Server using the command:
+
+  // npm install -g json-server
+
+  // After updating, sorting by default will be ascending. No need to use _order:asc
+
+  // GET /products?_sort=price
+
+  // For descending order,
+
+  // ***** use GET /products?_sort=-price ****
   let queryString = "";
   for (let key in filter) {
     queryString += `${key}=${filter[key]}&`;