From a912e64f6db4d8cd27a5dd2165a5e7c3e00f2d43 Mon Sep 17 00:00:00 2001
From: neon_arch <mustafadhuleb53@gmail.com>
Date: Wed, 3 May 2023 21:31:52 +0300
Subject: [PATCH] add previous and next button to navigate to different pages

---
 public/static/pagination.js     | 26 ++++++++++++++++++++++++++
 public/static/themes/simple.css | 20 ++++++++++++++++++++
 public/templates/search.html    | 31 ++++++++++++++++++-------------
 3 files changed, 64 insertions(+), 13 deletions(-)
 create mode 100644 public/static/pagination.js

diff --git a/public/static/pagination.js b/public/static/pagination.js
new file mode 100644
index 0000000..12c568f
--- /dev/null
+++ b/public/static/pagination.js
@@ -0,0 +1,26 @@
+function navigate_forward() {
+    const url = new URL(window.location)
+    const searchParams = url.searchParams
+
+    let q = searchParams.get('q')
+    let page = searchParams.get('page')
+
+    if (page === null) {
+        page = 2
+        window.location = `${url.origin}${url.pathname}?q=${q}&page=${page}`
+    } else {
+        window.location = `${url.origin}${url.pathname}?q=${q}&page=${++page}`
+    }
+}
+
+function navigate_backward() {
+    const url = new URL(window.location)
+    const searchParams = url.searchParams
+
+    let q = searchParams.get('q')
+    let page = searchParams.get('page')
+
+    if (page !== null && page > 1) {
+        window.location = `${url.origin}${url.pathname}?q=${q}&page=${--page}`
+    }
+}
diff --git a/public/static/themes/simple.css b/public/static/themes/simple.css
index b5e80e9..97643e8 100644
--- a/public/static/themes/simple.css
+++ b/public/static/themes/simple.css
@@ -240,3 +240,23 @@ footer {
 .error_content p a:hover {
   color: var(--5);
 }
+
+.page_navigation {
+  padding: 0 0 2rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.page_navigation button {
+  background: var(--bg);
+  color: var(--fg);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  outline: none;
+  border: none;
+}
+
+.page_navigation button:active {
+  filter: brightness(1.2);
+}
diff --git a/public/templates/search.html b/public/templates/search.html
index c40e917..e1f952b 100644
--- a/public/templates/search.html
+++ b/public/templates/search.html
@@ -1,20 +1,25 @@
 {{>header this.style}}
 <main class="results">
-    {{>search_bar}}
-    <div class="results_aggregated">
-        {{#each results}}
-        <div class="result">
-            <h1><a href="{{this.visitingUrl}}">{{{this.title}}}</a></h1>
-            <small>{{this.url}}</small>
-            <p>{{{this.description}}}</p>
-            <div class="upstream_engines">
-                {{#each engine}}
-                <span>{{this}}</span>
-                {{/each}}
-            </div>
-        </div>
+  {{>search_bar}}
+  <div class="results_aggregated">
+    {{#each results}}
+    <div class="result">
+      <h1><a href="{{this.visitingUrl}}">{{{this.title}}}</a></h1>
+      <small>{{this.url}}</small>
+      <p>{{{this.description}}}</p>
+      <div class="upstream_engines">
+        {{#each engine}}
+        <span>{{this}}</span>
         {{/each}}
+      </div>
     </div>
+    {{/each}}
+  </div>
+  <div class="page_navigation">
+    <button type="button" onclick="navigate_backward()">&#8592; previous</button>
+    <button type="button" onclick="navigate_forward()">next &#8594;</button>
+  </div>
 </main>
 <script src="static/index.js"></script>
+<script src="static/pagination.js"></script>
 {{>footer}}