⛄ Snowberb ⛄ – 12-56 May 26

Im trying to do a multi-filter function on React, and I'm really stuck. I have diverse filters:

bookie: string[],
ganancia: { min: number, max: number },
completed: boolean,
event_date: 'ASC' | 'DESC'

bookie: string[],
ganancia: { min: number, max: number },
completed: boolean,
event_date: 'ASC' | 'DESC'

and I also have a lot of objects with those properties and more, called bonuses: IBonus[] My objective is that I have to apply all these filters to the bonuses object at once, depending on what the user selects, for example, bookies could be bet365, Sportium etc, ganancia could have a min of 20€ and a max of 100€ etc. How can I do this?

<div className="flex flex-col gap-y-3">
   Casas:
   {houses.map((house) => (
       <button key={house} onClick={() => filterBonuses('bookie', house)}>
         {house}
       </button>
   ))}
</div>

<div className="flex flex-col gap-y-3">
   Casas:
   {houses.map((house) => (
       <button key={house} onClick={() => filterBonuses('bookie', house)}>
         {house}
       </button>
   ))}
</div>

const filterBonuses = (filterType: keyof IBonus, option: string | number | boolean) => {
    const newItems = bonuses.filter((bonus) => bonus[filterType] === option)
    setFilteredItems(newItems)
  }

const filterBonuses = (filterType: keyof IBonus, option: string | number | boolean) => {
    const newItems = bonuses.filter((bonus) => bonus[filterType] === option)
    setFilteredItems(newItems)
  }

I could only achieve 1 filter at a time, I have no idea how I can chain all of them

25 Replies

S3BAS•3y ago

You don't chain the filters You could, but it's not necessary Rather, compose the predicates That is to say, you have a function which will take one of the filters and the object and returns true or false (this is the predicate) Create one such a predicate for every filter And then you can use all of these predicates in the .filter function, so only the objects for which true will be returned for all of the predicates will be kept

Sniberb•3y ago

could you explain this one more in depth please?

S3BAS•3y ago

Can you send the interface IBonus

Sniberb•3y ago

export interface IBonus {
  id: string
  titulo: string
  tipo_de_bono: string
  tipo_de_oferta: string
  cuota_minima: number
  cuota_maxima: number
  fecha_evento: string
  evento: string
  condiciones: string
  resumen: string
  recompensa: string
  bookie: string
  ganancia: number
  fecha_inicio: string
  fecha_fin: string
  invitacion: boolean
  completado: boolean
  tipo_de_juego?: string
  juego?: string
}

export interface IBonus {
  id: string
  titulo: string
  tipo_de_bono: string
  tipo_de_oferta: string
  cuota_minima: number
  cuota_maxima: number
  fecha_evento: string
  evento: string
  condiciones: string
  resumen: string
  recompensa: string
  bookie: string
  ganancia: number
  fecha_inicio: string
  fecha_fin: string
  invitacion: boolean
  completado: boolean
  tipo_de_juego?: string
  juego?: string
}

Sniberb•3y ago

This is the type of filter im talking about btw (styling not finished)

S3BAS•3y ago

Imagine the state is

ganacia = { min: 1, max: 10 }
completed = false

ganacia = { min: 1, max: 10 }
completed = false

then you can create a predicate for each

const ganaciaP = (ganaciaState: { min: number, max: number}, obj: IBonus) => obj.ganaciaState>= min && obj.ganaciaState<= max
const completedP = (completedState: boolean, obj: IBonus) => obj.completado === completedState

const ganaciaP = (ganaciaState: { min: number, max: number}, obj: IBonus) => obj.ganaciaState>= min && obj.ganaciaState<= max
const completedP = (completedState: boolean, obj: IBonus) => obj.completado === completedState

then use these predicates as such

bonuses.filter(bonus => ganaciaP(ganacia, bonus) && completedP(completed, bonus))

bonuses.filter(bonus => ganaciaP(ganacia, bonus) && completedP(completed, bonus))

And you can AND (&&) all of these predicates for every filter you have in there Be aware that if you have a filter that can be unselected / hold no value that the predicate should return true for those cases as well

Sniberb•3y ago

This way It would work only after hitting a button like "Apply filters"? Would it be a lot more complex to filter bonuses every time a user selects a filter?

S3BAS•3y ago

That depends on when you choose to update the state, this part is filtering the state once the filters have been selected

Sniberb•3y ago

mhm

S3BAS•3y ago

Complex in terms of what?

Sniberb•3y ago

difficulty

S3BAS•3y ago

No it is not, it does not change the piece of code Im suggesting That's about when you update the state You can choose to update the state as the user clicks and updates each individual filter (controlled components) or you choose to only sync the state once the user clicks the button "apply filter"

Sniberb•3y ago

waht im trying to say is that if you select for example betfair365 then in bonuses would only remain that house and if I deselect that filter i'd have no way of retrieving the other objects

S3BAS•3y ago

Don't update the state of bonuses

Sniberb•3y ago

I make a copy of it?

S3BAS•3y ago

You don't even have to Just filter the bonuses state bonuses will always have all the bonuses

Sniberb•3y ago

oh I get it

S3BAS•3y ago

There is no need to overwrite that state you just lose information that way

Sniberb•3y ago

true true okay let me try this thank you so much sebas

S3BAS•3y ago

And what you're supposed to do is deriving the filtered view for your state npnp

Sniberb•3y ago

you have no idea how many times you helped me in this server 🤣 how do I print the array? If in my component

            <BonusList
              currentItems={bonuses}
            />

            <BonusList
              currentItems={bonuses}
            />

I'd have to make a copy of bonuses dont I? :/

S3BAS•3y ago

No, .filter will create a new array Use that array

            <BonusList
              currentItems={bonuses.filter(bonus => predicate1(state, bonus) && ....)}
            />

            <BonusList
              currentItems={bonuses.filter(bonus => predicate1(state, bonus) && ....)}
            />

Sniberb•3y ago

and last thing, what if I have the list paginated like this?

useEffect(() => {
    // Loading items from {currentOffset} to {endOffset}
    const endOffset = currentOffset + ITEMS_PER_PAGE
    // get only the items between both cursors and calculate how many pages will there be
    setCurrentItems(filteredItems.slice(currentOffset, endOffset))
    setPageCount(Math.ceil(bonuses.length / ITEMS_PER_PAGE))
  }, [currentOffset, filteredItems])

useEffect(() => {
    // Loading items from {currentOffset} to {endOffset}
    const endOffset = currentOffset + ITEMS_PER_PAGE
    // get only the items between both cursors and calculate how many pages will there be
    setCurrentItems(filteredItems.slice(currentOffset, endOffset))
    setPageCount(Math.ceil(bonuses.length / ITEMS_PER_PAGE))
  }, [currentOffset, filteredItems])

I should have said it before sorry, that's why I am asking if I should make a copy and how I must manage that filteredItems is a copy of bonuses

S3BAS•3y ago

I have to go, hope someone else can help you from here

reactibot•3y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/979367518831534140