Implemented API pagination with fetch

source/javascripts/hackathon.js

@@ -21,31 +21,34 @@ var hackathonIssueID = '14';
 var apiHost = 'https://gitlab.com/api/v4';
 var gitlabProjectID = '9821951';
 var apiEndpoint = '/projects/' + gitlabProjectID + '/issues/' + hackathonIssueID + '/related_merge_requests';
-// TODO: needs pagination
-var apiPagination = '?per_page=100';
-var apiURL = apiHost + apiEndpoint + apiPagination; 
-var request = new XMLHttpRequest();
-request.open('GET', apiURL, true);
-request.onload = function () {
-  var data = JSON.parse(this.response);
-  var mrCount = 0;
-  var boxMessage = '';
-  if (request.status >= 200 && request.status < 400) {
-    data.forEach(mr => {
-      mrCount += 1;
-    });
-
-    boxMessage = mrCount + ' MRs submitted '
-      + ' at the last Hackathon ';
+var apiURL = apiHost + apiEndpoint;
+const limitPerPage = 100;
+const getRelatedMRs = async function(pageNo = 1) {
+  let apiPaginatedURL = apiURL + `?page=${pageNo}&per_page=${limitPerPage}`;
+  var apiResults = await fetch(apiPaginatedURL)
+                           .then(resp=>{
+                             return resp.json();
+                           });
+  return apiResults;
+}
+const getAllRelatedMRs = async function(pageNo = 1) {
+  const results = await getRelatedMRs(pageNo);
+  if (results.length > 0) {
+    return results.concat(await getAllRelatedMRs(pageNo + 1));
   } else {
-    boxMessage = 'Error fetching merge requests';
+    return results;
   }
-  document.getElementById('hackathonMRCount').innerHTML = boxMessage;
-}
-request.send();
+};
+(async ()=>{
+
+    const entireList = await getAllRelatedMRs();
+    var boxMessage = entireList.length + ' MRs submitted '
+      + ' at the last Hackathon!';
+    document.getElementById('hackathonMRCount').innerHTML = boxMessage;
\ No newline at end of file
+})();
\ No newline at end of file