api_playground

const $ = s => document.querySelectorAll(s);

$("[data-js-toggle]").forEach(elt => {
  const class_name = elt.getAttribute("data-js-toggle");
  elt.addEventListener("click", function(e) {
    const activated = elt.parentElement.parentElement.classList.toggle("active");
    elt.parentElement.parentElement.querySelector("." + class_name).classList.toggle("hidden");
    
    if (!activated) elt.innerHTML = "+";
    else elt.innerHTML = "−";
  });
});


$("[data-js-req-btn]").forEach(btn => {
  btn.addEventListener("click", function() {
    const parent_elt = btn.parentElement,
      output_container = parent_elt.querySelector("[data-js-resp]"),
      headers = parent_elt.querySelector("[data-js-req-headers]").value,
      data = parent_elt.querySelector("[data-js-req-data]").value,
      path = parent_elt.querySelector("[data-js-req-path]").value,
      method = parent_elt.querySelector("[data-js-req-method]").value;

    btn.innerHTML = "Making request...";
    fetch(path, {headers: makeHeaders(headers), body: data, method: method})
      .then(resp => writeStatus(output_container, resp))
      .then(data => writeData(output_container, data))
      .then(() => btn.innerHTML = "Make Request");
  });
});

function makeHeaders(raw_headers_string) {
  const headers = raw_headers_string.split("\n")
    .map(raw_header => raw_header.split(":"))
    .reduce((acc, [key, value]) => Object.assign(acc, {[key.trim()]: value.trim()}), {});
  return headers;
}

function writeStatus(container, resp) {
  const label = document.createElement("label");
  label.innerHTML = "Response: " + resp.status + " " + resp.statusText;

  container.innerHTML = "";
  container.appendChild(label);

  return resp.text()
}

function writeData(container, data) {
  //const string_data = JSON.stringify(json_data),
  const textarea = document.createElement("textarea");

  textarea.style.minHeight = "100px";
  textarea.setAttribute("readonly", "");
  textarea.innerHTML = data;

  container.appendChild(textarea);
  container.classList.remove('hidden');
}