sodapopcan

sodapopcan

I have a navbar component that I include at the top of all my live views. Since it reacts differently based on certain attributes passed to it that are loaded in live views, I can’t just stick it in live.html.heex.

So the top of a typical live view render function looks like this:

def render(assigns) do
  ~H"""
  <.live_component
    id="navbar"
    module="MyApp.SomeNamespace.NavBar"
    logged_in?={@logged_in?}
    some_decision_based_on_liveview_assigns={@some_assign_unavailable_in_the_layout}
  />
  """
end

While I’m the type who loves some pretty code, I don’t strive for it at all costs if it hurts clarity. But I also hate noise and this started to feel really noisy. I realized that id and module are always static, so then I had the idea to wrap the live component in a functional one:

def navbar(assigns) do
  ~H"""
  <.live_component
    id="navbar"
    module="MyApp.SomeNamespace.NavBar"
    logged_in?={@logged_in?}
    some_decision_based_on_liveview_assigns={@some_decision_based_on_liveview_assigns}  
  """
end

So now in my live views I can simply do:

def render(assigns) do
  ~H"""
  <.navbar logged_in?={@logged_in?} some_attr={@some_attr} />
  """
end

Other than that it’s hiding away a live component and that it maybe feels a little icky, I’m wondering: are there any drawbacks?

In anticipation of someone quoting that last sentence back to me saying, “That’s what’s wrong with it!”, my thoughts are that I would only use it in this one case where it’s going to be on basically every live view in my app. Maybe calling it <.live_navbar /> would it clear that it’s lying about being functional? :thinking:

I realize this is a bit of a bike shed, but I’m interested in opinions if they are out there, especially if there is some real danger I’m not thinking of.

Thanks!

First Post!

mayel

mayel

Well this isn’t an answer but FYI live.html.heex has access to all assigns from your LiveView, so you could stick the nav there.

Most Liked

cmo

cmo

Know that you’re not alone in your suffering :wink:. I tried a liveview, a sticky liveview, a layout component that I included in every liveview and a live component. The root level function component + on_mount is the only one that could cater for everything my heart desires. This is indeed how they do it in live_beats.

cmo

cmo

I was pondering my navbar recently and came to the conclusion that it shall be a function component in live.html.heex and it’s brains shall be contained in an on_mount hook.

sodapopcan

sodapopcan OP

That’s along the lines of one of my thoughts, although I was gonna put stuff in on_mount and still use a live component since my navbar makes database calls using optionally using assigns from the current page (liveview). It felt a little perverse. But ya, I think it’s going to end up having to be in the on_mount callback as since I’ve posted this, I’ve already felt the pain of having to include boilerplate on every liveview I want a navbar on… which is all of them o_O This also means caring about the url in on_mount which is unfortunate but there are worse things in life.

Last Post!

sodapopcan

sodapopcan OP

Oh jeez, yes, I have to stop going on elixirforums at the end of my day. Cool cool, thank you!

Where Next? Top

Trending in Discussions Top

AstonJ
As the title says, please share what you’ve been up to with Elixir. Whether that’s been learning it, looking into it, making stuff with i...
2977 94592 917
New
cblavier
Hey there, It’s been more than a year since we started using LiveView as our main UI library and building a whole library of UI componen...
New
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
heathen
Quite interesting article Google brought me. Didn’t find any mentions about it here. What do you think in general? Would you use togethe...
New
mhanberg
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
New
AstonJ
Since we have deprecated our Erlang sections (as we have dedicated Erlang Forums now) let’s add this thread for those who’d like to post ...
New
maennchen
:warning: Security advisory: Decimal DoS vulnerability A vulnerability has been published for decimal where very large exponents can cau...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
marciok
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Dmk
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
webofbits
With AI doing more of the implementation work, I’ve been wondering how much coding I should deliberately keep doing myself. My main conc...
#ai
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews