Organizing flash messages in Phoenix

I started building a system to better understand how Elixir works and to learn about Phoenix.

Phoenix is a framework for Elixir, the same way Rails is a framework for Ruby. Its mission is to be a productive framework that doesn't compromise on speed or maintainability.

Without further ado, I decided to build a simple CRUD in Elixir to track the books I've read. I used the following commands:

# Create the app.
$ mix phx.new booklistx

# Enter the project
cd booklistsx

# CRUD generator (Rails scaffold style)
mix phx.gen.html Books Book books title:string

# Create the database and the books table
mix ecto.create
mix ecto.migrate

I set the books listing as the app's root.

# lib/booklistx_web/router.ex

defmodule BooklistxWeb.Router do
  use BooklistxWeb, :router

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug :protect_from_forgery
    plug :put_secure_browser_headers
  end

  pipeline :api do
    plug :accepts, ["json"]
  end

  scope "/", BooklistxWeb do
    pipe_through :browser

    # get "/", PageController, :index # <- I commented this line!
    resources "/", BooksController    # <- I added this line!
  end

  # Other scopes may use custom stacks.
  # scope "/api", BooklistxWeb do
  #   pipe_through :api
  # end
end

I ran the command to start the app:

$ mix phx.server

It was ready, I could already add and remove books. That's when, after creating a book, I saw the flash message appear.

I used the browser inspector to see the html.

I noticed the html always came with the flash message tags:

<p class="alert alert-info" role="alert">Book updated successfully.</p>
<p class="alert alert-danger" role="alert"></p>

There's just a simple css trick to not show anything when the tag is empty:

/* assets/css/phoenix.css */

.alert:empty {
  display: none;
}

By default the file comes like this, loading the alert tags even when there's no flash message:

# lib/booklistx_web/layout/app.html.exx

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Booklistx · Phoenix Framework</title>

    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
    <%= csrf_meta_tag() %>
  </head>

  <body>
    <header>
      <section class="container">
        <nav role="navigation">
          <ul>
            <li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
          </ul>
        </nav>
        <a href="https://phoenixframework.org/" class="phx-logo">
          <img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
        </a>
      </section>
    </header>
    <main role="main" class="container">
#->   <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
#->   <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>

      <%= render @view_module, @view_template, assigns %>
    </main>
    <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
  </body>
</html>

That bothered me. I researched how it works and found an issue suggesting this approach:

# lib/booklistx_web/layout/app.html.exx
...
<%= if info = get_flash(@conn, :info) do %>
  <p class="alert alert-info" role="alert"><%= info %></p>
<% end %>

<%= if error = get_flash(@conn, :error) do %>
  <p class="alert alert-danger" role="alert"><%= error %></p>
<% end %>
...

Now it only shows when there's a flash message. But those variables in the middle of the code (info and error) didn't look great.

I decided to do something similar to what I've done in Rails.

There must be many other ways to solve this, probably better, but this was the one I liked the most because it's simple and uses the concepts I've been studying.

I created the following files:

# Create shared_view file
$ touch lib/booklistx_web/shared_view.ex
# Create shared folder
$ mkdir lib/booklistx_web/templates/shared
# Create _flash_message.html.exx file
$ touch lib/booklistx_web/templates/shared/_flash_message.html.eex

# lib/booklistx_web/shared_view.ex

defmodule BooklistxWeb.SharedView do
  use BooklistxWeb, :view
  import BooklistxWeb.Router.Helpers

  def show_flash_message(conn) do
    conn
    |> get_flash
    |> flash_message
  end

  def flash_message(%{"info" => message}) do
    render "_flash_message.html", class: "primary", message: message
  end

  def flash_message(%{"error" => message}) do
    render "_flash_message.html", class: "danger", message: message
  end

  def flash_message(_), do: nil
end

Here I'm using things I've learned like pipe and pipeline in the show_flash_message method, and pattern matching in flash_message.

The partial ended up like this:

# lib/booklistx_web/templates/shared/_flash_message.html.eex

<p class="alert alert-<%= @class %>" role="alert">
  <%= @message %>
</p>

And the layout ended up like this:

# lib/booklistx_web/layout/app.html.exx

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Booklistx · Phoenix Framework</title>

    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
    <%= csrf_meta_tag() %>
  </head>

  <body>
    <header>
      <section class="container">
        <nav role="navigation">
          <ul>
            <li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
          </ul>
        </nav>
        <a href="https://phoenixframework.org/" class="phx-logo">
          <img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
        </a>
      </section>
    </header>
    <main role="main" class="container">
      <%= BooklistxWeb.SharedView.show_flash_message(@conn) %>

      <%= render @view_module, @view_template, assigns %>
    </main>
    <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
  </body>
</html>

Conclusion

In my view, this turned out much better than using the variables (info and error) and those IFs directly in the layout. There must be better solutions, but this was the one I came up with and liked the most. I got to put in practice some things I've been learning like pipe, pipeline and pattern matching.

I'll leave the link to the code I made on github:

https://github.com/guilhermeyo/booklistx

Feel free to leave feedback and improvements I could make.

References

#23: Partial Templates with Phoenix
Elixir forum - Check for error and info alert in Phoenix
Issue phoenixframework - Add has_flash? functions. #1757

Originally posted at guilherme44.com.

Conclusion

References

Reading List