category filter data by user select, category price color and brand

Question

how I can filter data by sidebar chooses? example:

1. user select a category, example (phone) then show product that have phone category.

2. user select a color, example (blue) then show product that have blue color.

3. user select a brand, example (apple) then show product that have apple brand.

4. user select a price, <= $900 then show product have price under or above that.

5. user can select all these together or just specific select,

later, maybe we can add more section like size..!

*my API have all these details like category color price...

* I use react with redux toolkit !

[image example][1] [1]: https://i.stack.imgur.com/FeAeW.png

my code, redux filter Slice.

 const initialState = {
  products: [],
};

export const filterSlice = createSlice({
  name: "filters",
  initialState,
  reducers: {
    addProducts: (state, action) => {
      const product = action.payload
      state.products = product
    },
    selectedCategory: (state, action) => {
      const filter = state.products.filter(product => product.categories.includes(action.payload))
      state.products = filter
    },
    selectedColor:(state, action) => {
      const filter = state.products.filter(product => product.color.includes(action.payload))
      state.products = filter
    },
    selectedBrand:(state, action) => {
      const filter = state.products.filter(product => product.brand.includes(action.payload))
      state.products = filter
    }
  }

});

react

  const handleCategories = (tag) => {
    dispatch(selectedCategory(tag));
  };
  const handleColor = (color) => {
    dispatch(selectedColor(color));
  };
  const handleBrand = (brand) => {
    dispatch(selectedBrand(brand));
  };

Answer 1

You do not show code. But here is one way.

If your API returns a object with these kind of parameters lets say:

price: 300
color: "red",
brand: "samsung",
itemIs: "phone"

You could do something like this:

 function onSearchQueryChange(e) { const usersSearchValue = e.target.value //comes from onChange HTMLEvent const allProducts = fetchAllProductResultsFromApi() //you will define this as an array of all the products const filteredProducts = allProducts.filter((product) => product.price.contains(usersSearchValue) || product.color.contains(usersSearchValue) || product.brand.contains(usersSearchValue) || product.itemIs.contains(usersSearchValue)) setUseStateProducts(filteredProducts) // you will map this in jsx return //something like this }

Also just to tell you, if you take a similar approach, you DO NOT want to run the onSearchQueryChaneg funciton as it calls your fetch every time the user types 1 char because it calls too many fetch req so call it when enter is pressed or have a throttle input.

Also here is a much simpler approach if you can do it:

if you can have each objects have thing kind of array property:

tags: ["samsung", "phone", "300", "red"]

then this will make it ever easier, instead you can then change the filteredProducts to:

 const filteredProducts = allProducts.filter((product) => product.tags.includes(usersSearchValue)); //even simpler!