import { addBanner, addArticle, addHeader, addSubHeader, addParagraph, addCaption, addQuote } from '/scripts/article.js';
import { addInset, addInsetList, addInsetCodeListing, addInsetBulletList } from '/scripts/inset.js';
import { addImageWithCaption, addButtonGroup } from '/scripts/visuals.js';
import { menuLearningRestApis2 } from '/scripts/buttongroups.js';
import { boards } from '../scripts/sample_request.js';

const main = document.querySelector("main")
main.append(addBanner("Learning REST APIs", "Morten Rand-Hendriksen : February 2018", "REQUEST"))
main.append(addArticle())
const article = document.querySelector("article")
article.append(addHeader("Sending a Request from a JavaScript File"))
article.append(addParagraph("With these two functions, I am trying to generate a call from effectively inside a web page by creating a function to send a request (that is getBoards) and a function that generates an HTML element to be added to the page.  This could most likely be done with a single function but this is just an experiment so I am not too concerned about design principles here, but rather in whether or not the method works."))
article.append(addInsetCodeListing(["function boards() {", "    const paragraph = document.createElement(\"p\");", "    paragraph.innerHTML=getBoards();", "","    console.log(\"Calling the boards function......\");","" , "    return paragraph;", "}", "", "function getBoards() {", "    const responseText=\"\";", "    var xhr = new XMLHttpRequest();", "    xhr.open(\"GET\", \"http://localhost:3000/api/boards/\", true);", "    xhr.onload = function() {", "        console.log(xhr.responseText);", "    };", "    xhr.send();", "", "    console.log(\"Calling the getBoards function......\");", "    console.log(\"Returning response text: $responseText\");", "    return responseText;", "}", "", "export { boards }"]))
article.append(addParagraph("The console logging is for troubleshooting purposes, so that I could confirm that the appropriate functions were being called, what response the request is getting and what was being returned by the getBoards function."))
main.append(menuLearningRestApis2())