update to 1.6

lib/lokal/application.ex

@@ -5,19 +5,21 @@ defmodule Lokal.Application do
 
   use Application
 
+  @impl true
   def start(_type, _args) do
     children = [
       # Start the Ecto repository
       Lokal.Repo,
-      Lokal.Repo.Migrator,
       # Start the Telemetry supervisor
       LokalWeb.Telemetry,
       # Start the PubSub system
       {Phoenix.PubSub, name: Lokal.PubSub},
       # Start the Endpoint (http/https)
-      LokalWeb.Endpoint
+      LokalWeb.Endpoint,
       # Start a worker by calling: Lokal.Worker.start_link(arg)
       # {Lokal.Worker, arg}
+      # Automatically migrate on start
+      Lokal.Repo.Migrator
     ]
 
     # See https://hexdocs.pm/elixir/Supervisor.html
@@ -28,6 +30,7 @@ defmodule Lokal.Application do
 
   # Tell Phoenix to update the endpoint configuration
   # whenever the application is updated.
+  @impl true
   def config_change(changed, _new, removed) do
     LokalWeb.Endpoint.config_change(changed, removed)
     :ok

lib/lokal/mailer.ex

@@ -0,0 +1,3 @@
+defmodule Lokal.Mailer do
+  use Swoosh.Mailer, otp_app: :lokal
+end

lib/lokal_web.ex

@@ -59,6 +59,14 @@ defmodule LokalWeb do
     end
   end
 
+  def component do
+    quote do
+      use Phoenix.Component
+
+      unquote(view_helpers())
+    end
+  end
+
   def router do
     quote do
       use Phoenix.Router
@@ -81,7 +89,7 @@ defmodule LokalWeb do
       # Use all HTML functionality (forms, tags, etc)
       use Phoenix.HTML
 
-      # Import LiveView helpers (live_render, live_component, live_patch, etc)
+      # Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)
       import Phoenix.LiveView.Helpers
       import LokalWeb.LiveHelpers
 

lib/lokal_web/channels/user_socket.ex

@@ -1,35 +0,0 @@
-defmodule LokalWeb.UserSocket do
-  use Phoenix.Socket
-
-  ## Channels
-  # channel "room:*", LokalWeb.RoomChannel
-
-  # Socket params are passed from the client and can
-  # be used to verify and authenticate a user. After
-  # verification, you can put default assigns into
-  # the socket that will be set for all channels, ie
-  #
-  #     {:ok, socket |> assign(:user_id, verified_user_id)}
-  #
-  # To deny connection, return `:error`.
-  #
-  # See `Phoenix.Token` documentation for examples in
-  # performing token verification on connect.
-  @impl true
-  def connect(_params, socket, _connect_info) do
-    {:ok, socket}
-  end
-
-  # Socket id's are topics that allow you to identify all sockets for a given user:
-  #
-  #     def id(socket), do: "user_socket:#{socket.assigns.user_id}"
-  #
-  # Would allow you to broadcast a "disconnect" event and terminate
-  # all active sockets and channels for a given user:
-  #
-  #     LokalWeb.Endpoint.broadcast("user_socket:#{user.id}", "disconnect", %{})
-  #
-  # Returning `nil` makes this socket anonymous.
-  @impl true
-  def id(_socket), do: nil
-end

lib/lokal_web/component/topbar.ex

@@ -1,32 +1,32 @@
-defmodule LokalWeb.Live.Component.Topbar do
-  use LokalWeb, :live_component
-  
-  alias LokalWeb.{PageLive}
-  
-  def mount(socket) do
-    {:ok, socket |> assign(results: [], title_content: nil)}
-  end
-  
-  def update(assigns, socket) do
-    {:ok, socket |> assign(assigns)}
-  end
+defmodule LokalWeb.Component.Topbar do
+  @moduledoc """
+  Phoenix.Component for rendering an interactive topbar
+  Assign
+  """
 
-  def render(assigns) do
-    ~L"""
+  use LokalWeb, :component
+  alias LokalWeb.{PageLive}
+
+  def topbar(assigns) do
+    assigns =
+      %{results: [], title_content: nil, current_user: nil, flash: nil}
+      |> Map.merge(assigns)
+
+    ~H"""
     <header class="mb-8 px-8 py-4 w-full bg-primary-400">
       <nav role="navigation">
         <div class="flex flex-row justify-between items-center space-x-4">
           <div class="flex flex-row justify-start items-center space-x-2">
-            <%= link to: Routes.page_path(LokalWeb.Endpoint, :index) do %>
+            <%= link to: Routes.live_path(LokalWeb.Endpoint, PageLive) do %>
               <h1 class="leading-5 text-xl text-white hover:underline">Lokal</h1>
             <% end %>
-            
+
             <%= if @title_content do %>
               <span>|</span>
-              <%= @title_content %>
+              <%= render_slot(@title_content) %>
             <% end %>
           </div>
-        
+
           <ul class="flex flex-row flex-wrap justify-center items-center
             text-lg space-x-4 text-lg text-white">
             <%# search %>
@@ -35,15 +35,14 @@ defmodule LokalWeb.Live.Component.Topbar do
                 placeholder="Search" list="results" autocomplete="off"/>
               <datalist id="results">
                 <%= for {app, _vsn} <- @results do %>
-                  <option value="<%= app %>"><%= app %></option>
+                  <option value={app}>"><%= app %></option>
                 <% end %>
               </datalist>
             </form>
 
             <%# user settings %>
             <%= if @current_user do %>
-              <li>
-                <%= @current_user.email %></li>
+              <li><%= @current_user.email %></li>
               <li>
                 <%= link "Settings", class: "hover:underline",
                   to: Routes.user_settings_path(LokalWeb.Endpoint, :edit) %>
@@ -73,14 +72,14 @@ defmodule LokalWeb.Live.Component.Topbar do
         </div>
       </nav>
 
-      <%= if live_flash(@flash, :info) do %>
+      <%= if @flash && @flash |> Map.has_key?(:info) do %>
         <p class="alert alert-info" role="alert"
           phx-click="lv:clear-flash" phx-value-key="info">
           <%= live_flash(@flash, :info) %>
         </p>
       <% end %>
 
-      <%= if live_flash(@flash, :error) do %>
+      <%= if @flash && @flash |> Map.has_key?(:error) do %>
         <p class="alert alert-danger" role="alert"
           phx-click="lv:clear-flash" phx-value-key="error">
           <%= live_flash(@flash, :error) %>
@@ -89,4 +88,4 @@ defmodule LokalWeb.Live.Component.Topbar do
     </header>
     """
   end
-end
+end

lib/lokal_web/endpoint.ex

@@ -10,10 +10,6 @@ defmodule LokalWeb.Endpoint do
     signing_salt: "fxAnJltS"
   ]
 
-  socket "/socket", LokalWeb.UserSocket,
-    websocket: true,
-    longpoll: false
-
   socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]
 
   # Serve at "/" the static files from "priv/static" directory.

lib/lokal_web/gettext.ex

@@ -20,5 +20,5 @@ defmodule LokalWeb.Gettext do
 
   See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
   """
-  # use Gettext, otp_app: :lokal
+  use Gettext, otp_app: :lokal
 end

lib/lokal_web/live/live_helpers.ex

@@ -29,7 +29,7 @@ defmodule LokalWeb.LiveHelpers do
       Accounts.get_user_by_session_token(user_token)
     end)
   end
-  
+
   def assign_defaults(socket, _session) do
     socket
   end

lib/lokal_web/live/modal_component.ex

@@ -13,7 +13,7 @@ defmodule LokalWeb.ModalComponent do
 
       <div class="phx-modal-content">
         <%= live_patch raw("&times;"), to: @return_to, class: "phx-modal-close" %>
-        <%= live_component @socket, @component, @opts %>
+        <%= live_component @component, @opts %>
       </div>
     </div>
     """

lib/lokal_web/router.ex

@@ -1,6 +1,5 @@
 defmodule LokalWeb.Router do
   use LokalWeb, :router
-
   import LokalWeb.UserAuth
 
   pipeline :browser do
@@ -20,9 +19,14 @@ defmodule LokalWeb.Router do
   scope "/", LokalWeb do
     pipe_through :browser
 
-    live "/", PageLive, :index
+    live "/", PageLive
   end
 
+  # Other scopes may use custom stacks.
+  # scope "/api", LokalWeb do
+  #   pipe_through :api
+  # end
+
   # Enables LiveDashboard only for development
   #
   # If you want to use the LiveDashboard in production, you should put
@@ -39,6 +43,18 @@ defmodule LokalWeb.Router do
     end
   end
 
+  # Enables the Swoosh mailbox preview in development.
+  #
+  # Note that preview only shows emails that were sent by the same
+  # node running the Phoenix server.
+  if Mix.env() == :dev do
+    scope "/dev" do
+      pipe_through :browser
+
+      forward "/mailbox", Plug.Swoosh.MailboxPreview
+    end
+  end
+
   ## Authentication routes
 
   scope "/", LokalWeb do

lib/lokal_web/telemetry.ex

@@ -31,11 +31,27 @@ defmodule LokalWeb.Telemetry do
       ),
 
       # Database Metrics
-      summary("lokal.repo.query.total_time", unit: {:native, :millisecond}),
-      summary("lokal.repo.query.decode_time", unit: {:native, :millisecond}),
-      summary("lokal.repo.query.query_time", unit: {:native, :millisecond}),
-      summary("lokal.repo.query.queue_time", unit: {:native, :millisecond}),
-      summary("lokal.repo.query.idle_time", unit: {:native, :millisecond}),
+      summary("lokal.repo.query.total_time",
+        unit: {:native, :millisecond},
+        description: "The sum of the other measurements"
+      ),
+      summary("lokal.repo.query.decode_time",
+        unit: {:native, :millisecond},
+        description: "The time spent decoding the data received from the database"
+      ),
+      summary("lokal.repo.query.query_time",
+        unit: {:native, :millisecond},
+        description: "The time spent executing the query"
+      ),
+      summary("lokal.repo.query.queue_time",
+        unit: {:native, :millisecond},
+        description: "The time spent waiting for a database connection"
+      ),
+      summary("lokal.repo.query.idle_time",
+        unit: {:native, :millisecond},
+        description:
+          "The time the connection spent waiting before being checked out for the query"
+      ),
 
       # VM Metrics
       summary("vm.memory.total", unit: {:byte, :kilobyte}),

lib/lokal_web/templates/layout/app.html.heex

@@ -1,19 +1,19 @@
-<main role="main" class="container min-h-full min-w-full">
+<main class="container min-h-full min-w-full">
   <header class="mb-4 px-8 py-4 w-full bg-primary-400">
     <%= render "topbar.html", assigns %>
-  
+
     <%= if get_flash(@conn, :info) do %>
       <p class="alert alert-info" role="alert">
         <%= get_flash(@conn, :info) %>
       </p>
     <% end %>
-    
+
     <%= if get_flash(@conn, :error) do %>
       <p class="alert alert-danger" role="alert">
         <%= get_flash(@conn, :error) %>
       </p>
     <% end %>
   </header>
-  
+
   <%= @inner_content %>
 </main>

lib/lokal_web/templates/layout/live.html.heex

@@ -0,0 +1,19 @@
+<main class="container">
+  <LokalWeb.Component.Topbar.topbar
+    current_user={assigns[:current_user]}>
+  </LokalWeb.Component.Topbar.topbar>
+
+  <%= if @flash && @flash |> Map.has_key?(:info) do %>
+    <p class="alert alert-info" role="alert"
+      phx-click="lv:clear-flash"
+      phx-value-key="info"><%= live_flash(@flash, :info) %></p>
+      <% end %>
+
+  <%= if @flash && @flash |> Map.has_key?(:error) do %>
+    <p class="alert alert-danger" role="alert"
+      phx-click="lv:clear-flash"
+      phx-value-key="error"><%= live_flash(@flash, :error) %></p>
+  <% end %>
+
+  <%= @inner_content %>
+</main>

lib/lokal_web/templates/layout/live.html.leex

@@ -1,5 +0,0 @@
-<main role="main" class="container min-w-full min-h-full">
-  <%= live_component LokalWeb.Live.Component.Topbar, current_user: assigns[:current_user] %>
-
-  <%= @inner_content %>
-</main>

lib/lokal_web/templates/layout/root.html.heex

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <%= csrf_meta_tag() %>
     <%= live_title_tag assigns[:page_title] || "Lokal", suffix: "" %>
-    <link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
-    <script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
+    <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/css/app.css")}/>
+    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/js/app.js")}></script>
   </head>
   <body class="m-0 p-0 min-w-full min-h-full">
     <%= @inner_content %>

lib/lokal_web/templates/layout/topbar.html.eex

@@ -1,15 +1,16 @@
 <nav role="navigation">
   <div class="flex flex-row justify-between items-center space-x-4">
-    <%= link to: Routes.page_path(LokalWeb.Endpoint, :index) do %>
+    <%= link to: Routes.live_path(LokalWeb.Endpoint, PageLive) do %>
       <h1 class="leading-5 text-xl text-white hover:underline">Lokal</h1>
     <% end %>
-  
+
     <ul class="flex flex-row flex-wrap justify-center items-center
       space-x-4 text-lg text-white">
       <%# user settings %>
       <%= if assigns |> Map.has_key?(:current_user) && @current_user do %>
         <li>
-          <%= @current_user.email %></li>
+          <%= @current_user.email %>
+        </li>
         <li>
           <%= link "Settings", class: "hover:underline",
             to: Routes.user_settings_path(LokalWeb.Endpoint, :edit) %>
@@ -37,4 +38,4 @@
       <% end %>
     </ul>
   </div>
-</nav>
+</nav>

lib/lokal_web/views/layout_view.ex

@@ -1,6 +1,11 @@
 defmodule LokalWeb.LayoutView do
   use LokalWeb, :view
-  
+  alias LokalWeb.{PageLive}
+
+  # Phoenix LiveDashboard is available only in development by default,
+  # so we instruct Elixir to not warn if the dashboard route is missing.
+  @compile {:no_warn_undefined, {Routes, :live_dashboard_path, 2}}
+
   def get_title(conn) do
     if conn.assigns |> Map.has_key?(:title) do
       "Lokal | #{conn.assigns.title}"