From ef2340b81ced637b94964fb6d39d9bfd2189aee7 Mon Sep 17 00:00:00 2001
From: Umputun <umputun@gmail.com>
Date: Mon, 25 Mar 2024 16:03:34 -0500
Subject: [PATCH] Loading indicator for delete spam samples (#69)

* add loading indicator on delete #61

* fix tests
---
 .../assets/components/samples_list.html       | 24 +++---
 app/webapi/assets/spinner.svg                 |  1 +
 app/webapi/assets/styles.css                  | 11 +++
 app/webapi/webapi.go                          | 83 +++++++++----------
 app/webapi/webapi_test.go                     |  4 +-
 5 files changed, 67 insertions(+), 56 deletions(-)
 create mode 100644 app/webapi/assets/spinner.svg

diff --git a/app/webapi/assets/components/samples_list.html b/app/webapi/assets/components/samples_list.html
index 60779b31..993f69cc 100644
--- a/app/webapi/assets/components/samples_list.html
+++ b/app/webapi/assets/components/samples_list.html
@@ -6,17 +6,17 @@ <h4>
         </h4>
         <ul class="list-group" id="spam-samples-list">
             {{range .SpamSamples}}
-            <li class="list-group-item d-flex justify-content-between align-items-center">
-                {{.}}
-                <form method="POST" hx-post="/delete/spam" hx-target="#samples-list" hx-swap="outerHTML">
-                    <input type="hidden" name="msg" value="{{.}}">
-                    <button type="submit" class="btn btn-sm btn-danger">
-                        <i class="bi bi-trash"></i>
-                    </button>
-                </form>
-            </li>
+                <li class="list-group-item d-flex justify-content-between align-items-center">
+                     <span id="loading-{{.ID}}">{{.Sample}} <img class="htmx-indicator" src="/spinner.svg"/></span>
+                    <form method="POST" hx-post="/delete/spam" hx-target="#samples-list" hx-swap="outerHTML" hx-indicator="#loading-{{.ID}}">
+                        <input type="hidden" name="msg" value="{{.Sample}}">
+                        <button type="submit" class="btn btn-sm btn-danger">
+                           <i class="bi bi-trash"></i>
+                        </button>
+                    </form>
+                </li>
             {{else}}
-            <li class="list-group-item">No spam samples found</li>
+                <li class="list-group-item">No spam samples found</li>
             {{end}}
         </ul>
     </div>
@@ -29,9 +29,9 @@ <h4>
         <ul class="list-group" id="ham-samples-list">
             {{range .HamSamples}}
             <li class="list-group-item d-flex justify-content-between align-items-center">
-                {{.}}
+                {{.Sample}}
                 <form method="POST" hx-post="/delete/ham" hx-target="#samples-list" hx-swap="outerHTML">
-                    <input type="hidden" name="msg" value="{{.}}">
+                    <input type="hidden" name="msg" value="{{.Sample}}">
                     <button type="submit" class="btn btn-sm btn-danger">
                         <i class="bi bi-trash"></i>
                     </button>
diff --git a/app/webapi/assets/spinner.svg b/app/webapi/assets/spinner.svg
new file mode 100644
index 00000000..89e51c14
--- /dev/null
+++ b/app/webapi/assets/spinner.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ajPY{transform-origin:center;animation:spinner_AtaB .75s infinite linear}@keyframes spinner_AtaB{100%{transform:rotate(360deg)}}</style><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_ajPY"/></svg>
\ No newline at end of file
diff --git a/app/webapi/assets/styles.css b/app/webapi/assets/styles.css
index aadf5094..567a6781 100644
--- a/app/webapi/assets/styles.css
+++ b/app/webapi/assets/styles.css
@@ -41,4 +41,15 @@ body, #result{
     color: #fff;
     background-color: #3286cb;
     border-color: #3d86e5;
+}
+
+.htmx-indicator{
+    opacity:0;
+    transition: opacity 500ms ease-in;
+}
+.htmx-request .htmx-indicator{
+    opacity:1
+}
+.htmx-request.htmx-indicator{
+    opacity:1
 }
\ No newline at end of file
diff --git a/app/webapi/webapi.go b/app/webapi/webapi.go
index 79fe9ec2..452ca93e 100644
--- a/app/webapi/webapi.go
+++ b/app/webapi/webapi.go
@@ -4,6 +4,7 @@ package webapi
 import (
 	"context"
 	"crypto/rand"
+	"crypto/sha1" //nolint
 	"embed"
 	"encoding/json"
 	"errors"
@@ -199,7 +200,8 @@ func (s *Server) routes(router *chi.Mux) *chi.Mux {
 		webUI.Get("/detected_spam", s.htmlDetectedSpamHandler)         // serve detected spam page
 		webUI.Get("/list_settings", s.htmlSettingsHandler)             // serve settings
 		webUI.Get("/styles.css", s.stylesHandler)                      // serve styles.css
-		webUI.Get("/logo.png", s.logoutHandler)                        // serve logo.png
+		webUI.Get("/logo.png", s.logoHandler)                          // serve logo.png
+		webUI.Get("/spinner.svg", s.spinnerHandler)                    // serve spinner.svg
 		webUI.Post("/detected_spam/add", s.htmlAddDetectedSpamHandler) // add detected spam to samples
 	})
 
@@ -321,7 +323,7 @@ func (s *Server) updateSampleHandler(updFn func(msg string) error) func(w http.R
 		}
 
 		if isHtmxRequest {
-			s.renderSamples(w)
+			s.renderSamples(w, "samples_list.html")
 		} else {
 			rest.RenderJSON(w, rest.JSON{"updated": true, "msg": req.Msg})
 		}
@@ -353,7 +355,7 @@ func (s *Server) deleteSampleHandler(delFn func(msg string) (int, error)) func(w
 		}
 
 		if isHtmxRequest {
-			s.renderSamples(w)
+			s.renderSamples(w, "samples_list.html")
 		} else {
 			rest.RenderJSON(w, rest.JSON{"deleted": true, "msg": req.Msg, "count": count})
 		}
@@ -460,32 +462,7 @@ func (s *Server) htmlSpamCheckHandler(w http.ResponseWriter, _ *http.Request) {
 // htmlManageSamplesHandler handles GET /manage_samples request.
 // It returns rendered manage_samples.html template with all the components.
 func (s *Server) htmlManageSamplesHandler(w http.ResponseWriter, _ *http.Request) {
-	spam, ham, err := s.SpamFilter.DynamicSamples()
-	if err != nil {
-		log.Printf("[ERROR] Failed to fetch dynamic samples: %v", err)
-		http.Error(w, "Internal Server Error", http.StatusInternalServerError)
-		return
-	}
-	spam, ham = s.reverseSamples(spam, ham)
-
-	tmplData := struct {
-		SpamSamples      []string
-		HamSamples       []string
-		TotalSpamSamples int
-		TotalHamSamples  int
-	}{
-		SpamSamples:      spam,
-		HamSamples:       ham,
-		TotalSpamSamples: len(spam),
-		TotalHamSamples:  len(ham),
-	}
-
-	// Execute the manage_samples template with the data
-	if err := tmpl.ExecuteTemplate(w, "manage_samples.html", tmplData); err != nil {
-		log.Printf("[WARN] failed to execute template: %v", err)
-		http.Error(w, "Internal Server Error", http.StatusInternalServerError)
-		return
-	}
+	s.renderSamples(w, "manage_samples.html")
 }
 
 func (s *Server) htmlManageUsersHandler(w http.ResponseWriter, _ *http.Request) {
@@ -586,8 +563,8 @@ func (s *Server) stylesHandler(w http.ResponseWriter, _ *http.Request) {
 	_, _ = w.Write(body)
 }
 
-// logoutHandler handles GET /logo.png request. It returns assets/logo.png file.
-func (s *Server) logoutHandler(w http.ResponseWriter, _ *http.Request) {
+// logoHandler handles GET /logo.png request. It returns assets/logo.png file.
+func (s *Server) logoHandler(w http.ResponseWriter, _ *http.Request) {
 	img, err := templateFS.ReadFile("assets/logo.png")
 	if err != nil {
 		http.Error(w, "Logo not found", http.StatusNotFound)
@@ -598,35 +575,57 @@ func (s *Server) logoutHandler(w http.ResponseWriter, _ *http.Request) {
 	_, _ = w.Write(img)
 }
 
-func (s *Server) renderSamples(w http.ResponseWriter) {
-	spam, ham, err := s.SpamFilter.DynamicSamples()
+func (s *Server) spinnerHandler(w http.ResponseWriter, _ *http.Request) {
+	img, err := templateFS.ReadFile("assets/spinner.svg")
 	if err != nil {
-		w.WriteHeader(http.StatusInternalServerError)
-		rest.RenderJSON(w, rest.JSON{"error": "can't fetch samples", "details": err.Error()})
+		http.Error(w, "Logo not found", http.StatusNotFound)
 		return
 	}
+	w.Header().Set("Content-Type", "image/svg+xml")
+	w.WriteHeader(http.StatusOK)
+	_, _ = w.Write(img)
+}
 
-	tmpl, err := template.New("").ParseFS(templateFS, "assets/components/samples_list.html")
+func (s *Server) renderSamples(w http.ResponseWriter, tmplName string) {
+	spam, ham, err := s.SpamFilter.DynamicSamples()
 	if err != nil {
 		w.WriteHeader(http.StatusInternalServerError)
-		rest.RenderJSON(w, rest.JSON{"error": "can't parse template", "details": err.Error()})
+		rest.RenderJSON(w, rest.JSON{"error": "can't fetch samples", "details": err.Error()})
 		return
 	}
 
 	spam, ham = s.reverseSamples(spam, ham)
+
+	type smpleWithID struct {
+		ID     string
+		Sample string
+	}
+
+	makeID := func(s string) string {
+		hash := sha1.New() //nolint
+		if _, err := hash.Write([]byte(s)); err != nil {
+			return fmt.Sprintf("%x", s)
+		}
+		return fmt.Sprintf("%x", hash.Sum(nil))
+	}
+
 	tmplData := struct {
-		SpamSamples      []string
-		HamSamples       []string
+		SpamSamples      []smpleWithID
+		HamSamples       []smpleWithID
 		TotalHamSamples  int
 		TotalSpamSamples int
 	}{
-		SpamSamples:      spam,
-		HamSamples:       ham,
 		TotalHamSamples:  len(ham),
 		TotalSpamSamples: len(spam),
 	}
+	for _, s := range spam {
+		tmplData.SpamSamples = append(tmplData.SpamSamples, smpleWithID{ID: makeID(s), Sample: s})
+	}
+	for _, h := range ham {
+		tmplData.HamSamples = append(tmplData.HamSamples, smpleWithID{ID: makeID(h), Sample: h})
+	}
 
-	if err := tmpl.ExecuteTemplate(w, "samples_list.html", tmplData); err != nil {
+	if err := tmpl.ExecuteTemplate(w, tmplName, tmplData); err != nil {
 		w.WriteHeader(http.StatusInternalServerError)
 		rest.RenderJSON(w, rest.JSON{"error": "can't execute template", "details": err.Error()})
 		return
diff --git a/app/webapi/webapi_test.go b/app/webapi/webapi_test.go
index 58e76edb..b53a2acb 100644
--- a/app/webapi/webapi_test.go
+++ b/app/webapi/webapi_test.go
@@ -927,7 +927,7 @@ func TestServer_logoHandler(t *testing.T) {
 	req, err := http.NewRequest("GET", "/logo.png", http.NoBody)
 	require.NoError(t, err)
 
-	handler := http.HandlerFunc(server.logoutHandler)
+	handler := http.HandlerFunc(server.logoHandler)
 	handler.ServeHTTP(rr, req)
 
 	assert.Equal(t, http.StatusOK, rr.Code, "handler should return status OK")
@@ -1111,7 +1111,7 @@ func TestServer_renderSamples(t *testing.T) {
 		SpamFilter: mockSpamFilter,
 	})
 	w := httptest.NewRecorder()
-	server.renderSamples(w)
+	server.renderSamples(w, "samples_list.html")
 	assert.Equal(t, http.StatusOK, w.Code)
 	assert.Equal(t, "text/html; charset=utf-8", w.Header().Get("Content-Type"))
 	t.Log(w.Body.String())