Render feeds’ entries using LiveView

Author: cruessler

.formatter.exs

@@ -1,5 +1,6 @@
 [
   import_deps: [:ecto, :ecto_sql, :phoenix],
   subdirectories: ["priv/*/migrations"],
+  plugins: [Phoenix.LiveView.HTMLFormatter],
   inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}", "priv/*/seeds.exs"]
 ]

lib/ex_rss_web/feed_live/index.ex

@@ -1,4 +1,6 @@
 defmodule ExRssWeb.FeedLive.Index do
+  import Ecto.Query
+
   use ExRssWeb, :live_view
 
   alias ExRss.{Entry, Feed, Repo, User}
@@ -10,11 +12,22 @@ defmodule ExRssWeb.FeedLive.Index do
       ) do
     oldest_unread_entry = User.oldest_unread_entry(current_user.id)
 
+    current_user = Repo.get!(User, current_user.id)
+
+    feeds =
+      current_user
+      |> Ecto.assoc(:feeds)
+      |> Repo.all()
+      |> Repo.preload(
+        entries: from(e in Entry, where: e.read == false, order_by: [desc: e.posted_at])
+      )
+
     socket =
       socket
       |> assign(:current_user, current_user)
       |> assign(:api_token, api_token)
       |> assign(:oldest_unread_entry, oldest_unread_entry)
+      |> stream(:feeds, feeds)
 
     {:ok, socket}
   end
@@ -28,7 +41,11 @@ defmodule ExRssWeb.FeedLive.Index do
 
     case Repo.update(changeset) do
       {:ok, entry} ->
-        updated_feed = Repo.get!(Feed, entry.feed_id)
+        updated_feed =
+          Repo.get!(Feed, entry.feed_id)
+          |> Repo.preload(
+            entries: from(e in Entry, where: e.read == false, order_by: [desc: e.posted_at])
+          )
 
         update_broadcaster =
           Application.get_env(:ex_rss, :update_broadcaster, ExRss.Crawler.UpdateBroadcaster)
@@ -43,7 +60,12 @@ defmodule ExRssWeb.FeedLive.Index do
         oldest_unread_entry =
           User.oldest_unread_entry(socket.assigns.current_user.id)
 
-        {:noreply, assign(socket, :oldest_unread_entry, oldest_unread_entry)}
+        socket =
+          socket
+          |> assign(:oldest_unread_entry, oldest_unread_entry)
+          |> stream_insert(:feeds, updated_feed)
+
+        {:noreply, socket}
 
       _ ->
         {:noreply, socket}
@@ -65,4 +87,66 @@ defmodule ExRssWeb.FeedLive.Index do
 
     content_tag(tag, "", Keyword.merge(attrs, data_attributes))
   end
+
+  attr :entry, Entry, required: true
+
+  def entry(assigns) do
+    ~H"""
+    <ul class="flex flex-col">
+      <li class="flex flex-col md:flex-row">
+        <div class="flex flex-col">
+          <a href={@entry.url} target="_blank"><%= @entry.title %></a>
+          <span><%= @entry.posted_at %></span>
+        </div>
+
+        <div class="md:shrink-0 flex self-start mt-1 ml-auto space-x-4">
+          <a
+            href={@entry.url}
+            target="_blank"
+            aria-label={"View entry #{@entry.title}"}
+            phx-click="mark_as_read"
+            phx-value-entry-id={@entry.id}
+          >
+            <.icon name="hero-arrow-top-right-on-square-solid" />
+          </a>
+          <button aria-label="Mark as read" phx-click="mark_as_read" phx-value-entry-id={@entry.id}>
+            <.icon name="hero-check-circle-solid" />
+          </button>
+        </div>
+      </li>
+    </ul>
+    """
+  end
+
+  attr :entries, :list, required: true
+
+  def entries(assigns) do
+    if length(assigns.entries) > 5 do
+      assigns =
+        assigns
+        |> assign(:head_entries, Enum.take(assigns.entries, 2))
+        |> assign(:number_of_entries_not_shown, length(assigns.entries) - 4)
+        |> assign(:tail_entries, Enum.take(assigns.entries, -2))
+
+      ~H"""
+      <ul class="mb-6 flex flex-col space-y-4">
+        <li :for={entry <- @head_entries}>
+          <.entry entry={entry} />
+        </li>
+        <div><%= @number_of_entries_not_shown %> entries not shown</div>
+        <li :for={entry <- @tail_entries}>
+          <.entry entry={entry} />
+        </li>
+      </ul>
+      """
+    else
+      ~H"""
+      <ul class="mb-6 flex flex-col space-y-4">
+        <li :for={entry <- @entries}>
+          <.entry entry={entry} />
+        </li>
+      </ul>
+      """
+    end
+  end
 end

lib/ex_rss_web/feed_live/index.html.heex

@@ -1,29 +1,21 @@
 <h1 class="mb-2 font-bold">Oldest unread entry</h1>
 
-<%= if @oldest_unread_entry do %>
-  <ul class="mb-6 flex flex-col">
-    <li class="flex flex-col md:flex-row mt-4">
-      <div class="flex flex-col">
-        <a href={@oldest_unread_entry.url} target="_blank"><%= @oldest_unread_entry.title %></a>
-        <span><%= @oldest_unread_entry.posted_at %></span>
-      </div>
+<div class="mb-6">
+  <%= if @oldest_unread_entry do %>
+    <.entry entry={@oldest_unread_entry} />
+  <% else %>
+    <div>No entry found</div>
+  <% end %>
+</div>
+
+<ul id="live-feeds" phx-update="stream">
+  <li :for={{dom_id, feed} <- @streams.feeds} id={dom_id}>
+    <h1 class="mb-2 font-bold"><%= feed.title %></h1>
 
-      <div class="md:shrink-0 flex self-start mt-1 ml-auto space-x-4">
-        <a href={@oldest_unread_entry.url} target="_blank" aria-label={"View entry #{@oldest_unread_entry.title}"} phx-click="mark_as_read" phx-value-entry-id={@oldest_unread_entry.id}>
-          <.icon name="hero-arrow-top-right-on-square-solid" />
-        </a>
-        <button aria-label="Mark as read" phx-click="mark_as_read" phx-value-entry-id={@oldest_unread_entry.id}>
-          <.icon name="hero-check-circle-solid" />
-        </button>
-      </div>
-    </li>
-  </ul>
-<% else %>
-  <div class="mb-6">No entry found</div>
-<% end %>
+    <.entries entries={feed.entries} />
+  </li>
+</ul>
 
 <div id="elm-app-feeds" phx-update="ignore">
-  <%=
-    elm_module("App.Feeds", %{apiToken: @api_token}, id: "elm-module-app-feeds")
-  %>
+  <%= elm_module("App.Feeds", %{apiToken: @api_token}, id: "elm-module-app-feeds") %>
 </div>