1 files changed, 38 insertions, 0 deletions
diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js
new file mode 100644
index 0000000..fd4601f
--- /dev/null
+++ b/web_src/js/features/comp/ReactionSelector.js
@@ -0,0 +1,38 @@
+import $ from 'jquery';
+import {POST} from '../../modules/fetch.js';
+
+export function initCompReactionSelector($parent) {
+  $parent.find(`.select-reaction .item.reaction, .comment-reaction-button`).on('click', async function (e) {
+    e.preventDefault();
+
+    if (this.classList.contains('disabled')) return;
+
+    const actionUrl = this.closest('[data-action-url]')?.getAttribute('data-action-url');
+    const reactionContent = this.getAttribute('data-reaction-content');
+    const hasReacted = this.closest('.comment')?.querySelector(`.ui.segment.reactions a[data-reaction-content="${reactionContent}"]`)?.getAttribute('data-has-reacted') === 'true';
+
+    const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
+      data: new URLSearchParams({content: reactionContent}),
+    });
+
+    const data = await res.json();
+    if (data && (data.html || data.empty)) {
+      const $content = $(this).closest('.content');
+      let $react = $content.find('.segment.reactions');
+      if ((!data.empty || data.html === '') && $react.length > 0) {
+        $react.remove();
+      }
+      if (!data.empty) {
+        const $attachments = $content.find('.segment.bottom:first');
+        $react = $(data.html);
+        if ($attachments.length > 0) {
+          $react.insertBefore($attachments);
+        } else {
+          $react.appendTo($content);
+        }
+        $react.find('.dropdown').dropdown();
+        initCompReactionSelector($react);
+      }
+    }
+  });
+}