Update

ThreeDotsLabs · Jun 12, 2024 · ae57112 · ae57112
1 parent 6a0a484
commit ae57112
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 48 deletions.
diff --git a/_examples/real-world-examples/server-sent-events-htmx/events.go b/_examples/real-world-examples/server-sent-events-htmx/events.go
@@ -96,7 +96,7 @@ func NewRouters(cfg config, repo *Repository) (Routers, error) {
 
 	err = eventProcessor.AddHandlers(
 		cqrs.NewEventHandler(
-			"on-post-viewed",
+			"UpdateViews",
 			func(ctx context.Context, event *PostViewed) error {
 				err = repo.UpdatePost(ctx, event.PostID, func(post *Post) {
 					post.Views++
@@ -114,7 +114,7 @@ func NewRouters(cfg config, repo *Repository) (Routers, error) {
 			},
 		),
 		cqrs.NewEventHandler(
-			"on-post-reaction-added",
+			"UpdateReactions",
 			func(ctx context.Context, event *PostReactionAdded) error {
 				err := repo.UpdatePost(ctx, event.PostID, func(post *Post) {
 					post.Reactions[event.ReactionID]++

diff --git a/_examples/real-world-examples/server-sent-events-htmx/http.go b/_examples/real-world-examples/server-sent-events-htmx/http.go
@@ -103,7 +103,9 @@ func (h Handler) AddReaction(c echo.Context) error {
 		return err
 	}
 
-	return c.NoContent(http.StatusAccepted)
+	reaction := mustReactionByID(reactionID)
+
+	return views.UpdatedButton(reaction.Label).Render(c.Request().Context(), c.Response())
 }
 
 type statsStream struct {

diff --git a/_examples/real-world-examples/server-sent-events-htmx/models.go b/_examples/real-world-examples/server-sent-events-htmx/models.go
@@ -25,6 +25,16 @@ var allReactions = []Reaction{
 	},
 }
 
+func mustReactionByID(id string) Reaction {
+	for _, r := range allReactions {
+		if r.ID == id {
+			return r
+		}
+	}
+
+	panic("reaction not found")
+}
+
 type Reaction struct {
 	ID    string
 	Label string

diff --git a/_examples/real-world-examples/server-sent-events-htmx/repository.go b/_examples/real-world-examples/server-sent-events-htmx/repository.go
@@ -13,7 +13,7 @@ CREATE TABLE IF NOT EXISTS posts (
 	author VARCHAR NOT NULL,
 	content TEXT NOT NULL,
 	views INT NOT NULL DEFAULT 0,
-    reactions JSONB NOT NULL DEFAULT '{}',
+	reactions JSONB NOT NULL DEFAULT '{}',
 	created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
 );
 

diff --git a/_examples/real-world-examples/server-sent-events-htmx/views/base.templ b/_examples/real-world-examples/server-sent-events-htmx/views/base.templ
@@ -28,6 +28,10 @@ templ base() {
           .animated {
             animation: reaction-animation 0.5s;
           }
+
+          .reaction-buttons form {
+            display: inline;
+          }
         </style>
     </head>
     <body>

diff --git a/_examples/real-world-examples/server-sent-events-htmx/views/base_templ.go b/_examples/real-world-examples/server-sent-events-htmx/views/base_templ.go
diff --git a/_examples/real-world-examples/server-sent-events-htmx/views/pages.templ b/_examples/real-world-examples/server-sent-events-htmx/views/pages.templ
@@ -59,19 +59,27 @@ templ PostStatsView(stats PostStats) {
     </div>
 
     <div class="mt-2 d-flex justify-content-start align-items-center">
-        <form hx-post={ "/posts/" + stats.PostID + "/reactions"} hx-swap="none">
-            <div class="reaction-buttons">
-                for _, r := range stats.Reactions {
-                    @reactionButton(r)
-                }
-            </div>
-        </form>
+        <div class="reaction-buttons">
+            for _, r := range stats.Reactions {
+                @reactionButton(stats.PostID, r)
+            }
+        </div>
     </div>
 }
 
-templ reactionButton(reaction Reaction) {
-    <button type="submit" name="reaction_id" value={ reaction.ID } class={"btn", "btn-outline-secondary", "m-1", templ.KV("animated", reaction.JustChanged)}>
-      <span class="emoji">{ reaction.Label }</span>
-      <span class="counter">{ reaction.Count }</span>
+templ reactionButton(postID string, reaction Reaction) {
+    <form hx-post={ "/posts/" + postID + "/reactions"} hx-swap="outerHTML">
+        <input type="hidden" name="reaction_id" value={ reaction.ID } />
+        <button type="submit" class={"btn", "btn-outline-secondary", "m-1", templ.KV("animated", reaction.JustChanged)}>
+          <span class="emoji">{ reaction.Label }</span>
+          <span class="counter">{ reaction.Count }</span>
+        </button>
+    </form>
+}
+
+templ UpdatedButton(label string) {
+    <button class={"btn", "btn-outline-secondary", "m-1"}>
+      <span class="emoji">{ label }</span>
+      <span class="counter">✅</span>
     </button>
 }
diff --git a/_examples/real-world-examples/server-sent-events-htmx/views/pages_templ.go b/_examples/real-world-examples/server-sent-events-htmx/views/pages_templ.go