JavaScript - Fluid Topics

(async () => {
  const FTAPI = await new window.fluidtopics.FluidTopicsApi();
  FTAPI["Ft-Calling-App"] = "page-designer";

  let allResults = []; // Store all the fetched results
  let currentPage = 1; // Initialize the current page of the table
  const resultsPerPage = 10; // Number of results to display per page of the table

  /********* Search Request **********/

  async function fetchResults() {
    let body = {
      "filters": [{ 'key': 'ft:editorialType', values: ['book'] }],
      "paging": {
        "perPage": 50
      }
    };

    try {
      let apiMaps = await FTAPI.post('/api/khub/clustered-search', body);

      allResults = apiMaps.results.map(result => {
        let entry = result.entries[0];
        return {
          'type': entry.type,
          'url': entry.map.readerUrl,
          'title': entry.map.title,
          'metadata': entry.map.metadata
        };
      });

      displayResults(currentPage);
    } catch (error) {
      console.error('Error fetching search results:', error);
    }
  }

  /********* Metadata **********/

  function get_metadata_value_by_key(metas, key) {
    let o = metas.find(e => e.key === key);
    return (o === undefined ? '' : o.values.join(', '));
  }

  /********* Results Display **********/

  function displayResults(page) {
    // Calculate start and end indices for slicing the results
    const start = (page - 1) * resultsPerPage;
    const end = start + resultsPerPage;
    const paginatedResults = allResults.slice(start, end);

    let tbody = document.querySelector("#result_table tbody");
    tbody.innerHTML = ""; // Clear previous results from tbody

    paginatedResults.forEach(r => {
      let row = tbody.insertRow();
      let cell = row.insertCell();
      cell.innerHTML = r.type;
      cell = row.insertCell();
      cell.innerHTML = `<a href="${r.url}">${r.title}</a>`;
      cell = row.insertCell();
      cell.innerHTML = get_metadata_value_by_key(r.metadata, 'ft:lastEdition');
    });

    // Pagination
    let div_paging = document.getElementById("result_paging");
    div_paging.innerHTML = ""; // Clear previous pagination

    if (currentPage > 1) {
      let prevButton = document.createElement('button');
      prevButton.innerText = 'Prev';
      prevButton.onclick = () => {
        if (currentPage > 1) {
          currentPage -= 1;
          displayResults(currentPage);
        }
      };
      div_paging.appendChild(prevButton);
    }

    let total_pages = Math.ceil(allResults.length / resultsPerPage);
    let pageInfo = document.createElement('span');
    pageInfo.innerText = `${currentPage}/${total_pages}`;
    div_paging.appendChild(pageInfo);

    if (currentPage < total_pages) {
      let nextButton = document.createElement('button');
      nextButton.innerText = 'Next';
      nextButton.onclick = () => {
        if (currentPage < total_pages) {
          currentPage += 1;
          displayResults(currentPage);
        }
      };
      div_paging.appendChild(nextButton);
    }
  }

  // Initial fetch
  fetchResults();
})();