Fork me on GitHub
#fulcro
<
2022-02-09
>
Gonzalo Rafael Acosta15:02:12

Hello guys, new to fulcro as well, great initiative 💯. I am wondering if you can point me towards what's the way of creating a reusable filters widget, with it's own state (active filters), but with the ability to be controlled from the parent (clear the filters when something else happens). I am asking because I think creating the building blocks of your ui with widgets like filters, table, form, searchbar ... saves development time by reusing.

sheluchin17:02:40

There is a companion library for Fulcro called Fulcro RAD that has many such things. I think it's recommended that you get familiar with at least the first four chapters or so of Fulcro before using RAD. https://book.fulcrologic.com/RAD.html https://www.youtube.com/watch?v=P2up8qcDmJs

👌 1
Jakub Holý (HolyJak)18:02:37

Welcome to Fulcro! Is creating the widget your way of learning Fulcro or are you building a F. based app and feel the need for such a widget? I think it is much easier to learn it by building actual apps, that is what is made for. I do not really understand what a reusable filter widget is. It must be aware of the data and how to filter it, no? As @UPWHQK562 said, it is better to learn raw fulcro first (I recommend including my https://github.com/fulcro-community/fulcro-exercises in that :)) but RAD has actually good answers to your question, though it also introduce a new concept, attributes, to make it smooth. RAD reports can have filters. They store the filter data together with the report's data, i.e. in the component that both has the data to filter and needs to filter them. Run https://github.com/fulcrologic/fulcro-rad-demo and see how it looks. Explore it with Fulcro Inspect.

💯 1
Gonzalo Rafael Acosta19:02:34

Thank you guys. I'll take a look on RAD.

Gonzalo Rafael Acosta19:02:26

I call a widget a component with it's own state that can be accessed from the outside, in this case a filters widget might track the state of some checkbox filters and some select filters, so that you can just use it to create a new page, lets say a table, and control the data that the table shows with the state of the filter.

Gonzalo Rafael Acosta19:02:07

So a page would be a composition of this reusable widgets, in this case to control what data is shown

Gonzalo Rafael Acosta19:02:32

You can compose also a searchbar

Gonzalo Rafael Acosta19:02:52

The TodoFilter folder is what i call a "widget" or reusable module

Jakub Holý (HolyJak)21:02:04

Ah. What do you mean by "reusable"? It can only filter todos so you can not reuse it on a CustomerList or SalesReport?

Gonzalo Rafael Acosta22:02:25

I'll take a look thanks. Yes this is somewhat mixed, sorry for the bad example. Thought It is true that the TodoFilter is coupled to the todos in this case, to make it completely reusable the todos dependency (data) can be extracted either through props or with your concept of identity. The important thing is to make it general so it can be rendered many times with its own filter state so it can be reused

Gonzalo Rafael Acosta22:02:53

I'll go into all the examples that you gave thanks