feat: update frontend

assets/javascripts/discourse/connectors/user-preferences-notifications/retort.hbs

@@ -11,6 +11,5 @@
       labelKey="retort.hide_ignored_retorts"
       checked=model.custom_fields.hide_ignored_retorts}}
   </div>
-
 </div>
 {{/if}}

assets/javascripts/discourse/initializers/retort-init.js.es6

@@ -88,7 +88,8 @@ function initializePlugin(api) {
   });
 
   api.addPostMenuButton("retort", (attrs) => {
-    if (Retort.disableRetortButton(attrs.id)) {
+    const post = Retort.postFor(attrs.id);
+    if (!post.can_retort) {
       return;
     }
     return {

assets/javascripts/discourse/widgets/retort-toggle.js.es6

@@ -34,8 +34,10 @@ export default createWidget("retort-toggle", {
   buildKey: (attrs) => `retort-toggle-${attrs.post.id}-${attrs.emoji}-${attrs.usernames.length}`,
 
   defaultState({ emoji, post, usernames, emojiUrl }) {
-    const is_my_retort = (this.currentUser == null) ? false : usernames.includes(this.currentUser.username);
-    return { emoji, post, usernames, emojiUrl, is_my_retort};
+    const my_retort = post.my_retorts?.find((retort) => retort.emoji === emoji);
+    const is_my_retort = my_retort ? true : false;
+    const my_retort_update_time = is_my_retort ? new Date(my_retort?.updated_at) : undefined;
+    return { emoji, post, usernames, emojiUrl, is_my_retort, my_retort_update_time};
   },
 
   buildClasses() {
@@ -44,6 +46,12 @@ export default createWidget("retort-toggle", {
     else {return ["not-my-retort"];}
   },
 
+  // eslint-disable-next-line no-unused-vars
+  buildAttributes(attrs) {
+    if (this.disabled()) { return { disabled: true }; }
+    return {};
+  },
+
   click() {
     if (this.currentUser == null) {
       return;
@@ -52,6 +60,18 @@ export default createWidget("retort-toggle", {
     Retort.updateRetort(post, emoji).then(this.updateWidget.bind(this)).catch(popupAjaxError);
   },
 
+  disabled() {
+    if (!this.state.post.can_retort) {return true;}
+    if (this.state.is_my_retort) {
+      const diff = new Date() - this.state.my_retort_update_time;
+      if (diff > this.siteSettings.retort_withdraw_tolerance * 1000) {
+        // cannot withdraw if exceeding torlerance time
+        return true;
+      }
+    }
+    return false;
+  },
+
   updateWidget() {
     if (this.currentUser == null) {
       return;
@@ -63,20 +83,20 @@ export default createWidget("retort-toggle", {
     } else {
       this.state.usernames.push(this.currentUser.username);
       this.state.is_my_retort = true;
+      this.state.my_retort_update_time = new Date();
     }
     this.scheduleRerender();
   },
 
   html(attrs) {
     const { emoji, usernames, emojiUrl } = this.state;
+    if (usernames.length <= 0) {return [];}
     const res = [
       h("img.emoji", { src: emojiUrl, alt: `:${emoji}:` }),
       h("span.post-retort__count", usernames.length.toString()),
       h("span.post-retort__tooltip", this.sentence(this.state)),
     ];
-    if ((!Retort.disableRetortButton(this.state.post.id))
-      && attrs.currentUser
-      && (attrs.currentUser.trust_level === 4 || attrs.currentUser.staff)) {
+    if (attrs.post.can_remove_retort) {
       res.push(this.attach("retort-remove-emoji", attrs));
     }
     return res;

assets/stylesheets/common/retort.scss

@@ -30,6 +30,10 @@
   display: inline-flex;
   align-items: center;
 
+  &[disabled=true] {
+    cursor: not-allowed;
+  }
+
   img {
     margin-right: 4px;
   }

config/settings.yml

@@ -13,7 +13,7 @@ plugins:
   retort_withdraw_tolerance:
     type: number
     default: 5
-    client: false
+    client: true
   retort_allow_multiple_reactions:
     default: true
   retort_disabled_categories: