next button for tagged posts (#169)

No previous button because that would be annoying to implement serverside with pagination etc.

Closes #115

Fixed conflict with #154, #155, #156

Co-authored-by: video-prize-ranch <cb.8a3w5@simplelogin.co>
Reviewed-on: https://codeberg.org/rimgo/rimgo/pulls/169
Reviewed-by: video-prize-ranch <video-prize-ranch@noreply.codeberg.org>
Co-authored-by: orangix <orangix@noreply.codeberg.org>
Co-committed-by: orangix <orangix@noreply.codeberg.org>

api/tag.go

@@ -3,8 +3,8 @@ package api
 import (
 	"io"
 	"net/http"
+	"net/url"
 	"strings"
-	"sync"
 
 	"github.com/patrickmn/go-cache"
 	"github.com/tidwall/gjson"
@@ -21,6 +21,9 @@ type Tag struct {
 }
 
 func (client *Client) FetchTag(tag string, sort string, page string) (Tag, error) {
+	// Dots are automatically removed on Imgur, so more cache hits
+	tag = strings.ReplaceAll(tag, ".", "")
+
 	cacheData, found := client.Cache.Get(tag + sort + page + "-tag")
 	if found {
 		return cacheData.(Tag), nil
@@ -64,47 +67,44 @@ func (client *Client) FetchTag(tag string, sort string, page string) (Tag, error
 
 	data := gjson.Parse(string(body))
 
-	wg := sync.WaitGroup{}
 	posts := make([]Submission, 0)
 	data.Get("posts").ForEach(
 		func(key, value gjson.Result) bool {
-			wg.Add(1)
+			url, _ := url.Parse(strings.ReplaceAll(value.Get("url").String(), "https://imgur.com", ""))
+			q := url.Query()
+			q.Add("tag", tag+"."+sort+"."+page+"."+key.String())
+			url.RawQuery = q.Encode()
 
-			go func() {
-				defer wg.Done()
-				posts = append(posts, Submission{
-					Id:    value.Get("id").String(),
-					Title: value.Get("title").String(),
-					Link:  strings.ReplaceAll(value.Get("url").String(), "https://imgur.com", ""),
-					Cover: Media{
-						Id:   value.Get("cover_id").String(),
-						Type: value.Get("cover.type").String(),
-						Url:  strings.ReplaceAll(value.Get("cover.url").String(), "https://i.imgur.com", ""),
-					},
-					Points:    value.Get("point_count").Int(),
-					Upvotes:   value.Get("upvote_count").Int(),
-					Downvotes: value.Get("downvote_count").Int(),
-					Comments:  value.Get("comment_count").Int(),
-					Views:     value.Get("view_count").Int(),
-					IsAlbum:   value.Get("is_album").Bool(),
-				})
-			}()
+			posts = append(posts, Submission{
+				Id:    value.Get("id").String(),
+				Title: value.Get("title").String(),
+				Link:  url.String(),
+				Cover: Media{
+					Id:   value.Get("cover_id").String(),
+					Type: value.Get("cover.type").String(),
+					Url:  strings.ReplaceAll(value.Get("cover.url").String(), "https://i.imgur.com", ""),
+				},
+				Points:    value.Get("point_count").Int(),
+				Upvotes:   value.Get("upvote_count").Int(),
+				Downvotes: value.Get("downvote_count").Int(),
+				Comments:  value.Get("comment_count").Int(),
+				Views:     value.Get("view_count").Int(),
+				IsAlbum:   value.Get("is_album").Bool(),
+			})
 
 			return true
 		},
 	)
 
-	wg.Wait()
-
 	tagData := Tag{
-		Tag:          tag,
-		Display:      data.Get("display").String(),
-		Sort:         sort,
-		PostCount:    data.Get("post_count").Int(),
-		Posts:        posts,
-		Background:   "/" + data.Get("background_id").String() + ".webp",
+		Tag:        tag,
+		Display:    data.Get("display").String(),
+		Sort:       sort,
+		PostCount:  data.Get("post_count").Int(),
+		Posts:      posts,
+		Background: "/" + data.Get("background_id").String() + ".webp",
 	}
 
-	client.Cache.Set(tag + sort + page + "-tag", tagData, cache.DefaultExpiration)
+	client.Cache.Set(tag+sort+page+"-tag", tagData, 4*cache.DefaultExpiration)
 	return tagData, nil
 }

pages/post.go

@@ -3,6 +3,7 @@ package pages
 import (
 	"crypto/rand"
 	"fmt"
+	"strconv"
 	"strings"
 
 	"codeberg.org/rimgo/rimgo/api"
@@ -10,6 +11,27 @@ import (
 	"github.com/gofiber/fiber/v2"
 )
 
+// Cursed function
+func nextInTag(client *api.Client, tagname, sort, page, I string) string {
+	i, err := strconv.Atoi(I)
+	if err != nil || i < 0 {
+		return ""
+	}
+	tag, err := client.FetchTag(tagname, sort, page)
+	if err != nil {
+		return ""
+	}
+	if i >= len(tag.Posts)-1 {
+		pageNumber, _ := strconv.Atoi(page)
+		tagn, err := client.FetchTag(tagname, sort, strconv.Itoa(pageNumber+1))
+		if err != nil {
+			return ""
+		}
+		return tagn.Posts[0].Link
+	}
+	return tag.Posts[i+1].Link
+}
+
 func HandlePost(c *fiber.Ctx) error {
 	utils.SetHeaders(c)
 	c.Set("X-Frame-Options", "DENY")
@@ -56,8 +78,16 @@ func HandlePost(c *fiber.Ctx) error {
 	}
 	c.Set("Content-Security-Policy", csp)
 
+	var next string
+	tagParam := strings.Split(c.Query("tag"), ".")
+	if len(tagParam) == 4 {
+		tag, sort, page, index := tagParam[0], tagParam[1], tagParam[2], tagParam[3]
+		next = nextInTag(ApiClient, tag, sort, page, index)
+	}
+
 	return c.Render("post", fiber.Map{
 		"post":     post,
+		"next":     next,
 		"comments": comments,
 		"nonce":    nonce,
 	})

views/post.hbs

@@ -25,31 +25,38 @@
   </header>
 
   <main>
-    <div class="flex flex-col gap-2 md:flex-row md:gap-4 md:items-center my-4">
-      {{#if post.User.Username}}
-      <a href="/user/{{post.User.Username}}" class="flex gap-2 items-center">
-        <img src="{{post.User.Avatar}}" class="rounded-full" width="36" height="36" />
-        <p>
-          <b>{{post.User.Username}}</b>
-        </p>
-      </a>
-      {{/if}}
-      <div class="flex gap-2 items-center">
-        <div class="flex flex-center gap-2">
-          <img class="icon invert" src="/static/icons/PhEye.svg" alt="Views" width="24px" height="24px">
-          <p>{{post.Views}}</p>
-        </div>
-        {{#if post.SharedWithCommunity}}
-        <div class="flex flex-center gap-2">
-          <img class="icon invert" src="/static/icons/PhArrowFatUp.svg" alt="Likes" width="24px" height="24px">
-          <p>{{post.Upvotes}}</p>
-        </div>
-        <div class="flex flex-center gap-2">
-          <img class="icon invert" src="/static/icons/PhArrowFatDown.svg" alt="Dislikes" width="24px" height="24px">
-          <p>{{post.Downvotes}}</p>
-        </div>
+    <div class="flex flex-col sm:flex-row my-4 w-full justify-between">
+      <div class="flex flex-col gap-2 md:flex-row md:gap-4 md:items-center">
+        {{#if post.User.Username}}
+        <a href="/user/{{post.User.Username}}" class="flex gap-2 items-center">
+          <img src="{{post.User.Avatar}}" class="rounded-full" width="36" height="36" />
+          <p>
+            <b>{{post.User.Username}}</b>
+          </p>
+        </a>
         {{/if}}
+        <div class="flex gap-2 items-center">
+          <div class="flex flex-center gap-2">
+            <img class="icon invert" src="/static/icons/PhEye.svg" alt="Views" width="24px" height="24px">
+            <p>{{post.Views}}</p>
+          </div>
+          {{#if post.SharedWithCommunity}}
+          <div class="flex flex-center gap-2">
+            <img class="icon invert" src="/static/icons/PhArrowFatUp.svg" alt="Likes" width="24px" height="24px">
+            <p>{{post.Upvotes}}</p>
+          </div>
+          <div class="flex flex-center gap-2">
+            <img class="icon invert" src="/static/icons/PhArrowFatDown.svg" alt="Dislikes" width="24px" height="24px">
+            <p>{{post.Downvotes}}</p>
+          </div>
+          {{/if}}
+        </div>
       </div>
+      {{#noteq next ""}}
+      <a href="{{next}}" class="self-end">
+        <button class="p-2 rounded-lg bg-slate-600">Next &gt;</button>
+      </a>
+      {{/noteq}}
     </div>
 
     <div class="flex flex-center flex-col break-words">
@@ -70,7 +77,7 @@
       {{#if this.Description}}
       <p>{{{this.Description}}}</p>
       {{/if}}
-    {{/each}}
+      {{/each}}
     </div>
 
     {{#if post.tags}}
@@ -101,7 +108,8 @@
     {{#if comments}}
     <div>
       <input id="comments__expandBtn" type="checkbox" checked>
-      <label class="comments__expandBtn__label my-2 py-4 border-solid border-t-2 border-slate-400" for="comments__expandBtn">
+      <label class="comments__expandBtn__label my-2 py-4 border-solid border-t-2 border-slate-400"
+        for="comments__expandBtn">
         <h3 class="text-xl font-bold">Comments ({{post.Comments}})</h3>
         <span class="text-xl font-bold"></span>
       </label>