LilSchool/web/src/js/modules/courses.js

import $ from 'jquery';
import moment from 'moment';
import createHistory from 'history/createBrowserHistory';

// Likely
// import 'ilyabirman-likely/release/likely.css';
import 'ilyabirman-likely/release/likely.js';

moment.locale('ru');

// Создаем объект history API
const history = createHistory();

$(document).ready(function () {
    // Обработчик отложенных курсов
    setInterval(() => {
        $('div[data-future-course]').each((_, element) => {
            const courseTime = parseInt($(element).attr('data-future-course-time')) + LIL_SERVER_TIME_DIFF;
            const relativeTimeString = moment(courseTime, 'X').fromNow();
            $(element).find('div.courses__time').text(relativeTimeString);
        });
    }, 1000);

    // Обработчик кнопки "Подгрузить еще"
    $('.courses').on('click', 'button.load__btn', function () {
        load_courses($(this).attr('data-next-page-url'), false);
    });

    // Обработчик выбора категории
    $('div.js-select-option[data-category-option]').on('click', function (e) {
        e.preventDefault();
        const currentCategory = $(this).attr('data-category-name');
        $('[data-category-name]').removeClass('active');
        $(`[data-category-name=${currentCategory}]`).addClass('active');
        history.replace($(this).attr('data-category-url'));
        load_courses($(this).attr('data-category-url'), true);
    });

    // Обработчик лайков
    $('.container').on('click', 'a[data-course-likes]', function (e) {
        e.preventDefault();
        if (typeof $(this).data('popup') !== 'undefined') {
            return;
        }

        const likedCourseElement = $(this);
        const courseID = $(this).attr('data-course-id');
        let isLiked = !!parseInt($(this).attr('data-liked'));
        let likesCount = parseInt($(this).attr('data-course-likes-count'));
        isLiked = !isLiked;
        likesCount = isLiked ? likesCount + 1 : likesCount - 1;
        likedCourseElement.children('.likes__counter').text(likesCount);
        likedCourseElement.attr('data-course-likes-count', likesCount);
        if (isLiked) {
            likedCourseElement.addClass('active');
            likedCourseElement.attr('data-liked', '1');
        } else {
            likedCourseElement.removeClass('active');
            likedCourseElement.attr('data-liked', '0');
        }

        $.ajax(`/course/${courseID}/like`, {
            method: 'POST'
        })
            .done(function (data) {
                if (data.success === true) {
                    likedCourseElement.children('.likes__counter').text(data.likes_count);
                    likedCourseElement.attr('data-course-likes-count', data.likes_count);
                    if (data.is_liked) {
                        likedCourseElement.addClass('active');
                        likedCourseElement.attr('data-liked', '1');
                    } else {
                        likedCourseElement.removeClass('active');
                        likedCourseElement.attr('data-liked', '0');
                    }
                }
            })
            .fail(function (xhr) {
                isLiked = !isLiked;
                likesCount = isLiked ? likesCount + 1 : likesCount - 1;
                likedCourseElement.children('.likes__counter').text(likesCount);
                likedCourseElement.attr('data-course-likes-count', likesCount);
                if (isLiked) {
                    likedCourseElement.addClass('active');
                    likedCourseElement.attr('data-liked', '1');
                } else {
                    likedCourseElement.removeClass('active');
                    likedCourseElement.attr('data-liked', '0');
                }
            });
    })
});

function load_courses(coursesUrl, fromStart) {
    $('.courses__list').css('opacity', '0.9');
    const buttonElement = $('.courses').find('button.load__btn');
    if (!fromStart) {
        buttonElement.addClass('loading');
    }
    $.ajax(coursesUrl, {
        method: 'GET'
    })
        .done(function (data) {
            if (data.success === true) {
                if (!fromStart) {
                    $('.courses__list').append(data.content);
                } else {
                    $('.courses__list').html(data.content);
                }
                if (data.next_url) {
                    buttonElement.attr('data-next-page-url', data.next_url);
                    buttonElement.show();
                } else {
                    buttonElement.hide()
                }
            }
        })
        .fail(function (xhr) {
            if (xhr.status === 404) {
                // Нет результатов, скрываем кнопку
                buttonElement.hide();
            }
        })
        .always(function () {
            $('.courses__list').css('opacity', '1');
            if (buttonElement) {
                buttonElement.removeClass('loading');
            }
        });
}