Visually differentiate sort components from filter components

[piedpiper358]

Before:

After:

Before:

After:

Before:

After:

Before:

After:

[sebastientromp]

The result looks really good.
I would keep using a single component (you can still keep the "filter-dropdown" name) with an isSort flag, as both are essentially the same. That would reduce the amount of duplicated code

[piedpiper358]

I would keep using a single component with an isSort flag

I probably won't be able to work that hard on the project anytime soon, as I need to work a little at another job to earn some money) But I will do it when I have free time.

[sebastientromp]

That's awesome! Congrats for landing the new job :)

[piedpiper358]

@sebastientromp, I still feel like the sort components should be a separate component as they have different user interaction logic and perhaps in the future we may want to further differentiate sort components from filter components. For example, we may want to implement sorting in descending or ascending order, etc. While using the isSort flag in the filtering component looks like a crutch.

[sebastientromp]

Yes, I agree that having different components make more sense.
However I'm not totally comfortable with the amount of duplicate code there is between the components.
It might be ok though, since the logic inside these components almost never change.

Let me think about it for a bit.

[sebastientromp]

Here I would reference the .scss of the filter-dropdown component, and use a new file only for the style that is specific to that new component. This would make it easier to understand the differences between the two

[sebastientromp]

I think here I would use an abstract, parent component that contains the shared code, and use subclasses to redefine the behavior where appropriate.
The "filter" and "sort" functions are IMO intrinsically very similar, and I don't see them diverging a lot in the future. And if they do, it will most likely be through the options they propose, or how option selection is handled. This means that all the layout is probably best handled in a common way.

Would you like me to do it? Or would you like to give it a try?