makine array of objects for filter/ making sort as another function and state

Author: murtazatankiwala456

src/features/product/components/ProductList.js

@@ -65,32 +65,40 @@ export default function ProductList() {
   const products = useSelector(selectAllProducts);
   const dispatch = useDispatch();
   const [filter, setFilter] = useState({});
+  const [sort, setSort] = useState({});
 
   const handleFilter = (e, section, option) => {
     console.log(e.target.checked);
     // TODO: we will on server  support mutilple value
     // remove obj when input box is unchecked
     const newFilter = { ...filter };
     if (e.target.checked) {
-      newFilter[section.id] = option.value;
+      if (newFilter[section.id]) {
+        newFilter[section.id].push(option.value); //{"category":["frangrances","furniture"]}
+      } else {
+        newFilter[section.id] = [option.value]; //[]
+      }
     } else {
-      delete newFilter[section.id];
+      // delete array item after unchecked...
+      const index = newFilter[section.id].findIndex(
+        (el) => el === option.value
+      );
+      newFilter[section.id].splice(index, 1);
     }
+    console.log({ newFilter });
     setFilter(newFilter);
-    console.log(section.id, option.value);
   };
   const handleSort = (e, option) => {
-    const newFilter = {
-      ...filter,
-      _sort: option.order === "desc" ? `-${option.sort}` : option.sort,
+    const sort = {
+      _sort: option.order === "desc" ? `-${option.sort}` : option.sort, //{_sort:"price", order="desc"}
     };
-    setFilter(newFilter);
-    dispatch(fetchProductsByFiltersAsync(newFilter));
+    console.log(sort);
+    setSort(sort);
   };
   // making API call when dispatch or when filter is applied in a one go....
   useEffect(() => {
-    dispatch(fetchProductsByFiltersAsync(filter));
-  }, [dispatch, filter]);
+    dispatch(fetchProductsByFiltersAsync({ filter, sort }));
+  }, [dispatch, filter, sort]);
 
   return (
     <div className="bg-white">

src/features/product/productAPI.js

@@ -6,10 +6,7 @@ export function fetchAllProducts() {
     resolve({ data });
   });
 }
-export function fetchProductsByFilters(filter) {
-  // in server side:-
-  // filter ={"category":["frangrances","furniture"]}
-  // sort={_sort:price, order="desc"}
+export function fetchProductsByFilters(filter, sort) {
   // filter ={"brand":"Essence"}
   // TODO:we will on server  support mutilple value
 
@@ -27,9 +24,20 @@ export function fetchProductsByFilters(filter) {
   // For descending order,
 
   // ***** use GET /products?_sort=-price ****
+
+  // in server side:-
+  // filter ={"category":["frangrances","furniture"]}
+  // sort={_sort:"price", order="desc"}
   let queryString = "";
   for (let key in filter) {
-    queryString += `${key}=${filter[key]}&`;
+    const categoryValues = filter[key]; // "[furniture]" << array
+    if (categoryValues.length) {
+      const lastCategoryValue = categoryValues[categoryValues.length - 1];
+      queryString += `${key}=${lastCategoryValue}&`;
+    }
+  }
+  for (let key in sort) {
+    queryString += `${key}=${sort[key]}&`; //_sort:"price"
   }
   return new Promise(async (resolve) => {
     // TODO: we will not hard coded server url here...

src/features/product/productSlice.js

@@ -16,8 +16,8 @@ export const fetchAllProductsAsync = createAsyncThunk(
 );
 export const fetchProductsByFiltersAsync = createAsyncThunk(
   "product/fetchProductsByFilters",
-  async (filter) => {
-    const response = await fetchProductsByFilters(filter);
+  async ({ filter, sort }) => {
+    const response = await fetchProductsByFilters(filter, sort);
     // The value we return becomes the `fulfilled` action payload
     return response.data;
   }