index.js

let data;
let currentPage = -1;
let currentArticle = 0;
let loaderElement, articleContainer;
let totalPages;

const toggleLoader = () => {
    if (loaderElement.classList.contains('hidden')) {
        loaderElement.classList.remove('hidden');
    } else {
        loaderElement.classList.add('hidden');
    }
}
window.addEventListener('scroll', () => {
    const {
        scrollTop,
        scrollHeight,
        clientHeight
    } = document.documentElement;
    if (scrollTop + clientHeight >= scrollHeight - 200 && currentPage < totalPages - 1) {
        currentPage += 1;
        loadNews();
        //console.log(scrollTop + clientHeight, scrollHeight - 2 _000, scrollTop + clientHeight >= scrollHeight - 2 _000);
    }
}, {
    passive: true
});

const loadNews = async () => {
    toggleLoader();
    try {
        if (currentPage < 25) {
            const response = await getNews();
            showNews(await response);
        }
    } catch (e) {
        console.error(e);
        alert(e.message);
    } finally {
        toggleLoader();
    }
};

const getNews = async () => {
    let promiseList = [];
    for (let postNumber = currentPage * 20; postNumber < (currentPage * 20) + 20 && postNumber < data.length; postNumber++) {
        promiseList.push(fetch(data[postNumber]));
    }

    promiseList = await Promise.all(promiseList);
    promiseList = await promiseList.map(response => response.json());
    promiseList = await Promise.all(promiseList);
    return promiseList;
};

const showNews = async (articleList) => {

    let news = "";
    for (let article of articleList) {
        let date = new Date(article.time);
        news += `<div class="flex relative pt-10 pb-20 sm:items-center md:w-screen mx-auto">
        <div class="h-full w-6 absolute inset-0 flex items-center justify-center">
            <div class="h-full w-1 bg-gray-800 pointer-events-none"></div>
        </div>
        <div
            class="flex-shrink-0 w-10 h-10 rounded-full mt-10 sm:mt-0 inline-flex items-center justify-center bg-red-500 text-white relative z-10 title-font font-medium text-lg">
            ${currentArticle}</div>
        <div class="flex-grow md:pl-8 pl-6 flex sm:items-center items-start flex-col sm:flex-row ">
            
            <div class="h-full flex items-start">
                <div class="w-12 flex-shrink-0 flex flex-col text-center leading-none">
                <span class="text-gray-50 pb-2 mb-2 border-b-2 border-gray-700">${date.toLocaleString("default", { month: "short" })}</span>
                <span class="font-medium text-lg leading-none text-gray-100 title-font">${date.getDate()}</span>
                        </div>
                <div class="flex-grow pl-6 transition ease-in duration-700 transition-transform">
                ${(article.type)? `<span class="inline-block py-1 px-2 rounded bg-red-400 text-white text-opacity-75 text-xs font-medium tracking-widest">${article.type}</span>`: ""}
                <h1 class="title-font text-4xl font-medium text-white mb-3">${article.title}</h1>
                ${(article.text)?"<div class=\"leading-relaxed mb-3 truncate-article\">" + article.text + "</div>" : ""}
                
                <div class="flex items-center flex-wrap pb-4 mb-4 border-b-2 border-gray-800 border-opacity-75 mt-auto w-full">
    <a class="text-red-400 inline-flex items-center" href="${article.url}">Learn More
        <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path><path d="M12 5l7 7-7 7"></path></svg>
    </a>
    <span class="text-gray-500 mr-3 inline-flex items-center ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-800">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
  </svg>${(article.descendants)? article.descendants : (article.kids)? article.kids.length : 0}</span>
    <span class="text-gray-500 inline-flex items-center leading-none text-sm">
    <svg class="w-4 h-4 mr-1" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
    <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z">
    </path>
    </svg>${article.score}</span>
    </div>
                    <a class="inline-flex items-center">
                        <svg class="w-8 h-8 rounded-full flex-shrink-0 object-cover object-center" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                            <span
                            class="flex-grow flex flex-col pl-3"><span
                                class="title-font font-medium text-white">${article.by}</span></span></a>
                </div>
            </div>
        </div>
    </div>`;
        currentArticle++;
    }
    let newDiv = document.createElement("div");
    newDiv.innerHTML = news;
    articleContainer.appendChild(newDiv);
    new Cuttr(".truncate-article", {
        truncate: "sentences",
        length: 5,
    });
};


(() => {
    pm.getData((err, values) => {
        if (err) return console.log(err);
        console.log(err, values);
        data = values.data;
        loaderElement = document.getElementById('loader');
        articleContainer = document.getElementById('contents');
        totalPages = data.length / 20;
        currentPage++;
        loadNews()
    });
})();