130 lines
4.5 KiB
JavaScript
130 lines
4.5 KiB
JavaScript
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');
|
|
}
|
|
}
|
|
|
|
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);
|
|
})
|
|
}
|
|
});
|