Add initFavoriteButtons helper

src/apps/blogging/templates/blogging/article_detail.html

@@ -25,9 +25,9 @@ <h1>{{ article.title }}</h1>
         </button>
         &nbsp;&nbsp;
         {% endif %}
-        <button class="btn btn-sm btn-outline-primary">
+        <button class="favorite-button btn btn-sm {% if favorited %}btn-primary{% else %}btn-outline-primary{% endif %}" data-article-slug="{{ article.slug }}">
           <i class="ion-heart"></i>
-          &nbsp; Favorite Post <span class="counter">(29)</span>
+          &nbsp; <span class="text">Favorite Article</span> (<span class="counter">{{ article.favorited_by.size }}</span>)
         </button>
         {% if request.user? && request.user.profile == article.author %}
         <a href="{% url 'blogging:article_update' slug: article.slug %}" class="btn btn-sm btn-outline-secondary">
@@ -71,9 +71,9 @@ <h1>{{ article.title }}</h1>
         </button>
         &nbsp;&nbsp;
         {% endif %}
-        <button class="btn btn-sm btn-outline-primary">
+        <button class="favorite-button btn btn-sm {% if favorited %}btn-primary{% else %}btn-outline-primary{% endif %}" data-article-slug="{{ article.slug }}">
           <i class="ion-heart"></i>
-          &nbsp; Favorite Article <span class="counter">(29)</span>
+          &nbsp; <span class="text">Favorite Article</span> (<span class="counter">{{ article.favorited_by.size }}</span>)
         </button>
         {% if request.user? && request.user.profile == article.author %}
         <a href="{% url 'blogging:article_update' slug: article.slug %}" class="btn btn-sm btn-outline-secondary">

src/assets/js/controllers/blogging/ArticleDetailController.js

@@ -1,8 +1,10 @@
+import initFavoriteButtons from '../../core/initFavoriteButtons';
 import initFollowButtons from '../../core/initFollowButtons';
 
 export default {
   async init() {
     const articlePageDiv = document.getElementById('article_page');
     await initFollowButtons(articlePageDiv.dataset.authorUsername);
+    await initFavoriteButtons();
   },
 };

src/assets/js/core/initFavoriteButtons.js

@@ -0,0 +1,35 @@
+import axios from 'axios';
+
+import getCSRFToken from './getCSRFToken';
+
+export default async function initFavoriteButtons() {
+  const favoriteButtons = document.querySelectorAll('.favorite-button');
+
+  if (favoriteButtons.length > 0) {
+    const csrfToken = getCSRFToken();
+    favoriteButtons.forEach((favoriteButton) => {
+      const slug = favoriteButton.dataset.articleSlug;
+      favoriteButton.addEventListener('click', async () => {
+        const response = await axios.post(
+          `/article/${slug}/favorite`,
+          {},
+          { headers: { 'X-CSRF-Token': csrfToken } },
+        );
+
+        favoriteButtons.forEach((b) => {
+          if (b.dataset.articleSlug === slug) {
+            b.classList.toggle('btn-outline-primary');
+            b.classList.toggle('btn-primary');
+            const counter = b.querySelector('.counter');
+
+            if (response.data.favorited) {
+              counter.textContent = parseInt(counter.textContent, 10) + 1;
+            } else {
+              counter.textContent = parseInt(counter.textContent, 10) - 1;
+            }
+          }
+        });
+      });
+    });
+  }
+}