Add Pagination to Package Search Results (#1657)

src/ocamlorg_frontend/components/pagination.eml

@@ -1,36 +1,39 @@
-let link ~base_url ~page ~current =
+let paginated_href ~base_url ~page ~query =
+  base_url ^ "?p=" ^ string_of_int page ^ (if query = "" then "" else "&q=" ^ query)
+
+let link ~base_url ~page ~current ~query =
   let active_class = "border-2 border-current text-primary-600" in
   let non_active_class = "border border-body-100 text-lighter hover:bg-gray-50 hover:no-underline" in
-  <a href="<%s base_url %>?p=<%i page %>"
+  <a href="<%s (paginated_href ~base_url ~page ~query) %>"
     class="w-10 h-10 lg:w-14 lg:h-14 rounded-lg flex items-center justify-center <%s if page = current then active_class else non_active_class %>">
     <%i page %>
   </a>
 
-let left_arrow ~base_url page =
-  <a href="<%s base_url %>?p=<%i page - 1 %>"
+let left_arrow ~base_url page ~query=
+  <a href="<%s (paginated_href ~base_url ~page:(page - 1) ~query) %>"
     class="w-10 h-10 lg:w-14 lg:h-14  border border-body-100 rounded-lg flex items-center justify-center text-lighter hover:bg-gray-50 hover:no-underline">
     <%s! Icons.chevron_left "h-5 w-5" %>
   </a>
 
-let right_arrow ~base_url page =
-  <a href="<%s base_url %>?p=<%i page + 1 %>"
+let right_arrow ~base_url page ~query=
+  <a href="<%s (paginated_href ~base_url ~page:(page + 1) ~query) %>"
     class="w-10 h-10 lg:w-14 lg:h-14  border border-body-100 rounded-lg flex items-center justify-center text-lighter hover:bg-gray-50 hover:no-underline">
     <%s! Icons.chevron_right "h-5 w-5" %>
   </a>
 
-let render ~total_page_count ~page_number ~base_url =
+let render ~total_page_count ~page_number ~base_url ~query=
   <div class="pt-16 flex items-center justify-center space-x-2.5">
-    <%s! if page_number != 1 then (left_arrow ~base_url page_number) else "" %>
-    <%s! link ~base_url ~page:1 ~current:page_number %>
+    <%s! if page_number != 1 then (left_arrow ~base_url page_number ~query) else "" %>
+    <%s! link ~base_url ~page:1 ~current:page_number ~query %>
     <% if page_number >= 4 then ( %>
     <span class="w-10 h-10 lg:w-14 lg:h-14 border-body-100 rounded-lg flex items-center justify-center text-lighter hover:no-underline">...</span>
     <% ); %>
     <% for page = 2 to (total_page_count - 1) do %>
-    <%s! if (abs (page_number - page) <= 1) || (page_number = 1 && page = 3) || (page_number = total_page_count && total_page_count - page = 2) then (link ~base_url ~page ~current:page_number) else "" %>
+    <%s! if (abs (page_number - page) <= 1) || (page_number = 1 && page = 3) || (page_number = total_page_count && total_page_count - page = 2) then (link ~base_url ~page ~current:page_number ~query) else "" %>
     <% done; %>
     <% if total_page_count - page_number >= 3 then ( %>
     <span class="w-10 h-10 lg:w-14 lg:h-14 border-body-100 rounded-lg flex items-center justify-center text-lighter hover:no-underline">...</span>
     <% ); %>
-    <%s! link ~base_url ~page:total_page_count ~current:page_number %>
-    <%s! if page_number != total_page_count then (right_arrow ~base_url page_number) else "" %>
+    <%s! link ~base_url ~page:total_page_count ~current:page_number ~query %>
+    <%s! if page_number != total_page_count then (right_arrow ~base_url page_number ~query) else "" %>
   </div>

src/ocamlorg_frontend/pages/blog.eml

@@ -64,7 +64,7 @@ Layout.render
                     </div>
                     <% ); %>
 
-                    <%s! Pagination.render ~total_page_count:planet_pages_number ~page_number:planet_page ~base_url:Url.blog %>
+                    <%s! Pagination.render ~total_page_count:planet_pages_number ~page_number:planet_page ~base_url:Url.blog ~query:""%>
                 </div>
             </div>
             <div class="lg:pl-16 space-y-12">

src/ocamlorg_frontend/pages/packages_search.eml

@@ -1,4 +1,4 @@
-let render ~total ~search (packages : Package.package list) = Layout.render ~title:"OCaml Packages · Search Result"
+let render ~total ~search ~page ~number_of_pages (packages : Package.package list) = Layout.render ~title:"OCaml Packages · Search Result"
 ~description:"Find the package you need to build your application in the thousands of available OCaml packages."
 ~canonical:(Url.packages_search ^ "?q=" ^ search)
 ~active_top_nav_item:Header.Packages @@
@@ -42,6 +42,9 @@ let render ~total ~search (packages : Package.package list) = Layout.render ~tit
         </div>
 
         <% if List.length packages > 0 then ( %>
+          <div class="text-lighter mb-4">
+            Showing <%i ((page - 1) * 50 + 1) %> - <%i (min (page * 50) total) %>
+          </div>
         <ol class="flex flex-col">
           <% packages |> List.iter (fun (package : Package.package) -> %>
           <li class="border-gray-200 border-b py-3 space-y-2">
@@ -111,6 +114,7 @@ let render ~total ~search (packages : Package.package list) = Layout.render ~tit
           <% ); %>
         </ol>
         <% ); %>
+        <%s! Pagination.render ~total_page_count:number_of_pages ~page_number:page ~base_url:Url.packages_search ~query:search %>
       </div>
     </div>
   </div>

src/ocamlorg_web/lib/handler.ml

@@ -589,17 +589,23 @@ let is_author_match name pattern =
       match_opt (Some name) || match_opt email || match_opt github_username
 
 let packages_search t req =
-  match Dream.query req "q" with
-  | Some search ->
-      let packages =
+  let packages =
+    match Dream.query req "q" with
+    | Some search ->
         Ocamlorg_package.search ~is_author_match ~sort_by_popularity:true t
           search
-      in
-      let total = List.length packages in
-      let results = List.map (Package_helper.frontend_package t) packages in
-      let search = Dream.from_percent_encoded search in
-      Dream.html (Ocamlorg_frontend.packages_search ~total ~search results)
-  | None -> Dream.redirect req Url.packages
+    | None -> Ocamlorg_package.all_latest t
+  in
+  let total = List.length packages in
+  let page, number_of_pages, current_items = paginate ~req ~n:50 packages in
+  let search =
+    Dream.from_percent_encoded
+      (match Dream.query req "q" with Some search -> search | None -> "")
+  in
+  let results = List.map (Package_helper.frontend_package t) current_items in
+  Dream.html
+    (Ocamlorg_frontend.packages_search ~total ~search ~page ~number_of_pages
+       results)
 
 let packages_autocomplete_fragment t req =
   match Dream.query req "q" with