carhop__carhop-theme__DEV/resources/js/archives/archives.ts

//post-grid__toolbar-actions

export default function archivesInit() {

    const isArchivePage = document.querySelector('body.archive');
    if (!isArchivePage) return;


    const toolbar = document.querySelector('.post-grid__toolbar');
    if (!toolbar) return;
  
    const postGridToolbarActions = toolbar.querySelector('.post-grid__toolbar-actions');
    const currentPostType = postGridToolbarActions?.getAttribute('data-post-type') as string;
    const etiquettesSelect = toolbar.querySelector('select[name="etiquettes"]') as HTMLSelectElement;
    const auteursSelect = toolbar.querySelector('select[name="auteurs"]') as HTMLSelectElement;
    const sortBySelect = toolbar.querySelector('select[name="sort_by"]') as HTMLSelectElement;
    const rechercheInput = toolbar.querySelector('.search-bar input') as HTMLInputElement;

    console.log('currentPostType', currentPostType);
    console.log('etiquettesSelect', etiquettesSelect);
    console.log('auteursSelect', auteursSelect);
    console.log('sortBySelect', sortBySelect);
    console.log('rechercheInput', rechercheInput);

  // Évite les courses: annule les requêtes précédentes et ignore les réponses obsolètes
  let currentAbortController: AbortController | null = null;
  let lastRequestId = 0;


    // Debounce simple pour la recherche
    function debounce<T extends (...args: any[]) => void>(fn: T, waitMs: number) {
      let timeoutId: number | undefined;
      return (...args: Parameters<T>) => {
        if (timeoutId) window.clearTimeout(timeoutId);
        timeoutId = window.setTimeout(() => fn(...args), waitMs);
      };
    }

    async function hydratePosts() {

      const etiquetteValue = etiquettesSelect?.value ?? '';
      const auteurValue = auteursSelect?.value ?? '';
      const sortByValue = sortBySelect?.value ?? '';
      const rechercheValue = rechercheInput?.value ?? '';
      const postTypeValue = currentPostType ?? '';
 
  
      const params = new URLSearchParams({
        etiquette: etiquetteValue,
        auteur: auteurValue,
        sort_by: sortByValue,
        recherche: rechercheValue,
        post_type: postTypeValue,
      });
      console.log(params.toString());
      const url = `/wp-json/carhop-datas/v1/build/posts?${params.toString()}`;
 
  
      // Annule la précédente et prépare un nouvel identifiant
      if (currentAbortController) currentAbortController.abort();
      currentAbortController = new AbortController();
      const requestId = ++lastRequestId;
  
      try {
        const response = await fetch(url, { signal: currentAbortController.signal });
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const data = await response.json();

        console.log('data', data);
  
        // Ignore si une requête plus récente a été envoyée
        if (requestId !== lastRequestId) return;
  
        const articlesContainer = document.querySelector('.post-grid__list');
        if (!articlesContainer) return;
        articlesContainer.innerHTML = data.html_template;
  
        updatePostCount(data.post_count);
      } catch (error) {
        if ((error as any)?.name === 'AbortError') return;
        console.error('Erreur lors de la récupération des articles:', error);
      }
    }
  
    const hydratePostsDebounced = debounce(hydratePosts, 150);

    function resetCurrentFilters() {
      if (!etiquettesSelect || !auteursSelect || !rechercheInput) return;
  
      etiquettesSelect.value = '';
      auteursSelect.value = '';
      rechercheInput.value = '';
    }

    function setFilterByActivebutton(button: HTMLButtonElement) {
      const filterByButtons = document.querySelectorAll('.search-by button');
      if (!filterByButtons) return;
      filterByButtons.forEach((button) => {
        button.setAttribute('aria-selected', 'false');
      });
      button.setAttribute('aria-selected', 'true');
    }

    

    function handleFilterPostsBy() {
      const filterByButtons = document.querySelectorAll('.search-by button');
      if (!filterByButtons) return;
      filterByButtons.forEach((button) => {
        button.addEventListener('click', (e) => {
          e.preventDefault();
          setFilterByActivebutton(button as HTMLButtonElement);
          resetCurrentFilters();
          hydratePosts(); // immédiat sur action explicite
        });
      });
    }

    auteursSelect.addEventListener('change', (e) => {
      hydratePosts();
    });

    etiquettesSelect.addEventListener('change', (e) => {
      hydratePosts();
    });

    sortBySelect.addEventListener('change', (e) => {
      hydratePosts(); // immédiat pour le tri
    });
    rechercheInput.addEventListener('input', (e) => {
      hydratePostsDebounced(); // debounce pour la saisie rapide
    });
    handleFilterPostsBy();


    postGridToolbarActions.addEventListener('click', (e) => {
        e.preventDefault();
    });
}