Fetch repos from GitHub and display them on button click.

jakaarl · jakaarl · commit c32349b46706 · 2018-03-08T19:53:10.000+01:00
diff --git a/Week8/solution/public/index.html b/Week8/solution/public/index.html
@@ -10,7 +10,7 @@ <h1>Async fetch</h1>
         <div>
             <button id="button" type="button">Click me!</button>
         </div>
-        <div id="result"></div>
+        <ul id="results"></ul>
     </body>
     <script src="./scripts/app.js"></script>
 </html> 
diff --git a/Week8/solution/sources/app.js b/Week8/solution/sources/app.js
@@ -1,6 +1,6 @@
 "use strict";
 
-function buttonClicked() {
+function buttonClicked() { // eslint-disable-line no-unused-vars
   console.log("You clicked me!"); // eslint-disable-line no-console
 }
 
@@ -11,25 +11,27 @@ function createQueryString(params) {
   }, "") : "";
 }
 
-function makeGetRequest(url, params, callback) {  // eslint-disable-line no-unused-vars
+function makeGetRequest(url, params, callback) {
   const request = new XMLHttpRequest();
   request.onreadystatechange = () => {
     const response = {};
-    if (request.readyState === 4 && request.status === 200) {
-      response.responseText = request.responseText;
-    } else {
-      response.err = {
-        readyState: request.readyState,
-        status: request.status,
-        message: request.statusText
-      };
+    if (request.readyState === XMLHttpRequest.DONE) {
+      if (request.status === 200) {
+        response.data = JSON.parse(request.responseText); // eslint-disable-line no-undef
+      } else {
+        response.err = {
+          status: request.status,
+          message: request.statusText
+        };
+      }
+      callback(response);
     }
-    callback(response);
   };
   const queryString = createQueryString(params);
   request.open("GET", url + queryString, true);
   request.send();
 }
 
 module.exports.buttonClicked = buttonClicked; // eslint-disable-line no-undef
-module.exports.createQueryString = createQueryString; // eslint-disable-line no-undef
+module.exports.createQueryString = createQueryString; // eslint-disable-line no-undef
+module.exports.makeGetRequest = makeGetRequest; // eslint-disable-line no-undef
diff --git a/Week8/solution/sources/main.js b/Week8/solution/sources/main.js
@@ -1,4 +1,42 @@
 "use strict";
 const app = require("./app"); // eslint-disable-line no-undef
 const buttonElem = document.getElementById("button");
-buttonElem.addEventListener("click", app.buttonClicked);
+const listElem = document.getElementById("results");
+
+function listGitHubRepos() {
+  const organization = "HackYourFuture";
+  const url = `https://api.github.com/orgs/${organization}/repos`;
+  const params = [
+    { name: "type", value: "public" }
+  ];
+  app.makeGetRequest(url, params, handleResponse);
+}
+
+function handleResponse(response) {
+  let results = [];
+  if (response.err) {
+    console.log("Request failed: " + response.err); // eslint-disable-line no-console
+  } else {
+    results = response.data.map(function (entry) {
+      return { name: entry.name, description: entry.description };
+    });
+  }
+  updateList(results);
+}
+
+function updateList(results) {
+  clearList();
+  results.forEach(element => {
+    let item = document.createElement("li"); // eslint-disable-line no-undef
+    item.innerText = `${element.name}${element.description ? " - " + element.description : ""}`;
+    listElem.appendChild(item);
+  });
+}
+
+function clearList() {
+  while (listElem.hasChildNodes()) {
+    listElem.removeChild(listElem.lastChild);
+  }
+}
+
+buttonElem.addEventListener("click", listGitHubRepos);
