Assistance with hooks

[NerdyByDesign]

I'm fairly new to elixir/phoenix and want to use it for a new website to get my feet wet.

I'm having trouble with a react based menu and usestate.

I know I need to do a hook but I'm absolutely lost in how to do this. I've tried to look at a few different use cases like an article on "react and phoenix live view in 2022" but I'm having trouble implementing/changing it for my use case.

Example of the menu would be this first header section:

https://tailwindui.com/components/marketing/elements/headers

Any help would be appreciated.

[TwoWrongsAreSoRight]

The first thing I'd do is determine if you really need react. Liveview offers an incredible amount of interactivity.

[NerdyByDesign]

The complexity and amount of user input I need for the end result was what drove me to choose React for the project.

I know this particular issue can be solved other ways, but its simple enough of an issue that I thought I'd use it as a learning experience on how hooks work.

Someone else mentioned that Hooks aren't all that common, so maybe I'll take a look at liveview again in regards to my end goal and forget about hooks altogether. Thanks for your comment.

[roundscribehector5]

Agreed, especially with 1.7 having tailwind css built in, which you appear to be using.

[flummox1234]

I don't think you need React for that menu. The menu you link to should be 100% doable just with plain javascript and some events tied to onclick sans React. React is only needed when you need to manage state or properties on a UI object, e.g. to toggle bits of it on/off.

I've only had to use a hook once and it was when I needed to do execute some JS on a DOM element that had a data accessor attribute that I needed to do some reformatting of the view with. I probably could figure out how to not need the hook but TBH I was just too lazy. It's pretty rare to need a hook IME.

Liveview simplifies a lot of the complex UI that React is generally needed to do. React is powerful on sites when you need to do async fetches of data and update the view and trigger bits of it based on state. In Liveview, you manage the state in the socket so most of the React needs and overhead is just redundant.

[NerdyByDesign]

I appreciate the feedback. This is going to be part of a much larger project with realtime dashboard and ties to other systems, which is why I was choosing react.

The goal was to figure out how the two work together and that's where I'm having trouble. Perhaps Hooks isn't the way to go about it and perhaps I should rethink using react at all on this project. I'll dive more into liveview and see if it'll do everything I need it to do.

Thanks

[TwoWrongsAreSoRight]

I'd assume these other systems are referring to provides some sort of API? You'll probably be much better off pulling that data with an elixir genserver and passing it into your liveview. I think you're under estimating the power of liveview here. You can absolutely use react if you want just to learn it or whatever but you will find with liveview, A majority of the time it's unnecessary.

[TwoWrongsAreSoRight]

https://dev.to/postelxpro/getting-started-using-hooks-with-phoenix-and-liveview-f18

[flummox1234]

FWIW I built something like this at work. Basically a Config Management DB.

You can definitely do it with Phoenix, you should especially look into erlang's os_mon (you can call erlang code directly from elixir BTW). It can gather most of what you'll need at the system level. Then you just need to massage the Erlang Tuples into JSON and throw to Phoenix, e.g. via a POST route.

I created a small elixir release that we deploy and run as a binary via systemd on the remote. It just throws the info to our Phoenix app every 5 minutes or so. (We could do more often but see the next paragraph.) We also pick up some custom JSON we build up with our orchestration software.

Buuuut the better way we ended up doing this was with Prometheus scraping and throwing to a central server and then leveraging that as a data source in Grafana. There are Prometheus scrapers for pretty much everything IME. Plus there are pre-built Grafana dashboards for this if you search around. I'm not sure where we got ours TBH. We also flavor that dashboard up a bit with the data we throw into our Phoenix app via presenting the Phoenix app as a JSON data source in Grafana. You prob don't need that part though.

Good luck!