From 07aa3390d0858b44a3f41dd7160dbf18d177dc0a Mon Sep 17 00:00:00 2001
From: perennial <mail@perennialte.ch>
Date: Fri, 4 Oct 2024 21:41:35 +1000
Subject: [PATCH] htmx for user actions

---
 assets/views/fragments/artwork.jet.html | 10 +++++++---
 server/middleware/router.go             |  6 +++---
 server/routes/actions.go                | 24 ++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/assets/views/fragments/artwork.jet.html b/assets/views/fragments/artwork.jet.html
index 3948c88..935134c 100644
--- a/assets/views/fragments/artwork.jet.html
+++ b/assets/views/fragments/artwork.jet.html
@@ -61,25 +61,29 @@
         <!-- Bookmark and like buttons -->
         <!-- TODO: there's probably a way to align these buttons along the top of the card *without breakage* -->
         <div class="col-12 col-xl-4 d-flex justify-content-start justify-content-xl-end align-items-center">
+          <div id="bookmark-button">
           {{- if isset(.BookmarkData) && LoggedIn }}
-          <button type="button" class="btn custom-btn-secondary bg-charcoal-surface2 text-nowrap me-2" onclick="window.location.href='/self/deleteBookmark/{{ .BookmarkID }}'">
+          <button type="button" class="btn custom-btn-secondary bg-charcoal-surface2 text-nowrap me-2" hx-post="/self/deleteBookmark/{{ .BookmarkID }}" hx-target="#bookmark-button" hx-swap="outerHTML">
             <i class="bi bi-heart-fill me-2"></i>Bookmarked
           </button>
           {{- else }}
-          <button type="button" class="btn custom-btn-secondary bg-charcoal-surface2 text-nowrap me-2" onclick="window.location.href='/self/addBookmark/{{ .ID }}'">
+          <button type="button" class="btn custom-btn-secondary bg-charcoal-surface2 text-nowrap me-2" hx-post="/self/addBookmark/{{ .ID }}" hx-target="#bookmark-button" hx-swap="outerHTML">
             <i class="bi bi-heart me-2"></i>Bookmark
           </button>
           {{- end }}
+          </div>
 
+          <div id="like-button">
           {{- if .Liked && LoggedIn}}
           <button type="button" class="btn custom-btn-secondary bg-charcoal-surface2 text-nowrap" disabled>
             <i class="bi bi-hand-thumbs-up-fill me-2"></i>Liked
           </button>
           {{- else }}
-          <button type="button" class="btn custom-btn-secondary bg-charcoal-surface2 text-nowrap" onclick="window.location.href='/self/like/{{ .ID }}'">
+          <button type="button" class="btn custom-btn-secondary bg-charcoal-surface2 text-nowrap" hx-post="/self/like/{{ .ID }}" hx-target="#like-button" hx-swap="outerHTML">
             <i class="bi bi-hand-thumbs-up me-2"></i>Like
           </button>
           {{- end }}
+          </div>
         </div>
       </div>
 
diff --git a/server/middleware/router.go b/server/middleware/router.go
index 6b73261..5077c5e 100644
--- a/server/middleware/router.go
+++ b/server/middleware/router.go
@@ -113,9 +113,9 @@ func DefineRoutes() *mux.Router {
 	router.HandleFunc("/self", CatchError(routes.LoginUserPage)).Methods("GET")
 	router.HandleFunc("/self/followingWorks", CatchError(routes.FollowingWorksPage)).Methods("GET")
 	router.HandleFunc("/self/bookmarks", CatchError(routes.LoginBookmarkPage)).Methods("GET")
-	router.HandleFunc("/self/addBookmark/{id}", CatchError(routes.AddBookmarkRoute)).Methods("GET")
-	router.HandleFunc("/self/deleteBookmark/{id}", CatchError(routes.DeleteBookmarkRoute)).Methods("GET")
-	router.HandleFunc("/self/like/{id}", CatchError(routes.LikeRoute)).Methods("GET")
+	router.HandleFunc("/self/addBookmark/{id}", CatchError(routes.AddBookmarkRoute)).Methods("POST")
+	router.HandleFunc("/self/deleteBookmark/{id}", CatchError(routes.DeleteBookmarkRoute)).Methods("POST")
+	router.HandleFunc("/self/like/{id}", CatchError(routes.LikeRoute)).Methods("POST")
 
 	// oEmbed endpoint for embedding Pixiv content
 	router.HandleFunc("/oembed", CatchError(routes.Oembed)).Methods("GET")
diff --git a/server/routes/actions.go b/server/routes/actions.go
index 30d9392..80e798b 100644
--- a/server/routes/actions.go
+++ b/server/routes/actions.go
@@ -34,6 +34,14 @@ func AddBookmarkRoute(w http.ResponseWriter, r *http.Request) error {
 		return err
 	}
 
+	if r.Header.Get("HX-Request") == "true" {
+		w.Header().Set("Content-Type", "text/html")
+		fmt.Fprintf(w, `<button type="button" class="btn custom-btn-secondary bg-charcoal-surface2 text-nowrap me-2" hx-post="/self/deleteBookmark/%s" hx-target="#bookmark-button" hx-swap="outerHTML">
+			<i class="bi bi-heart-fill me-2"></i>Bookmarked
+		</button>`, id)
+		return nil
+	}
+
 	utils.RedirectToWhenceYouCame(w, r)
 	return nil
 }
@@ -58,6 +66,14 @@ func DeleteBookmarkRoute(w http.ResponseWriter, r *http.Request) error {
 		return err
 	}
 
+	if r.Header.Get("HX-Request") == "true" {
+		w.Header().Set("Content-Type", "text/html")
+		fmt.Fprintf(w, `<button type="button" class="btn custom-btn-secondary bg-charcoal-surface2 text-nowrap me-2" hx-post="/self/addBookmark/%s" hx-target="#bookmark-button" hx-swap="outerHTML">
+			<i class="bi bi-heart me-2"></i>Bookmark
+		</button>`, id)
+		return nil
+	}
+
 	utils.RedirectToWhenceYouCame(w, r)
 	return nil
 }
@@ -81,6 +97,14 @@ func LikeRoute(w http.ResponseWriter, r *http.Request) error {
 		return err
 	}
 
+	if r.Header.Get("HX-Request") == "true" {
+		w.Header().Set("Content-Type", "text/html")
+		fmt.Fprintf(w, `<button type="button" class="btn custom-btn-secondary bg-charcoal-surface2 text-nowrap" disabled>
+			<i class="bi bi-hand-thumbs-up-fill me-2"></i>Liked
+		</button>`)
+		return nil
+	}
+
 	utils.RedirectToWhenceYouCame(w, r)
 	return nil
 }