Port report vote functionality to TypeScript

app/javascript/retrospring/features/moderation/vote.ts

@@ -0,0 +1,65 @@
+import Rails from '@rails/ujs';
+
+import I18n from '../../../legacy/i18n';
+import { showNotification, showErrorNotification } from 'utilities/notifications';
+
+export function voteReportHandler(event: Event): void {
+  const button = event.target as HTMLButtonElement;
+  const id = button.dataset.id;
+  const action = button.dataset.action;
+  const upvote = button.dataset.voteType === 'upvote';
+  button.disabled = true;
+
+  let success = false;
+  let targetUrl;
+
+  if (action === 'vote') {
+    targetUrl = '/ajax/mod/create_vote';
+  }
+  else if (action === 'unvote') {
+    targetUrl = '/ajax/mod/destroy_vote';
+  }
+
+  Rails.ajax({
+    url: targetUrl,
+    type: 'POST',
+    data: new URLSearchParams({
+      id: id,
+      upvote: String(upvote)
+    }).toString(),
+    success: (data) => {
+      success = data.success;
+      if (success) {
+        document.querySelector(`span#mod-count-${id}`).innerHTML = data.count;
+      }
+
+      showNotification(data.message);
+    },
+    error: (data, status, xhr) => {
+      console.log(data, status, xhr);
+      showErrorNotification(I18n.translate('frontend.error.message'));
+    },
+    complete: () => {
+      if (success) {
+        switch (action) {
+          case 'vote':
+            button.disabled = true;
+            button.dataset.action = 'unvote';
+  
+            const inverseVoteButton = document.querySelector<HTMLButtonElement>(`[name=mod-vote][data-id="${id}"][data-vote-type="${ upvote ? 'downvote' : 'upvote' }"]`);
+            inverseVoteButton.disabled = false;
+            inverseVoteButton.dataset.action = 'unvote';
+            break;
+          case 'unvote':
+            button.disabled = false;
+            button.dataset.action = 'vote';
+  
+            const inverseUnvoteButton = document.querySelector<HTMLButtonElement>(`[name=mod-vote][data-id="${id}"][data-vote-type="${ upvote ? 'downvote' : 'upvote' }"]`);
+            inverseUnvoteButton.disabled = false;
+            inverseUnvoteButton.dataset.action = 'vote';
+            break;
+        }
+      }
+    }
+  });
+}