if (localStorage.getItem("user-token") == null) {
  window.location.replace(document.location.origin + "/login");
} else {
  getArticles();
}

function apiCall(url, method) {
  let xhr = new XMLHttpRequest();
  xhr.withCredentials = true;

  xhr.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
      if (this.status === 401) {
        window.location.replace(document.location.origin + "/login/");
      } else {
        runRenderProcess(JSON.parse(this.responseText));
        localStorage.setItem("item-cache-date", new Date());
        localStorage.setItem("item-cache-data", this.responseText);
      }
    }
  });
  xhr.open(method, "/api/v1" + url);
  xhr.setRequestHeader("content-type", "application/json");
  xhr.setRequestHeader("user-token", localStorage.getItem("user-token"));
  return xhr;
}

function runRenderProcess(data) {
  params = renderArticle(data["feeds"]);
  // document.getElementById("mainContainer").innerHtml = params;
}
function renderArticle(feeds) {
  let placeholder = "<div>";
  for (i = 0; i < feeds.length; i++) {
    let title = feeds[i]["title"];
    placeholder += '<div class="itemContainer">' + "<p>" + title + "</p>";
    let items = feeds[i]["items"];

    for (t = 0; t < items.length; t++) {
      placeholder +=
        '<div class="article">' +
        "<p>" +
        items[t].title +
        "</p>" +
        "<p>" +
        items[t].content +
        "</p>";
    }

    placeholder += "</div>" + "</div>";
  }
  placeholder += "</div>";
  document.getElementById("mainContainer").innerHTML = placeholder;
}

function getArticles() {
  let call = apiCall("/article/get", "GET");
  call.send();
}