/* 
HTML
<h1>
 Recent Ramblings
</h1>
<div id="articles">
</div>
*/

const fetchArticles = async (query, variables = {}) => {
  const data = await fetch("https://api.hashnode.com/", {
    method: "POST",
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query,
      variables
    })
  });
  return data.json();
}

const articleQuery = `
query GetUserArticles($page: Int!) {
        user(username: "sarahcodes") {
            publication {
                posts(page: $page) {
                    title
                    brief
                    coverImage
                    slug
                }
            }
        }
    }
`;

fetchArticles(articleQuery, {
    page: 0
  })
  .then(result => {
    console.log(result.data.user)
    const articles = result.data.user.publication.posts;
    let container = document.createElement('div');
    container.classList.add("row");
    articles.forEach(article => {

      let link = document.createElement('a');
      link.href = `https://sarahdepalo.hashnode.dev/${article.slug}`;
      
      let articleContainer = document.createElement('div');
      articleContainer.classList.add("col")

      let title = document.createElement('h2');
      title.innerText = article.title;

      let image = document.createElement('img');
      image.src = article.coverImage;

      let brief = document.createElement('p');
      brief.innerText = article.brief;
			
      container.appendChild(link);
      link.appendChild(articleContainer);
      articleContainer.appendChild(title);
      articleContainer.appendChild(image);
      articleContainer.appendChild(brief);
    })
    document.querySelector('#articles').appendChild(container);
  })