feat: infinite scroll

16-countries-page-from-api/src/main/resources/templates/index.html

@@ -25,9 +25,11 @@
     >
       <h1 class="font-bold">Where in the world?</h1>
       <div class="flex flex-row gap-x-2">
-        <img src="../public/icons/half-moon-shape-svgrepo-com.svg"
-             class="w-4"
-             alt="" />
+        <img
+          src="../public/icons/half-moon-shape-svgrepo-com.svg"
+          class="w-4"
+          alt=""
+        />
         <p>Dark Mode</p>
       </div>
     </header>
@@ -42,10 +44,12 @@
       >
         <div class="flex flex-row bg-white shadow-md h-14 rounded-lg">
           <!-- <p class="w-16 grid place-content-center">IC</p> -->
-          <img src="../public/icons/search-svgrepo-com.svg"
-               th:src="@{~/public/icons/search-svgrepo-com.svg}"
-               class="w-6 mx-5"
-               alt="" />
+          <img
+            src="../public/icons/search-svgrepo-com.svg"
+            th:src="@{~/public/icons/search-svgrepo-com.svg}"
+            class="w-6 mx-5"
+            alt=""
+          />
           <input
             class="appearance-none flex-grow focus:outline-none mr-2"
             type="text"
@@ -99,7 +103,6 @@
     <main
       class="flex flex-col items-center gap-10 pb-8"
       id="countries-main-list"
-      th:remove="all-but-first"
       th:fragment="countries-main (countriesList)"
     >
       <article
@@ -141,10 +144,19 @@
           </section>
         </a>
       </article>
+      <div
+        th:if="${nextPage != -1}"
+        id="next-page-anchor"
+        hx-trigger="revealed"
+        th:hx-get="@{~/(region=${selectedRegion},page=${nextPage})}"
+        hx-swap="outerHTML"
+        hx-select="#countries-main-list"
+      ></div>
 
       <article
         id="usa"
         class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
+        th:remove="all"
       >
         <img
           src="https://flagcdn.com/us.svg"
@@ -173,6 +185,7 @@
       <article
         id="Brazil"
         class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
+        th:remove="all"
       >
         <img
           src="https://flagcdn.com/br.svg"

16-countries-page-from-api/src/main/scala/example/Routes.scala

@@ -30,18 +30,28 @@ case class Routes(countries: List[Country])(implicit
   }
   val engine: TemplateEngine = buildTemplateEngine()
 
+  private val pageSize = 10
+
   @cask.get("/")
-  def indexPage(region: Option[String] = None) = {
+  def indexPage(region: Option[String] = None, page: Int = 0) = {
     val context = new Context()
 
     val regions = countries.map(_.region).distinct.sorted.asJava
     val selectedCountries = region match {
       case None                 => countries
+      case Some("")             => countries
       case Some(selectedRegion) => countries.filter(_.region == selectedRegion)
     }
 
+    val startIndex = page * pageSize
+    val countriesPage =
+      selectedCountries.slice(startIndex, startIndex + pageSize)
+    // if current page is not full - there will be no next page
+    val nextPage = if (countriesPage.length == pageSize) page + 1 else -1
+    context.setVariable("nextPage", nextPage)
+
     context.setVariable("regionsSet", regions)
-    context.setVariable("countriesList", selectedCountries.asJava)
+    context.setVariable("countriesList", countriesPage.asJava)
     context.setVariable("allCountriesList", countries.asJava)
     context.setVariable("selectedRegion", region.getOrElse(""))
 
@@ -60,7 +70,8 @@ case class Routes(countries: List[Country])(implicit
         context.setVariable("country", selectedCountry)
         val borderCountries = countries
           .filter(c => selectedCountry.borders.contains(c.alpha3Code))
-          .map(_.name).asJava
+          .map(_.name)
+          .asJava
 
         context.setVariable("borderCountries", borderCountries)