implement frontend pagination

Amolith created 

note: going from the first page to the last page doesn't work right now

Change summary

helperfuncs.go                    | 16 +++++++++++++---
root.go                           |  8 ++++++++
templates/home_authenticated.html | 10 +++++++++-
3 files changed, 30 insertions(+), 4 deletions(-)

Detailed changes

helperfuncs.go 🔗 

@@ -153,19 +153,29 @@ func (m model) authenticated(links map[string]string) string {
 	linksKeys := maps.Keys(links)
 	slices.Sort(linksKeys)
 
+	type pageData struct {
+		Table string // HTML Table inserted to home page
+		Start string // Start
+		End   string
+	}
+
+	var homePage pageData
+
 	// And ranging through the keys to pull ordered values from the map
-	var table string
 	for _, k := range linksKeys {
 		v := links[k]
-		table = table + fmt.Sprintf(`<tr>
+		homePage.Table = homePage.Table + fmt.Sprintf(`<tr>
 	<td><p>%s</p></td>
 	<td><p>%s</p></td>
 	<td><a class="button" href="/?action=edit&name=%s&url=%s">Edit</a><a class="button" href="/?action=delete&name=%s">Delete</a></td>
 </tr>`, k, v, k, url.QueryEscape(string(v)), k)
 	}
 
+	homePage.Start = linksKeys[0]
+	homePage.End = linksKeys[len(linksKeys)-1]
+
 	page := new(strings.Builder)
-	err = tmpl.Execute(page, table)
+	err = tmpl.Execute(page, homePage)
 	if err != nil {
 		log.Println(err)
 	}

root.go 🔗 

@@ -79,6 +79,14 @@ func (m model) root(writer http.ResponseWriter, request *http.Request) {
 			return
 		}
 
+		if len(links) == 0 {
+			links, err = m.read("", "", count)
+			if err != nil {
+				http.Error(writer, err.Error(), 400)
+				return
+			}
+		}
+
 		_, err = io.WriteString(writer, m.authenticated(links))
 		if err != nil {
 			log.Println(err)

templates/home_authenticated.html 🔗 

@@ -83,6 +83,9 @@
          .links_table {
              overflow: scroll;
          }
+         .pagination {
+             margin: 35px 0;
+         }
         </style>
     </head>
     <body>
@@ -104,8 +107,13 @@
                 <th>Short link</th>
                 <th>Long link</th>
                 <th>Actions</th>
-                {{ . }}
+                {{ .Table }}
             </table>
         </div>
+        <div class="pagination">
+            <p>
+            <a class="button" href="/?count=15&start={{ .Start }}">←</a> | <a class="button" href="/?count=15&end={{ .End }}">→</a>
+            </p>
+        </div>
     </body>
 </html>