jonasled2/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

load comments from graphQL

Browse source
This commit is contained in:
Jonas Leder 2022-03-08 12:23:05 +01:00
parent f132ba2c55
commit 9b12fe2c94
No known key found for this signature in database
GPG key ID: 8A53DD45A7D7B44B
1 changed files with 37 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
js/customElements/commentsDisplay.js
View file

@ -1,48 +1,45 @@
class commentsDisplay extends HTMLElement {
constructor() {
super();
let path = window.location.pathname;
let pageName = path.split("/").pop();
this.getComments()
}
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
let comments = JSON.parse(xhr.responseText);
comments.forEach((element) => {
const h3 = document.createElement("h3");
h3.classList.add("commentTitle");
h3.innerText = element["name"];
this.appendChild(h3);
const commentDiv = document.createElement("div");
commentDiv.classList.add("comment");
this.appendChild(commentDiv);
const image = document.createElement("img");
image.src = element["gravatarURL"];
commentDiv.appendChild(image);
const article = document.createElement("article");
article.classList.add("commentArticle");
commentDiv.appendChild(article);
const commentText = document.createElement("p");
commentText.classList.add("commentText");
commentText.innerText = element["comment"];
article.appendChild(commentText);
});
} else {
let p = document.createElement("p");
p.innerText = "Leider konnte dieser Inhalt nicht geladen werden, bitte versuche die Seite neu zu laden oder komme später wieder zurück.";
this.appendChild(p);
}
}
async getComments() {
var graphql = JSON.stringify({
query: 'query($article: String!) { comments(article: $article) { name comment gravatarURL }}',
variables: {
"article": window.location.pathname
}
xhr.open("GET", "/API/projectComments.php?article=" + pageName);
xhr.send();
})
var requestOptions = {
method: 'POST',
body: graphql,
};
let comments = (await (await fetch("http://localhost:1234/API/graphql.php", requestOptions)).json()).data.comments;
comments.forEach((element) => {
const h3 = document.createElement("h3");
h3.classList.add("commentTitle");
h3.innerText = element["name"];
this.appendChild(h3);
const commentDiv = document.createElement("div");
commentDiv.classList.add("comment");
this.appendChild(commentDiv);
const image = document.createElement("img");
image.src = element["gravatarURL"];
commentDiv.appendChild(image);
const article = document.createElement("article");
article.classList.add("commentArticle");
commentDiv.appendChild(article);
const commentText = document.createElement("p");
commentText.classList.add("commentText");
commentText.innerText = element["comment"];
article.appendChild(commentText);
});
}
}