feat: add movies pagination

Author: trueChazza

lib/media_server/paginater.ex

@@ -0,0 +1,45 @@
+defimpl Scrivener.Paginater, for: List do
+  # An implementation of the `Scrivener.Paginater` protocol to extend `Scrivener.Paginater.paginate/2`
+  alias Scrivener.Config
+  alias Scrivener.Page
+
+  @doc ~s"""
+  Implementation of `Scrivener.Paginater` protocol to extend the `Scrivener.Paginater.paginate/2` function.
+  """
+  @spec paginate(any, map | Keyword.t()) :: Scrivener.Page.t()
+  def paginate(entries, %Config{page_number: page_number, page_size: page_size}) do
+    total_entries = length(entries)
+
+    %Page{
+      page_size: page_size,
+      page_number: page_number,
+      entries: entries(entries, page_number, page_size),
+      total_entries: total_entries,
+      total_pages: total_pages(total_entries, page_size)
+    }
+  end
+
+  defp entries(entries, page_number, page_size) do
+    offset = page_size * (page_number - 1)
+    Enum.slice(entries, offset, page_size)
+  end
+
+  defp total_pages(total_entries, page_size) do
+    ceiling(total_entries / page_size)
+  end
+
+  defp ceiling(float) do
+    t = trunc(float)
+
+    case float - t do
+      neg when neg < 0 ->
+        t
+
+      pos when pos > 0 ->
+        t + 1
+
+      _ ->
+        t
+    end
+  end
+end

lib/media_server_web/components/pagination_component.ex

@@ -0,0 +1,37 @@
+defmodule MediaServerWeb.Components.PaginationComponent do
+  use Phoenix.Component
+
+  def render(assigns) do
+    ~H"""
+    <nav class="bg-gray-50 mt-12 py-3 flex items-center justify-between border-t border-gray-200 bottom-0 sticky pb-4">
+
+      <div class="hidden sm:block">
+        <p class="text-sm text-gray-700">
+          Showing
+          <span class="font-medium"><%= assigns.page_number %></span>
+          of
+          <span class="font-medium"><%= assigns.total_pages %></span>
+          pages
+        </p>
+      </div>
+
+      <div class="flex-1 flex justify-between sm:justify-end">
+
+        <div>
+          <%= if assigns.page_number > 1 do %>
+            <%= live_redirect to: assigns.previous_link, class: "relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50" do %>
+              Previous
+            <% end %>
+          <% end %>
+        </div>
+
+        <%= if assigns.page_number !== assigns.total_pages do %>
+          <%= live_redirect to: assigns.next_link, class: "ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50" do %>
+            Next
+          <% end %>
+        <% end %>
+      </div>
+    </nav>
+    """
+  end
+end

lib/media_server_web/helpers.ex

@@ -6,4 +6,12 @@ defmodule MediaServerWeb.Helpers do
   def percentage_complete_from_seconds(current_time, duration) do
     current_time / duration * 100
   end
+
+  def get_pagination_previous_link(page_number) do
+    page_number - 1
+  end
+
+  def get_pagination_next_link(page_number, total_pages) do
+    page_number + 1
+  end
 end

lib/media_server_web/live/movies_live/index.ex

@@ -4,12 +4,21 @@ defmodule MediaServerWeb.MoviesLive.Index do
   alias MediaServerWeb.Repositories.Movies
 
   @impl true
+  def handle_params(%{"page" => page}, _url, socket) do
+    {
+      :noreply,
+      socket
+      |> assign(:page_title, "Movies")
+      |> assign(:movies, Scrivener.paginate(Movies.get_all(), %{"page" => page, "page_size" => "50"}))
+    }
+  end
+
   def handle_params(_params, _url, socket) do
     {
       :noreply,
       socket
       |> assign(:page_title, "Movies")
-      |> assign(:movies, Movies.get_all())
+      |> assign(:movies, Scrivener.paginate(Movies.get_all(), %{"page" => "1", "page_size" => "50"}))
     }
   end
 end

lib/media_server_web/live/movies_live/index.html.heex

@@ -22,5 +22,12 @@
         }) %>
 
       <% end %>
-</div>
+    </div>
+
+    <%= MediaServerWeb.Components.PaginationComponent.render(%{
+        page_number: @movies.page_number,
+        total_pages: @movies.total_pages,
+        previous_link: Routes.movies_index_path(@socket, :index, page: MediaServerWeb.Helpers.get_pagination_previous_link(@movies.page_number)),
+        next_link: Routes.movies_index_path(@socket, :index, page: MediaServerWeb.Helpers.get_pagination_next_link(@movies.page_number, @movies.total_pages))
+    }) %>
 </div>

mix.exs

@@ -55,7 +55,8 @@ defmodule MediaServer.MixProject do
       {:httpoison, "~> 1.8"},
       {:excoveralls, "~> 0.10", only: :test},
       {:tailwind, "~> 0.1", runtime: Mix.env() == :dev},
-      {:cors_plug, "~> 3.0"}
+      {:cors_plug, "~> 3.0"},
+      {:scrivener, "~> 2.0"}
     ]
   end
 

mix.lock

@@ -43,6 +43,7 @@
   "rambo": {:hex, :rambo, "0.3.4", "8962ac3bd1a633ee9d0e8b44373c7913e3ce3d875b4151dcd060886092d2dce7", [:mix], [], "hexpm", "0cc54ed089fbbc84b65f4b8a774224ebfe60e5c80186fafc7910b3e379ad58f1"},
   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
   "reverse_proxy_plug": {:hex, :reverse_proxy_plug, "2.1.0", "29be90880c1f5ccbcc10ff40ba553ba150b4341a3d76b5945f42433283fc445c", [:mix], [{:cowboy, "~> 2.4", [hex: :cowboy, repo: "hexpm", optional: false]}, {:httpoison, "~> 1.2", [hex: :httpoison, repo: "hexpm", optional: true]}, {:plug, "~> 1.6", [hex: :plug, repo: "hexpm", optional: false]}, {:tesla, "~> 1.4", [hex: :tesla, repo: "hexpm", optional: true]}], "hexpm", "698305ad5ecc410cd81be5c2e4580c623321264abf6f1e8e23a41ae5d78ca108"},
+  "scrivener": {:hex, :scrivener, "2.7.2", "1d913c965ec352650a7f864ad7fd8d80462f76a32f33d57d1e48bc5e9d40aba2", [:mix], [], "hexpm", "7866a0ec4d40274efbee1db8bead13a995ea4926ecd8203345af8f90d2b620d9"},
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.6", "cf344f5692c82d2cd7554f5ec8fd961548d4fd09e7d22f5b62482e5aeaebd4b0", [:make, :mix, :rebar3], [], "hexpm", "bdb0d2471f453c88ff3908e7686f86f9be327d065cc1ec16fa4540197ea04680"},
   "swoosh": {:hex, :swoosh, "1.6.4", "ce3a4bf3e5276fd114178ebc5ed072ee0c177a7b3a09e5992aa005778ac143c2", [:mix], [{:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "ad4c8b534812433730b6241a1d9df38b1da75fdfa340f51887a31d7e9343fffe"},
   "tailwind": {:hex, :tailwind, "0.1.5", "5561bed6c114434415077972f6d291e7d43b258ef0ee756bda1ead7293811f61", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "3be21a0ddec7fc29b323ee72bed7516078a2787f7b142e455698a2209296e2a5"},

priv/static/assets/app.css

@@ -658,6 +658,11 @@ select {
   position: relative;
 }
 
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+}
+
 .inset-0 {
   top: 0px;
   right: 0px;
@@ -682,6 +687,10 @@ select {
   right: 0px;
 }
 
+.bottom-0 {
+  bottom: 0px;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -744,6 +753,18 @@ select {
   margin-top: 0.75rem;
 }
 
+.mt-12 {
+  margin-top: 3rem;
+}
+
+.-mt-px {
+  margin-top: -1px;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -868,6 +889,10 @@ select {
   width: 9rem;
 }
 
+.w-0 {
+  width: 0px;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1081,6 +1106,10 @@ select {
   border-bottom-width: 1px;
 }
 
+.border-t-2 {
+  border-top-width: 2px;
+}
+
 .border-slate-200 {
   --tw-border-opacity: 1;
   border-color: rgb(226 232 240 / var(--tw-border-opacity));
@@ -1095,6 +1124,16 @@ select {
   border-color: transparent;
 }
 
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+.border-slate-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(100 116 139 / var(--tw-border-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1224,6 +1263,11 @@ select {
   padding-bottom: 3rem;
 }
 
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1252,6 +1296,18 @@ select {
   padding-bottom: 4rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
+.pr-1 {
+  padding-right: 0.25rem;
+}
+
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1427,6 +1483,11 @@ select {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.hover\:border-gray-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
 .hover\:bg-gray-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -1467,6 +1528,11 @@ select {
   color: rgb(243 244 246 / var(--tw-text-opacity));
 }
 
+.hover\:text-gray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .hover\:underline:hover {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1568,6 +1634,10 @@ select {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
+  .sm\:justify-end {
+    justify-content: flex-end;
+  }
+
   .sm\:gap-6 {
     gap: 1.5rem;
   }
@@ -1582,6 +1652,11 @@ select {
     padding-right: 1.5rem;
   }
 
+  .sm\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
   .sm\:pb-32 {
     padding-bottom: 8rem;
   }
@@ -1593,6 +1668,14 @@ select {
 }
 
 @media (min-width: 768px) {
+  .md\:-mt-px {
+    margin-top: -1px;
+  }
+
+  .md\:flex {
+    display: flex;
+  }
+
   .md\:hidden {
     display: none;
   }