animations

ThreeDotsLabs · May 2, 2024 · d65ca08 · d65ca08
1 parent 775fef5
commit d65ca08
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 59 deletions.
diff --git a/_examples/real-world-examples/server-sent-events-htmx/main.go b/_examples/real-world-examples/server-sent-events-htmx/main.go
@@ -46,10 +46,6 @@ var allReactions = []Reaction{
 		ID:    "laugh",
 		Label: "😂",
 	},
-	{
-		ID:    "sad",
-		Label: "😢",
-	},
 }
 
 type Reaction struct {
@@ -76,7 +72,9 @@ type PostReactionAdded struct {
 }
 
 type PostStatsUpdated struct {
-	PostID int `json:"post_id"`
+	PostID          int     `json:"post_id"`
+	ViewsUpdated    bool    `json:"views_updated"`
+	ReactionUpdated *string `json:"reaction_updated"`
 }
 
 type config struct {
@@ -151,7 +149,7 @@ func main() {
 
 	storage := NewStorage(db)
 
-	statsHandler := sseRouter.AddHandler(postStatsUpdatedTopic, statsStream{storage: storage})
+	statsHandler := sseRouter.AddHandler(postStatsUpdatedTopic, &statsStream{storage: storage})
 
 	e := echo.New()
 	e.Use(middleware.Recover())
@@ -263,7 +261,8 @@ func main() {
 			}
 
 			newEvent := PostStatsUpdated{
-				PostID: event.PostID,
+				PostID:       event.PostID,
+				ViewsUpdated: true,
 			}
 
 			payload, err := json.Marshal(newEvent)
@@ -298,7 +297,8 @@ func main() {
 			}
 
 			newEvent := PostStatsUpdated{
-				PostID: event.PostID,
+				PostID:          event.PostID,
+				ReactionUpdated: &event.ReactionID,
 			}
 
 			payload, err := json.Marshal(newEvent)
@@ -336,7 +336,7 @@ type statsStream struct {
 	storage *Storage
 }
 
-func (s statsStream) InitialStreamResponse(w stdHttp.ResponseWriter, r *stdHttp.Request) (response interface{}, ok bool) {
+func (s *statsStream) InitialStreamResponse(w stdHttp.ResponseWriter, r *stdHttp.Request) (response interface{}, ok bool) {
 	postIDStr := r.PathValue("id")
 	postID, err := strconv.Atoi(postIDStr)
 	if err != nil {
@@ -345,7 +345,7 @@ func (s statsStream) InitialStreamResponse(w stdHttp.ResponseWriter, r *stdHttp.
 		return nil, false
 	}
 
-	resp, err := s.getResponse(postID)
+	resp, err := s.getResponse(postID, nil)
 	if err != nil {
 		w.WriteHeader(stdHttp.StatusInternalServerError)
 		_, _ = w.Write([]byte(err.Error()))
@@ -355,7 +355,7 @@ func (s statsStream) InitialStreamResponse(w stdHttp.ResponseWriter, r *stdHttp.
 	return resp, true
 }
 
-func (s statsStream) NextStreamResponse(r *stdHttp.Request, msg *message.Message) (response interface{}, ok bool) {
+func (s *statsStream) NextStreamResponse(r *stdHttp.Request, msg *message.Message) (response interface{}, ok bool) {
 	postIDStr := r.PathValue("id")
 	postID, err := strconv.Atoi(postIDStr)
 	if err != nil {
@@ -374,7 +374,7 @@ func (s statsStream) NextStreamResponse(r *stdHttp.Request, msg *message.Message
 		return "", false
 	}
 
-	resp, err := s.getResponse(postID)
+	resp, err := s.getResponse(postID, &event)
 	if err != nil {
 		fmt.Println("could not get response: " + err.Error())
 		return nil, false
@@ -383,7 +383,7 @@ func (s statsStream) NextStreamResponse(r *stdHttp.Request, msg *message.Message
 	return resp, true
 }
 
-func (s statsStream) getResponse(postID int) (interface{}, error) {
+func (s *statsStream) getResponse(postID int, event *PostStatsUpdated) (interface{}, error) {
 	post, err := s.storage.PostByID(context.Background(), postID)
 	if err != nil {
 		return nil, err
@@ -393,15 +393,19 @@ func (s statsStream) getResponse(postID int) (interface{}, error) {
 
 	for _, r := range allReactions {
 		reactions = append(reactions, views.Reaction{
-			ID:    r.ID,
-			Label: r.Label,
-			Count: fmt.Sprint(post.Reactions[r.ID]),
+			ID:          r.ID,
+			Label:       r.Label,
+			Count:       fmt.Sprint(post.Reactions[r.ID]),
+			JustChanged: event != nil && event.ReactionUpdated != nil && *event.ReactionUpdated == r.ID,
 		})
 	}
 
 	stats := views.PostStats{
-		PostID:    fmt.Sprint(post.ID),
-		Views:     fmt.Sprint(post.Views),
+		PostID: fmt.Sprint(post.ID),
+		Views: views.PostViews{
+			Count:       fmt.Sprint(post.Views),
+			JustChanged: event != nil && event.ViewsUpdated,
+		},
 		Reactions: reactions,
 	}
 

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
@@ -8,6 +8,27 @@ templ base() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Server Sent Events</title>
         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
+
+        <style>
+          @keyframes reaction-animation {
+                0% {
+                  transform: translateY(0);
+                }
+                25% {
+                  transform: translateY(-5px);
+                }
+                50% {
+                  transform: translateY(0);
+                }
+                100% {
+                  transform: translateY(0);
+                }
+          }
+
+          .animated {
+            animation: reaction-animation 0.5s;
+          }
+        </style>
     </head>
     <body>
         <div class="container mt-5">

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
@@ -8,17 +8,23 @@ type Post struct {
 }
 
 type Reaction struct {
-    ID    string
-    Label string
-    Count string
+    ID          string
+    Label       string
+    Count       string
+    JustChanged bool
 }
 
 type PostStats struct {
     PostID    string
-    Views     string
+    Views     PostViews
     Reactions []Reaction
 }
 
+type PostViews struct {
+    Count       string
+    JustChanged bool
+}
+
 templ Index(posts []Post) {
     @base() {
         <div class="row mt-5">
@@ -47,9 +53,9 @@ templ postView(post Post) {
 }
 
 templ PostStatsView(stats PostStats) {
-    <div class="d-flex align-items-center">
+    <div class={ "d-flex", "align-items-center", templ.KV("animated", stats.Views.JustChanged)}>
         <span class="me-1">👁️</span>
-        <small class="text-muted">{ stats.Views + " views" }</small>
+        <small class="text-muted">{ stats.Views.Count + " views" }</small>
     </div>
 
     <div class="mt-2 d-flex justify-content-start align-items-center">
@@ -64,7 +70,7 @@ templ PostStatsView(stats PostStats) {
 }
 
 templ reactionButton(reaction Reaction) {
-    <button type="submit" name="reaction_id" value={ reaction.ID } class="btn btn-outline-secondary m-1">
+    <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>
     </button>