dealhub/resources/js/deal-view-modal.js

import {showToast} from "@/toast.js";
import {closeModal, showModal} from "@/modal.js";
import {redirect} from "./interaction.js";
import {toggleShimmer} from "./shimmer.js";
import {getComments, postComment} from "./comments.js";

export async function showDealModal(dealId) {
    if (!dealId) {
        showToast('Something went wrong!');
        return;
    }

    const dealModal = document.getElementById('deal-modal');


    showModal('deal-modal');

    toggleShimmer(false, dealModal);

    try {
        const response = await axios.get('/api/deals/' + dealId);
        setDealDetails(response.data);

        await setComments(dealId, dealModal);

        toggleShimmer(true, dealModal);

        dealModal.dataset.dealId = dealId;
        await axios.post(`/api/view/${dealId}`);
    } catch (e) {
        console.error(e);
        closeModal('deal-modal');
        showToast('Something went wrong!');
    }
}

function setDealDetails(dealDetails) {
    if (dealDetails === null) {
        throw new Error('DealDetails must be not null');
    }

    const deal = dealDetails.data
    const {
        id, title, description, link, image, category, broker, totalRedirection, totalLikes, isLiked, isFavorite
    } = deal;
    const dealModal = document.getElementById('deal-modal');

    dealModal.querySelector('.deal-image').src = image;
    dealModal.querySelector('.deal-title').innerText = title;
    dealModal.querySelector('.deal-description').innerText = description;
    dealModal.querySelector('.deal-category').querySelector('p').innerText = category.name;
    dealModal.querySelector('.broker-name').innerText = broker.name;
    dealModal.querySelector('.broker-email').innerText = broker.email;
    dealModal.querySelector('.broker-phone').innerText = broker.role.phone;

    // Set the like and click counts
    let likeCountElm = dealModal.querySelector('.likeCount');
    likeCountElm.querySelector('p').innerText = totalLikes ?? '0';
    likeCountElm.dataset.count = totalLikes ?? '0';
    dealModal.querySelector('.clickCount').querySelector('p').innerText = totalRedirection ?? '0';

    // Set if current user has already liked the deal
    let likeBtn = dealModal.querySelector('.likeBtn');
    let likeBtnSvg = likeBtn.querySelector('svg');
    if (isLiked) {
        likeBtn.dataset.liked = 'true'
        likeBtnSvg.classList.add('text-red-500', 'fill-current');
    } else {
        likeBtn.dataset.liked = 'false'
        likeBtnSvg.classList.remove('text-red-500', 'fill-current');
    }

    // Set if current user has already favorite the deal
    let favoriteBtnSvg = dealModal.querySelector('.favoriteBtn').querySelector('svg');
    if (isFavorite) {
        favoriteBtnSvg.classList.add('text-yellow-500', 'fill-current');
    } else {
        favoriteBtnSvg.classList.remove('text-yellow-500', 'fill-current');
    }
    const dealLink = dealModal.querySelector('.deal-link');
    if (link !== null && link !== "") {
        dealLink.classList.remove('hidden');
        dealLink.classList.add('flex');
        dealLink.addEventListener('click', () => {
            redirect(link);
        })
    } else {
        dealLink.classList.remove('flex');
        dealLink.classList.add('hidden');
    }

    // set follow state
    const followBtn = dealModal.querySelector('.followBtn');
    followBtn.dataset.followed = deal.isFollowed;
}

async function setComments(dealId, dealModal) {
    const commentsContainer = dealModal.querySelector('.comments-container');
    toggleShimmer(false, commentsContainer);
    commentsContainer.innerHTML = await getComments(dealId);
    toggleShimmer(true, commentsContainer);
}

window.addEventListener('DOMContentLoaded', () => {
    const dealCards = document.querySelectorAll('.deal-card');
    if (dealCards) {
        dealCards.forEach(dealCard => {
            let dealId = dealCard.dataset.dealId;
            let dealTitle = dealCard.querySelector('.action-toolbar').dataset.dealTitle;

            dealCard.addEventListener('click', async (e) => {
                if (e.target.closest('button')) {
                    return;
                }
                await showDealModal(dealId, dealTitle);
            });
        })
    }
    const commentBtn = document.getElementById('commentSubmitBtn');

    if (commentBtn) {
        commentBtn.addEventListener('click', async () => {
            const dealModal = document.getElementById('deal-modal');
            const dealId = dealModal.dataset.dealId;
            const textInput = dealModal.querySelector('input[name="comment"]');
            let text = textInput.value;
            textInput.value = '';

            await postComment(dealId, text);
            await setComments(dealId, dealModal);
        })
    }
});