Projet : Simple Blog From Scratch Part8

let currentPage = 1;
let postsPerPage = 6;
let totalPages = 1;
let allPosts = [];

async function fetchPosts() {
    try {
        const response = await fetch(`${urlApi}/posts/all`, {
            method: 'GET',
        });

        if (response.status === 200) {
            const data = await response.json();
            allPosts = data.allPosts;
            // Calcul du nombre total de pages en prenant le nombre total d'articles divisisé par la variable postsPerPage définie plus haut
            totalPages = Math.ceil(allPosts.length / postsPerPage);
            // Appel de la fonction renderPage(currentPage) afin d'afficher les articles de la première page 
            renderPage(currentPage);
            // Appel de la fonction renderPaginationControls() permettant de naviguer dans les pages d'articles
            renderPaginationControls();
        } else {
            console.log(response);
        }
    } catch (error) {
        console.log(error);
    }
};

function renderPage(page) {
    const postsContainer = document.getElementById(postsContainerId);
    const template = document.getElementById(templateId);
    // Permet d'effacer le contenu précédent
    postsContainer.innerHTML = '';
    // Calcul des index de début et de fin pour les articles de cette page
    const startIndex = (page - 1) * postsPerPage;
    const endIndex = Math.min(startIndex + postsPerPage, allPosts.length);

    // Boucle pour ajouter les posts de la page actuelle dans le conteneur "postsContainer" défini plus haut
    for (let i = startIndex; i < endIndex; i++) {
        const post = allPosts[i];
        const seePost = document.importNode(template.content, true);
        
        seePost.getElementById('postTitle').textContent = post.title;
        seePost.getElementById('postContent').textContent = (post.content.length > 120 ? post.content.slice(0, 120) + '...' : post.content);
        seePost.getElementById('postLink').href = `post.html?id=${post.id}`;
        postsContainer.appendChild(seePost);
    }
};
 
function renderPaginationControls() {
    const paginationContainer = document.getElementById('paginationControls');
    paginationContainer.innerHTML = '';

    const prevButton = document.createElement('button');
    prevButton.classList.add('paginationBtn');
    prevButton.textContent = '<<';
    prevButton.disabled = currentPage === 1;
    // Fonction de clic pour changer de page
    prevButton.onclick = () => {
        if (currentPage > 1) {
            currentPage--;
            renderPage(currentPage);
            renderPaginationControls();
        }
    };
    paginationContainer.appendChild(prevButton);
    
    // Affiche le numéro de page courant et total
    const pageInfo = document.createElement('span');
    pageInfo.classList.add('paginationNumbers');
    pageInfo.textContent = `${currentPage} / ${totalPages}`;
    paginationContainer.appendChild(pageInfo);

    const nextButton = document.createElement('button');
    // Fonction de clic pour changer de page
    nextButton.classList.add('paginationBtn');
    nextButton.textContent = '>>';
    nextButton.disabled = currentPage === totalPages;
    nextButton.onclick = () => {
        if (currentPage < totalPages) {
            currentPage++;
            renderPage(currentPage);
            renderPaginationControls();
        }
    };
    paginationContainer.appendChild(nextButton);
};

fetchPosts();

    <main class="general">
        <!-- La section n'entoure désormais plus le template du fait de la modification apportée au script fetchPosts.js -->
        <section class="posts" id="allPosts"></section>
        <template id="templatePosts">
            <div class="post">
                <h2 id="postTitle"></h2>
                <p id="postContent"></p>
                <a id="postLink" href="#">Lire plus</a>
            </div>
        </template>
        <div class="pagination" id="paginationControls"></div>
    </main>