web_src/js/features/comp/ReactionSelector.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import $ from 'jquery';
import {POST} from '../../modules/fetch.ts';

export function initCompReactionSelector() {
  for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) {
    container.addEventListener('click', async (e) => {
      // there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
      const target = e.target.closest('.comment-reaction-button');
      if (!target) return;
      e.preventDefault();

      if (target.classList.contains('disabled')) return;

      const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
      const reactionContent = target.getAttribute('data-reaction-content');

      const commentContainer = target.closest('.comment-container');

      const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
      const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
      const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';

      const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
        data: new URLSearchParams({content: reactionContent}),
      });

      const data = await res.json();
      bottomReactions?.remove();
      if (data.html) {
        commentContainer.insertAdjacentHTML('beforeend', data.html);
        const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction');
        $(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
      }
    });
  }
}