dealhub/resources/js/interaction.js

import {showToast} from "./toast.js";

export async function like(button) {
    const activeClasses = ['fill-current', 'text-red-500']
    let isLiked = button.dataset.liked === 'true';
    try {
        // Update the like state and count
        let id = button.closest('.deal-identifier').dataset.dealId;
        const cardLikeBadge = document.getElementById(`likeBadge${id}`);

        setLikeState(button, !isLiked);
        updateLikeCount(cardLikeBadge, isLiked ? -1 : 1);

        // Update the state of like button that is clicked
        toggleState(button, !isLiked, activeClasses);

        let response = await axios.post('/like/' + id);
        showToast(response.data.message)

    } catch (e) {
        if (e.response.status === 401){
            window.location.href = '/login/create';
            return;
        }
        showToast('Something went wrong!')
        // Revert the states
        toggleState(button, isLiked, activeClasses);
        console.error(e);
    }
}

export async function favorite(button) {
    const activeClasses = ['fill-current', 'text-yellow-500']
    let isFavorite = button.dataset.favorite === 'true';
    try {
        let id = button.closest('.deal-identifier').dataset.dealId;

        setFavoriteState(button, !isFavorite);
        toggleState(button, !isFavorite, activeClasses);

        let response = await axios.post('/favorite/' + id);
        showToast(response.data.message)

    } catch (e) {
        if (e.response.status === 401){
            window.location.href = '/login/create';
            return;
        }
        showToast(e.response.data.message)
        toggleState(button, isFavorite, activeClasses);
        console.error(e);
    }
}

export function redirect(url, id) {
    window.open(url, '_blank');
    let redirectBadge = document.getElementById("redirectBadge".concat(id));
    updateRedirectCount(redirectBadge, 1);
    // increment the count in ui
}

export function setLikeState(button, isLiked) {
    button.dataset.liked = isLiked ? 'true' : 'false';
}

export function setFavoriteState(button, isFavorite) {
    button.dataset.favorite = isFavorite ? 'true' : 'false';
}

function toggleState(element, condition, activeClasses) {
    const svg = element.querySelector('svg');
    if (condition) {
        svg.classList.add(...activeClasses);
    } else {
        svg.classList.remove(...activeClasses);
    }
}

function updateLikeCount(badge, change) {
    try {
        let likeCount = Math.max(parseInt(badge.dataset.count) + change, 0)
        badge.querySelector('p').innerText = likeCount;
        badge.dataset.count = likeCount.toString();
    } catch (e) {
        console.error(e);
    }
}


function updateRedirectCount(badge, change) {
    try {
        let likeCount = Math.max(parseInt(badge.dataset.count) + change, 0)
        badge.querySelector('p').innerText = likeCount;
        badge.dataset.count = likeCount.toString();
    } catch (e) {
        console.error(e);
    }
}