website/js/customElements/commentsDisplay.js

class commentsDisplay extends HTMLElement {
    constructor() {
        super();
        this.getComments()
    }

    async getComments() {
        var graphql = JSON.stringify({
        query: 'query($article: String!) { comments(article: $article) { name comment gravatarURL }}',
        variables: {
            "article": window.location.pathname
        }
        })
        var requestOptions = {
        method: 'POST',
        body: graphql,
        };
        let comments = (await (await fetch("/API/graphql.php", requestOptions)).json()).data.comments;
        this.innerHTML = "";
        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);

        });
    }
}

customElements.define("jl-comments_display", commentsDisplay);