fetchComment.js

import {COMMENTS_API_URL}  from './config.js';
import {complaintDetailStaticPath, complaintsStaticPath}  from './staticPaths.js';

let commentsArr;
let commentsWrapper = document.querySelector('.comments-wrapper')

// REPORT COMMENT MODAL
const reportCommentModal = document.querySelector('section.report-comment-modal');
const reportCommentModalCloseModalIcon = document.querySelector('section.report-comment-modal img.close-icon');
const reportCommentModalCancelButton = document.querySelector('section.report-comment-modal > article > div > button');
const reportCommentModalOverlay = document.querySelector('#report-comment-modal-overlay');

let isReportCommentModalOpened = false;

reportCommentModalOverlay.addEventListener("click", closeReportCommentModal);
reportCommentModalCloseModalIcon.addEventListener("click", closeReportCommentModal);
reportCommentModalCancelButton.addEventListener("click", closeReportCommentModal);

function checkReportCommentModalIsOpened(){
    if(isReportCommentModalOpened === false){
        openReportCommentModal()
    } else if(isReportCommentModalOpened === true){
        closeReportCommentModal()
    }
}

function openReportCommentModal(){
    isReportCommentModalOpened = true;

    reportCommentModal.style.display = "flex"
    reportCommentModalOverlay.style.display = "block"
    
    setTimeout(()=>{
        reportCommentModal.style.transform = "translate(-50%, -50%) scale(1)"
        reportCommentModal.style.opacity = 1;
        reportCommentModalOverlay.style.opacity = 1;
    },50)
}
function closeReportCommentModal(){
    isReportCommentModalOpened = false;

    reportCommentModal.style.transform = "translate(-50%, -50%) scale(0)"
    reportCommentModal.style.opacity = 0;
    reportCommentModalOverlay.style.opacity = 0;

    setTimeout(() => {
        reportCommentModal.style.display = "none"
        reportCommentModalOverlay.style.display = "none"
    }, 50)
}

// TIME STAMP - MONTHS ARRAY
const months = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
]

const fetchComments = async endpoint => {
    try{
        const result = await (await fetch(endpoint)).json();
        console.log(result)
        commentsArr = [...result.results]

         if(commentsArr.length > 0){
            commentsArr.forEach((comment) => {
                let commentContainer = document.createElement('div')
                commentContainer.classList.add('comment-container')

                let userContainer = document.createElement('div')
                userContainer.classList.add('user')
                
                let userName = document.createElement('p')
                userName.innerHTML = comment.user.full_name
                
                let userProfileImage = document.createElement('img')
                if (comment.user.photo) {
                    userProfileImage.src = comment.user.photo
                }else{
                    userProfileImage.src = `${complaintsStaticPath}user-img-placeholder.svg/`
                }
                userProfileImage.alt = 'user profile image'
                
                let timeStampContainer = document.createElement('div')
                timeStampContainer.classList.add('time-stamp')

                
                let timeStamp = document.createElement('p')
                let d = new Date(Date.parse(comment.created_at))
                
                let year = d.getFullYear() 
                let date = d.getDate()
                
                
                let monthIndex = d.getMonth()
                let monthName = months[monthIndex]
                
                let hours = d.getUTCHours()
                let minutes = d.getUTCMinutes()

                if (hours < 10) {
                    hours = "0" + hours;
                }
                if (minutes < 10) {
                    minutes = "0" + minutes;
                }


                timeStamp.innerHTML = `${date} ${monthName} ${year}, ${hours}:${minutes}`


                let commentTextContainer = document.createElement('div')
                commentTextContainer.classList.add('comment-text')
                
                let commentText = document.createElement('p')
                commentText.innerHTML = comment.content
                
                let reportCommentContainer = document.createElement('div')
                reportCommentContainer.classList.add('report-comment-container')
                reportCommentContainer.addEventListener("click", checkReportCommentModalIsOpened);
                
                let reportCommentIcon = document.createElement('img')
                reportCommentIcon.src = complaintDetailStaticPath + 'report.svg'
                reportCommentIcon.alt = 'report comment icon'
                reportCommentIcon.classList.add('report-comment-icon')
                
                let reportCommentDescriptionContainer = document.createElement('div')
                reportCommentDescriptionContainer.classList.add('report-comment-description')
                
                let reportCommentDescription = document.createElement('p')
                reportCommentDescription.innerHTML = 'Şərhi şikayət et'
               

                userContainer.appendChild(userProfileImage)
                userContainer.appendChild(userName)

                timeStampContainer.appendChild(timeStamp)
                userContainer.appendChild(timeStampContainer)

                commentTextContainer.appendChild(commentText)
                
                reportCommentContainer.appendChild(reportCommentIcon)
                reportCommentDescriptionContainer.appendChild(reportCommentDescription)
                reportCommentContainer.appendChild(reportCommentDescriptionContainer)
                commentTextContainer.appendChild(reportCommentContainer)
                
                commentContainer.appendChild(userContainer)
                commentContainer.appendChild(commentTextContainer)
                commentsWrapper.appendChild(commentContainer)
            })
        }

        if(document.querySelector('.load-more')){
            document.querySelector('.load-more').remove();
        }
        let loadMoreBtn = document.createElement('button');
        loadMoreBtn.classList.add('load-more');
        loadMoreBtn.innerHTML += ` <p>Daha çox yüklə...</p>
                    <div class="loader-circle"></div>`

        if (result.next) {
            document.getElementById('comments-container').appendChild(loadMoreBtn);
            loadMoreBtn.addEventListener('click', function() {
                loadMoreBtn.classList.add('loading')
                setTimeout(function(){
                    loadMoreBtn.classList.remove('loading')
                    fetchComments(result.next);
                }, 200);
            })
        }
    }catch (error) {
        console.log(error)
        
    }
    
}

let reviewSlug = document.querySelector('main').dataset.review_slug

fetchComments(COMMENTS_API_URL + reviewSlug);