⛄ 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
S
S3BAS693d 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
S
Sniberb693d ago
could you explain this one more in depth please?
S
S3BAS693d ago
Can you send the interface IBonus
S
Sniberb693d 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
}
S
Sniberb693d ago
This is the type of filter im talking about btw (styling not finished)
S
S3BAS693d 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
S
Sniberb693d 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?
S
S3BAS693d ago
That depends on when you choose to update the state, this part is filtering the state once the filters have been selected
S
Sniberb693d ago
mhm
S
S3BAS693d ago
Complex in terms of what?
S
Sniberb693d ago
difficulty
S
S3BAS693d 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"
S
Sniberb693d 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
S
S3BAS693d ago
Don't update the state of bonuses
S
Sniberb693d ago
I make a copy of it?
S
S3BAS693d ago
You don't even have to Just filter the bonuses state bonuses will always have all the bonuses
S
Sniberb693d ago
oh I get it
S
S3BAS693d ago
There is no need to overwrite that state you just lose information that way
S
Sniberb693d ago
true true okay let me try this thank you so much sebas
S
S3BAS693d ago
And what you're supposed to do is deriving the filtered view for your state npnp
S
Sniberb693d 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? :/
S
S3BAS693d 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) && ....)}
/>
S
Sniberb693d 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
S
S3BAS693d ago
I have to go, hope someone else can help you from here
UU
Unknown User693d ago