pourquoi la pagination ne fonctionne pas ? import { ENDPOINT  } from "../config.js";
import PersonnageModel from "../models/PersonnageModel.js";

export default class PersonnagesProvider{

  static FetchPersonnages = async (page = 1) => {
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    };
    try {
      const response = await fetch(`${ENDPOINT}/personnages?_page=${page}&_per_page=5`, options);      const json = await response.json();

      return json.map(
        personnage => new PersonnageModel(
          personnage.id, 
          personnage.nom, 
          personnage.classe, 
          personnage.niveau, 
          personnage.note, 
          personnage.experience, 
          personnage.statistiques, 
          personnage.img)
      );
  
    } catch (err) {
      console.log('Erreur', err)
    }
  }

  static searchPersonnages = async (searchTerm) => {
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    };
    try {
      const response = await fetch(`${ENDPOINT}/personnages`, options)
      const json = await response.json();
      return json.filter(personnage => personnage.nom.toLowerCase().includes(searchTerm));
    } catch (err) {
      console.log('Erreur', err)
    }
  }

  static getPersonnages = async (id) => {
    const options = {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    };
    try{
      
      const response = await fetch(`${ENDPOINT}/personnages?id=` + id, options)
      const json = await response.json();
      return new PersonnageModel(json[0].id, json[0].nom, json[0].classe, json[0].niveau, json[0].note, json[0].experience, json[0].statistiques, json[0].img);

    }catch (err){
      console.log('Erreur', err)
    }
  }

  static updatePersonnage = async(personnage) => {
    const options = {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        "id": personnage.id,
        "nom": personnage.nom,
        "classe": personnage.classe,
        "niveau": personnage.niveau,
        "note": personnage.note,
        "experience": personnage.experience,
        "img": personnage.img,
        "statistiques": personnage.statistiques
      })
    };

    try{
      const response = await fetch(`${ENDPOINT}/personnages/` + personnage.id, options)
      const json = await response.json();

      return new PersonnageModel(json.id, json.nom, json.classe, json.niveau, json.note, json.experience, json.statistiques, json.img);

    }catch(err){
      console.log('Erreur : ', err)
    }
  }  
  static async getFavoritePersonnages() {
    let allPersonnages = await this.FetchPersonnages();
    let favorites = FavoriteManager.getFavorites();
    return allPersonnages.filter(personnage => favorites.includes(personnage.id));
  }
}import PersonnagesProvider from "../../services/PersonnagesProvider.js";
import FavoriteManager from '../../services/FavoriteManager.js';
import { renderNavbar } from "./navBar.js";
import LazyLoading from "../../services/LazyLoading.js";

export default class Home {
  constructor(page = 1, personnages = []) {
    this.page = page;
    this.personnages = personnages;
  }
  async render() {
    console.log(this.page);
    this.personnages = await PersonnagesProvider.FetchPersonnages(this.page);
    console.log(this.personnages)
    let html = `<div class="personnages-container">
      ${this.personnages
        .map(
          (personnage) => /*html*/ `
          <div class="personnage">
            <a href="/#/personnage/${personnage.id}">
              <img class="personnage-img lazyloading" data-src="${personnage.img}" alt="${personnage.nom}">
            </a>
            <p>${personnage.nom}  <a id="favori-${personnage.id}" onclick="FavoriteManager.toggleFavorites('${personnage.id}');">
            ${FavoriteManager.isFavorite(personnage.id) ? 
            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16"><path d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/></svg>' : 
            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16"><path d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/></svg>'} 
        </a></p>
        
        </div>
        `
        )
        .join("\n ")}
        </div>
        <button class="btn" id="load-more">Page suivante</button>`;

    return /*html*/ `
      ${renderNavbar()}
      ${html}
    `;
  }

  async after_render(){
    document.getElementById('load-more').addEventListener('click', async () => {
      this.page++;
      let content = document.querySelector('#content');
      let p = new Home(this.page); 
      content.innerHTML = await p.render();
      await p.after_render();     
    });
    LazyLoading.init();
  }
}