LIL-95 - Возможность поставить лайк курсу (фронт)

apps/course/templates/course/_items.html

@@ -25,14 +25,14 @@
       <div class="user__name">{{ course.author.first_name }} {{ course.author.last_name }}</div>
       <div class="user__meta">
         <div class="user__date">{{ course.created_at_humanize }}</div>
-        <a class="user__likes likes" href="#">
+        <a class="user__likes likes" data-course-likes data-course-likes-count="{{ course.likes.count }}" data-course-id="{{ course.id }}" href="#">
           <div class="likes__counter">{{ course.likes.count }}</div>
           <div class="likes__icon">
             <svg class="icon icon-like">
-              <use xlink:href="{% get_static_prefix %}img/sprite.svg#icon-like"></use>
+              <use xlink:href="{% get_static_prefix %}img/sprite.svg#icon-like-bold"></use>
             </svg>
             <svg class="icon icon-like-fill">
-              <use xlink:href="{% get_static_prefix %}img/sprite.svg#icon-like-fill"></use>
+              <use xlink:href="{% get_static_prefix %}img/sprite.svg#icon-like-fill-bold"></use>
             </svg>
           </div>
         </a>

web/build/js/app.js

@@ -11492,6 +11492,37 @@ var history = (0, _createBrowserHistory2.default)();
         history.replace((0, _jquery2.default)(this).attr('data-category-url'));
         load_courses((0, _jquery2.default)(this).attr('data-category-url'), true);
     });
+
+    // Обработчик лайков
+    (0, _jquery2.default)('.courses').on('click', 'a[data-course-likes]', function (e) {
+        e.preventDefault();
+
+        var likedCourseElement = (0, _jquery2.default)(this);
+        likedCourseElement.toggleClass('active');
+        var courseID = (0, _jquery2.default)(this).attr('data-course-id');
+        var isLiked = (0, _jquery2.default)(this).attr('data-course-liked');
+        var likesCount = parseInt((0, _jquery2.default)(this).attr('data-course-likes-count'));
+        isLiked = !isLiked;
+        likesCount = isLiked ? likesCount + 1 : likesCount - 1;
+        likedCourseElement.children('.likes__counter').text(likesCount);
+
+        _jquery2.default.ajax('/course/' + courseID + '/like', {
+            method: 'POST'
+        }).done(function (data) {
+            if (data.success === true) {
+                (0, _jquery2.default)(this).children('.likes__counter').text(data.likes_count);
+            }
+        }).fail(function (xhr) {
+            isLiked = !isLiked;
+            likesCount = isLiked ? likesCount + 1 : likesCount - 1;
+            likedCourseElement.children('.likes__counter').text(likesCount);
+            if (isLiked) {
+                likedCourseElement.addClass('active');
+            } else {
+                likedCourseElement.removeClass('active');
+            }
+        });
+    });
 });
 
 function load_courses(coursesUrl, fromStart) {

web/src/js/modules/courses.js

@@ -16,6 +16,39 @@ $(document).ready(function () {
         history.replace($(this).attr('data-category-url'));
         load_courses($(this).attr('data-category-url'), true);
     });
+
+    // Обработчик лайков
+    $('.courses').on('click', 'a[data-course-likes]', function (e) {
+        e.preventDefault();
+
+        const likedCourseElement = $(this);
+        likedCourseElement.toggleClass('active');
+        const courseID = $(this).attr('data-course-id');
+        let isLiked = $(this).attr('data-course-liked');
+        let likesCount = parseInt($(this).attr('data-course-likes-count'));
+        isLiked = !isLiked;
+        likesCount = isLiked ? likesCount + 1 : likesCount - 1;
+        likedCourseElement.children('.likes__counter').text(likesCount);
+
+        $.ajax(`/course/${courseID}/like`, {
+            method: 'POST'
+        })
+            .done(function (data) {
+                if (data.success === true) {
+                    $(this).children('.likes__counter').text(data.likes_count);
+                }
+            })
+            .fail(function (xhr) {
+                isLiked = !isLiked;
+                likesCount = isLiked ? likesCount + 1 : likesCount - 1;
+                likedCourseElement.children('.likes__counter').text(likesCount);
+                if (isLiked) {
+                    likedCourseElement.addClass('active');
+                } else {
+                    likedCourseElement.removeClass('active');
+                }
+            });
+    })
 });
 
 function load_courses(coursesUrl, fromStart) {