Fix broken experience level button in moderation panel (#11797)

app/javascript/actionsPanel/actionsPanel.js

@@ -116,15 +116,22 @@ function clearExpLevels() {
   });
 }
 
-async function updateExperienceLevel(currentUserId, articleId, rating, group) {
+export async function updateExperienceLevel(
+  currentUserId,
+  articleId,
+  rating,
+  group,
+) {
   try {
     const response = await request('/rating_votes', {
       method: 'POST',
       body: JSON.stringify({
-        user_id: currentUserId,
-        article_id: articleId,
-        rating,
-        group,
+        rating_vote: {
+          user_id: currentUserId,
+          article_id: articleId,
+          rating,
+          group,
+        },
       }),
     });
 

app/javascript/packs/commentModPage.js

@@ -1,3 +1,5 @@
+import { updateExperienceLevel } from '../actionsPanel/actionsPanel';
+
 function applyReactedClass(category) {
   const upVote = document.querySelector("[data-category='thumbsup']");
   const downVote = document.querySelector("[data-category='thumbsdown']");
@@ -48,49 +50,6 @@ async function updateMainReactions(reactableType, category, reactableId) {
 }
 
 // Experience-Level JS
-function clearExpLevels() {
-  Array.from(
-    document.getElementsByClassName('level-rating-button selected'),
-  ).forEach((el) => {
-    el.classList.remove('selected');
-  });
-}
-
-async function updateExperienceLevel(currentUserId, articleId, rating, group) {
-  try {
-    const response = await fetch('/rating_votes', {
-      method: 'POST',
-      headers: {
-        Accept: 'application/json',
-        'X-CSRF-Token': window.csrfToken,
-        'Content-Type': 'application/json',
-      },
-      credentials: 'same-origin',
-      body: JSON.stringify({
-        user_id: currentUserId,
-        article_id: articleId,
-        rating,
-        group,
-      }),
-    });
-
-    const outcome = await response.json();
-
-    if (outcome.result === 'Success') {
-      clearExpLevels();
-      document
-        .getElementById(`js__rating__vote__${rating}`)
-        .classList.add('selected');
-    } else {
-      // eslint-disable-next-line no-alert
-      alert(outcome.error);
-    }
-  } catch (error) {
-    // eslint-disable-next-line no-alert
-    alert(error);
-  }
-}
-
 Array.from(document.getElementsByClassName('level-rating-button')).forEach(
   (btn) => {
     btn.addEventListener('click', () => {