Merge pull request #11 from pantanal-labs/pagination

Add pagination

Author: rogerpinho

assets/css/app.css

@@ -2,4 +2,6 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-
+.post-body h2 {
+  @apply text-2xl mt-8 mb-6 font-bold;
+}

assets/js/app.js

@@ -15,14 +15,12 @@ import "phoenix_html";
 import { Socket } from "phoenix";
 // import NProgress from "nprogress";
 import { LiveSocket } from "phoenix_live_view";
-import Hooks from "./hooks";
 
 let csrfToken = document
   .querySelector("meta[name='csrf-token']")
   .getAttribute("content");
 let liveSocket = new LiveSocket("/live", Socket, {
   params: { _csrf_token: csrfToken },
-  hooks: Hooks,
 });
 
 // Show progress bar on live navigation and form submits
@@ -36,4 +34,3 @@ liveSocket.connect();
 //liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)
 window.liveSocket = liveSocket;
-

assets/js/hooks.js

@@ -43,8 +43,9 @@ config :tailwind,
       --input=css/app.css
       --output=../priv/static/assets/app.css
     ),
-  cd: Path.expand("../assets", __DIR__)
-]
+    cd: Path.expand("../assets", __DIR__)
+  ]
+
 # Import environment specific config. This must remain at the bottom
 # of this file so it overrides the configuration defined above.
 import_config "#{Mix.env()}.exs"

assets/js/hooks/editor.js

@@ -25,25 +25,21 @@ defmodule BrasilEmDados.Blog do
     |> Repo.all()
   end
 
-  def list_public_posts(offset, limit) do
+  def list_public_posts(page) do
     Post
     |> where(status: "published")
-    |> offset(^offset)
-    |> limit(^limit)
-    |> order_by(:inserted_at)
+    |> order_by([p], asc: p.inserted_at, asc: p.id)
     |> preload([:user, :tags])
-    |> Repo.all()
+    |> Repo.paginate(page: page)
   end
 
-  def list_posts_by_tag(tag_name, offset, limit) do
-    Repo.all(
-      from p in Post,
+  def list_posts_by_tag(tag_name, page) do
+    query = from p in Post,
         join: t in assoc(p, :tags),
         where: t.name == ^tag_name,
-        offset: ^offset,
-        limit: ^limit,
         preload: [:tags]
-    )
+
+    Repo.paginate(query, page: page)
   end
 
   @doc """

assets/js/hooks/infinitescroll.js

@@ -2,4 +2,6 @@ defmodule BrasilEmDados.Repo do
   use Ecto.Repo,
     otp_app: :brasil_em_dados,
     adapter: Ecto.Adapters.Postgres
+
+  use Scrivener
 end

config/config.exs

@@ -2,58 +2,19 @@ defmodule BrasilEmDadosWeb.BlogLive.Index do
   use BrasilEmDadosWeb, :live_view
   alias BrasilEmDados.Blog
 
-  @posts_per_page 10
-
   @impl true
   def mount(params, _session, %{assigns: assigns} = socket) do
-    if assigns.live_action == :index do
-      {:ok,
-       socket
-       |> assign(current_page: 1, update: "")
-       |> get_posts(:index, nil)}
-    else
-      {:ok,
-       socket
-       |> assign(current_page: 1, update: "")
-       |> get_tag(params["tag_name"])
-       |> get_posts(:tag, params["tag_name"])}
-    end
-  end
-
-  @impl true
-  def handle_event("load-more", _params, %{assigns: assigns} = socket) do
-    if Map.has_key?(assigns, :tag) do
-      {:noreply,
-       socket
-       |> update(:current_page, &(&1 + 1))
-       |> update_with_append()
-       |> get_posts(assigns.live_action, assigns.tag.name)}
-    else
-      {:noreply,
-       socket
-       |> update(:current_page, &(&1 + 1))
-       |> update_with_append()
-       |> get_posts(assigns.live_action, nil)}
-    end
-  end
+    page = String.to_integer(params["page"] || "1")
 
-  defp get_posts(socket, :index, nil) do
-    offset = (socket.assigns.current_page - 1) * @posts_per_page
-    posts = Blog.list_public_posts(offset, @posts_per_page)
-
-    assign(socket, posts: posts)
+    {:ok,
+     socket
+     |> assign(:page, page)
+     |> get_posts()}
   end
 
-  defp get_posts(socket, :tag, tag_name) do
-    offset = (socket.assigns.current_page - 1) * @posts_per_page
-    posts = Blog.list_posts_by_tag(tag_name, offset, @posts_per_page)
-
-    assign(socket, posts: posts)
-  end
-
-  defp update_with_append(socket), do: assign(socket, update: "append")
-
-  defp get_tag(socket, tag_name) do
-    assign(socket, tag: Blog.get_tag_by_name!(tag_name))
+  defp get_posts(socket) do
+    page = socket.assigns.page
+    %{entries: posts, total_pages: total_pages} = Blog.list_public_posts(page)
+    assign(socket, posts: posts, total_pages: total_pages)
   end
 end

lib/brasil_em_dados/blog.ex

@@ -1,19 +1,14 @@
 <section class="text-gray-600 body-font">
   <div class="container px-5  mx-auto">
-    <div class="w-full bg-red p-6">
-      <%= if @live_action == :tag do %>
-        <h1 class="text-2xl font-bold uppercase"><%= @tag.name %></h1>
-      <% end %>
-    </div>
-    <div id="posts" phx-update="{@update}" class="flex flex-wrap -m-3">
+    <div id="posts" class="flex flex-wrap -m-3">
       <%= for post <- @posts do %>
       <div id="post-{post.id}" class="p-4 md:w-1/2">
         <%= live_redirect to: Routes.blog_show_path(@socket, :show, post.slug) do %>
         <div class="border-2 border-gray-200 border-opacity-60 rounded-md overflow-hidden">
           <div class="p-4">
             <h1 class="text-xl font-bold text-gray-900 mb-4"><%= post.title %> </h1>
             <div class="flex items-center flex-wrap">
-            <p class="text-black leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p> 
+              <p class="text-black leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p> 
               <span class="text-gray-500 mr-3 inline-flex items-center  leading-none text-sm pr-3 py-1">
                 <%= "#{post.inserted_at.day}/#{post.inserted_at.month}/#{post.inserted_at.year}" %>
               </span>
@@ -24,7 +19,16 @@
       </div>
       <% end %>
     </div>
-    <div id="loading" phx-hook="InfiniteScroll">
+    <div class="mx-auto flex justify-center items-center p-2 w-full">
+      <%= if @page > 1 do %>
+        <%= live_redirect("Anterior", to: Routes.blog_index_path(@socket, :index, page: @page - 1), class: "p-1 hover:text-gray-900") %>
+      <% end %>
+      <div class="py-2 px-4 text-black">
+        <%= @page %> de <%= @total_pages %>
+      </div>
+      <%= if @total_pages >  @page do %>
+        <%= live_redirect("Proximo", to: Routes.blog_index_path(@socket, :index, page: @page + 1), class: "p-1 hover:text-gray-900") %>
+      <% end %>
     </div>
   </div>
 </section>

lib/brasil_em_dados/repo.ex

@@ -8,7 +8,7 @@
        <%= "#{@post.inserted_at.day}/#{@post.inserted_at.month}/#{@post.inserted_at.year}" %> · Roger Pinho
        <%= if @post.tags != [] do %>
         <%= for tag <- @post.tags do %>
-         <%= live_redirect class: "inline-block py-1 px-2 rounded bg-#{tag.color}-50 uppercase text-#{tag.color}-500 text-xs font-medium tracking-widest", to: Routes.blog_index_path(@socket, :tag, tag.name) do %><%= tag.name %><% end %>
+         <%= live_redirect class: "inline-block py-1 px-2 rounded bg-#{tag.color}-50 uppercase text-#{tag.color}-500 text-xs font-medium tracking-widest", to: Routes.blog_tag_path(@socket, :index, tag.name) do %><%= tag.name %><% end %>
         <% end %>
         <% end %>
     </div>

lib/brasil_em_dados_web/live/blog_live/index.ex

@@ -0,0 +1,24 @@
+defmodule BrasilEmDadosWeb.BlogLive.Tag do
+  use BrasilEmDadosWeb, :live_view
+	alias BrasilEmDados.Blog
+
+	@impl true
+	def mount(params, _session, %{assigns: assigns} = socket) do
+    page = String.to_integer(params["page"] || "1")
+		{:ok, socket 
+			|> assign(page: page)
+			|> get_tag(params["tag_name"])
+			|> get_posts(params["tag_name"])}
+	end
+	
+	defp get_posts(socket, tag_name) do
+    page = socket.assigns.page
+    %{entries: posts, total_pages: total_pages} = Blog.list_posts_by_tag(tag_name, page)
+
+    assign(socket, posts: posts, total_pages: total_pages)
+  end
+	
+  defp get_tag(socket, tag_name) do
+    assign(socket, tag: Blog.get_tag_by_name!(tag_name))
+  end
+end

lib/brasil_em_dados_web/live/blog_live/index.html.heex

@@ -0,0 +1,39 @@
+<section class="text-gray-600 body-font">
+  <div class="container px-5  mx-auto">
+    <div class="w-full bg-red p-6">
+      <%= if(@tag) do %>
+        <h1 class="text-2xl font-bold uppercase"><%= @tag.name %></h1>
+      <% end %>
+    </div>
+    <div id="posts" class="flex flex-wrap -m-3">
+      <%= for post <- @posts do %>
+      <div id="post-{post.id}" class="p-4 md:w-1/2">
+        <%= live_redirect to: Routes.blog_show_path(@socket, :show, post.slug) do %>
+        <div class="border-2 border-gray-200 border-opacity-60 rounded-md overflow-hidden">
+          <div class="p-4">
+            <h1 class="text-xl font-bold text-gray-900 mb-4"><%= post.title %> </h1>
+            <div class="flex items-center flex-wrap">
+              <p class="text-black leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p> 
+              <span class="text-gray-500 mr-3 inline-flex items-center  leading-none text-sm pr-3 py-1">
+                <%= "#{post.inserted_at.day}/#{post.inserted_at.month}/#{post.inserted_at.year}" %>
+              </span>
+            </div>
+          </div>
+        </div>
+        <% end %>
+      </div>
+      <% end %>
+    </div>
+    <div class="mx-auto flex justify-center items-center p-2 w-full">
+      <%= if @page > 1 do %>
+        <%= live_redirect("Anterior", to: Routes.blog_tag_path(@socket, :index, @tag.name, page: @page - 1), class: "p-1 hover:text-gray-900") %>
+      <% end %>
+      <div class="py-2 px-4 text-black">
+        <%= @page %> de <%= @total_pages %>
+      </div>
+      <%= if @total_pages >  @page do %>
+        <%= live_redirect("Proximo", to: Routes.blog_tag_path(@socket, :index, @tag.name, page: @page + 1), class: "p-1 hover:text-gray-900") %>
+      <% end %>
+    </div>
+  </div>
+</section>

lib/brasil_em_dados_web/live/blog_live/show.html.heex

@@ -83,8 +83,7 @@ defmodule BrasilEmDadosWeb.Router do
     pipe_through [:browser]
 
     live "/", BlogLive.Index, :index
-    # live "/blog", BlogLive.Index, :index
-    live "/blog/tag/:tag_name", BlogLive.Index, :tag
+    live "/blog/tag/:tag_name", BlogLive.Tag, :index
     live "/blog/:slug", BlogLive.Show, :show
 
     scope "/admin" do

lib/brasil_em_dados_web/live/blog_live/tag.ex

@@ -49,9 +49,10 @@ defmodule BrasilEmDados.MixProject do
       {:gettext, "~> 0.11"},
       {:jason, "~> 1.0"},
       {:plug_cowboy, "~> 2.0"},
-      {:earmark, "~> 1.4.14" },
-      {:esbuild,"~> 0.4.0", runtime: Mix.env() == :dev},
-      {:tailwind, "~> 0.1.5", runtime: Mix.env() == :dev}
+      {:earmark, "~> 1.4.14"},
+      {:esbuild, "~> 0.4.0", runtime: Mix.env() == :dev},
+      {:tailwind, "~> 0.1.5", runtime: Mix.env() == :dev},
+      {:scrivener_ecto, "~> 2.7.0"}
     ]
   end
 

lib/brasil_em_dados_web/live/blog_live/tag.html.heex

@@ -21,6 +21,7 @@
   "html_entities": {:hex, :html_entities, "0.5.1", "1c9715058b42c35a2ab65edc5b36d0ea66dd083767bef6e3edb57870ef556549", [:mix], [], "hexpm", "30efab070904eb897ff05cd52fa61c1025d7f8ef3a9ca250bc4e6513d16c32de"},
   "jason": {:hex, :jason, "1.3.0", "fa6b82a934feb176263ad2df0dbd91bf633d4a46ebfdffea0c8ae82953714946", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "53fc1f51255390e0ec7e50f9cb41e751c260d065dcba2bf0d08dc51a4002c2ac"},
   "mime": {:hex, :mime, "2.0.2", "0b9e1a4c840eafb68d820b0e2158ef5c49385d17fb36855ac6e7e087d4b1dcc5", [:mix], [], "hexpm", "e6a3f76b4c277739e36c2e21a2c640778ba4c3846189d5ab19f97f126df5f9b7"},
+  "paginator": {:hex, :paginator, "1.1.0", "e502a91b08d14a6c8319f86eae027e67b0c699ffca4d76afbcb43eea5f32cd53", [:mix], [{:ecto, "~> 3.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:ecto_sql, "~> 3.0", [hex: :ecto_sql, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:postgrex, "~> 0.13", [hex: :postgrex, repo: "hexpm", optional: true]}], "hexpm", "b484f533b4a157ff60df7c988c9ef04e9c64e1f96e74a48a700717517a1ba5d9"},
   "phoenix": {:hex, :phoenix, "1.6.6", "281c8ce8dccc9f60607346b72cdfc597c3dde134dd9df28dff08282f0b751754", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.0", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 1.0", [hex: :phoenix_view, repo: "hexpm", optional: false]}, {:plug, "~> 1.10", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.2", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "807bd646e64cd9dc83db016199715faba72758e6db1de0707eef0a2da4924364"},
   "phoenix_ecto": {:hex, :phoenix_ecto, "4.4.0", "0672ed4e4808b3fbed494dded89958e22fb882de47a97634c0b13e7b0b5f7720", [:mix], [{:ecto, "~> 3.3", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "09864e558ed31ee00bd48fcc1d4fc58ae9678c9e81649075431e69dbabb43cc1"},
   "phoenix_html": {:hex, :phoenix_html, "3.2.0", "1c1219d4b6cb22ac72f12f73dc5fad6c7563104d083f711c3fcd8551a1f4ae11", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "36ec97ba56d25c0136ef1992c37957e4246b649d620958a1f9fa86165f8bc54f"},
@@ -35,6 +36,8 @@
   "plug_crypto": {:hex, :plug_crypto, "1.2.2", "05654514ac717ff3a1843204b424477d9e60c143406aa94daf2274fdd280794d", [:mix], [], "hexpm", "87631c7ad914a5a445f0a3809f99b079113ae4ed4b867348dd9eec288cecb6db"},
   "postgrex": {:hex, :postgrex, "0.16.1", "f94628a32c571266f53cd1e5fca705e626e2417bf1eee6f868985d14e874160a", [:mix], [{:connection, "~> 1.1", [hex: :connection, repo: "hexpm", optional: false]}, {:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm", "6b225df32c857b9430619dbe30200a7ae664e23415a771ae9209396ee8eeee64"},
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
+  "scrivener": {:hex, :scrivener, "2.7.2", "1d913c965ec352650a7f864ad7fd8d80462f76a32f33d57d1e48bc5e9d40aba2", [:mix], [], "hexpm", "7866a0ec4d40274efbee1db8bead13a995ea4926ecd8203345af8f90d2b620d9"},
+  "scrivener_ecto": {:hex, :scrivener_ecto, "2.7.0", "cf64b8cb8a96cd131cdbcecf64e7fd395e21aaa1cb0236c42a7c2e34b0dca580", [:mix], [{:ecto, "~> 3.3", [hex: :ecto, repo: "hexpm", optional: false]}, {:scrivener, "~> 2.4", [hex: :scrivener, repo: "hexpm", optional: false]}], "hexpm", "e809f171687806b0031129034352f5ae44849720c48dd839200adeaf0ac3e260"},
   "tailwind": {:hex, :tailwind, "0.1.5", "5561bed6c114434415077972f6d291e7d43b258ef0ee756bda1ead7293811f61", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "3be21a0ddec7fc29b323ee72bed7516078a2787f7b142e455698a2209296e2a5"},
   "telemetry": {:hex, :telemetry, "0.4.3", "a06428a514bdbc63293cd9a6263aad00ddeb66f608163bdec7c8995784080818", [:rebar3], [], "hexpm", "eb72b8365ffda5bed68a620d1da88525e326cb82a75ee61354fc24b844768041"},
   "telemetry_metrics": {:hex, :telemetry_metrics, "0.6.1", "315d9163a1d4660aedc3fee73f33f1d355dcc76c5c3ab3d59e76e3edf80eef1f", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7be9e0871c41732c233be71e4be11b96e56177bf15dde64a8ac9ce72ac9834c6"},