Sniberb
Sniberb3y ago

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