DEV: use new serialized endpoints for topic cards like feature (#53)

discourse/discourse@aa222ef
discourse · Feb 17, 2025 · 313cf20 · 313cf20
1 parent bc5f95f
commit 313cf20
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 36 deletions.
diff --git a/about.json b/about.json
@@ -9,5 +9,8 @@
   "components": [
     "https://github.com/discourse/discourse-material-design-icons-outlined",
     "https://github.com/discourse/discourse-header-search"
-  ]
+  ],
+  "modifiers": {
+    "serialize_topic_op_likes_data": true
+  }
 }
diff --git a/javascripts/discourse/components/like-toggle.gjs b/javascripts/discourse/components/like-toggle.gjs
@@ -1,35 +1,41 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import { get } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { debounce } from "@ember/runloop";
 import { service } from "@ember/service";
-import { eq, notEq, or } from "truth-helpers";
+import { not } from "truth-helpers";
 import concatClass from "discourse/helpers/concat-class";
 import icon from "discourse/helpers/d-icon";
 import number from "discourse/helpers/number";
 import { ajax } from "discourse/lib/ajax";
 import { i18n } from "discourse-i18n";
 
 export default class LikeToggle extends Component {
-  @service currentUser;
   @service dialog;
 
-  @tracked likeToggled = this.args.topic.liked;
   @tracked likeCount = this.args.topic.like_count;
+  @tracked liked = this.args.topic.op_liked || false;
   @tracked loading = false;
   clickCounter = 0;
 
+  get canLike() {
+    return this.args.topic.op_can_like || false;
+  }
+
+  get firstPostId() {
+    return this.args.topic.first_post_id || false;
+  }
+
   @action
   toggleLikeDebounced() {
     if (this.loading) {
       return;
     }
 
     this.clickCounter++;
-    this.likeToggled = !this.likeToggled;
-    this.likeCount += this.likeToggled ? 1 : -1;
+    this.liked = !this.liked;
+    this.likeCount += this.liked ? 1 : -1;
     debounce(this, this.performToggleLike, 1000); // 1s delay
   }
 
@@ -42,32 +48,25 @@ export default class LikeToggle extends Component {
     this.loading = true;
 
     try {
-      const topicPosts = await ajax(`/t/${this.args.topic.id}/post_ids.json`);
-
-      if (topicPosts?.post_ids.length) {
-        const firstPost = topicPosts.post_ids[0];
-
-        if (firstPost) {
-          if (!this.likeToggled) {
-            // Adjusted the logic here to match the updated state
-            await ajax(`/post_actions/${firstPost}`, {
-              type: "DELETE",
-              data: { post_action_type_id: 2 },
-            });
-          } else {
-            await ajax(`/post_actions`, {
-              type: "POST",
-              data: { id: firstPost, post_action_type_id: 2 },
-            });
-          }
+      if (this.firstPostId) {
+        if (!this.liked) {
+          await ajax(`/post_actions/${this.firstPostId}`, {
+            type: "DELETE",
+            data: { post_action_type_id: 2 },
+          });
+        } else {
+          await ajax(`/post_actions`, {
+            type: "POST",
+            data: { id: this.firstPostId, post_action_type_id: 2 },
+          });
         }
       }
     } catch {
       // Rollback UI changes in case of an error
-      this.likeToggled = !this.likeToggled;
-      this.likeCount += this.likeToggled ? 1 : -1;
+      this.liked = !this.liked;
+      this.likeCount += this.liked ? 1 : -1;
       this.dialog.alert(
-        this.likeToggled
+        this.liked
           ? "Sorry, you can't remove that like. Please refresh."
           : "Sorry, you can't like that topic."
       );
@@ -81,19 +80,16 @@ export default class LikeToggle extends Component {
     <button
       {{on "click" this.toggleLikeDebounced}}
       type="button"
-      disabled={{or
-        (eq @topic.first_poster.username this.currentUser.username)
-        (eq (get @topic.posters "0.user.username") this.currentUser.username)
-      }}
+      disabled={{not this.canLike}}
       title={{if
-        (eq @topic.first_poster.username this.currentUser.username)
-        "You cannot like this post."
+        (this.canLike)
         (i18n "post_action_types.like.description")
+        "You cannot like this post."
       }}
-      class={{concatClass (if this.likeToggled "--liked") "topic__like-button"}}
+      class={{concatClass (if this.liked "--liked") "topic__like-button"}}
     >
       {{icon "d-unliked"}}
-      {{#if (notEq this.likeCount 0)}}
+      {{#if this.likeCount}}
         {{number this.likeCount}}
       {{/if}}
     </button>