Create HomeWork.js

M3kH · web-flow · commit c94839a17536 · 2017-04-17T23:08:25.000+02:00
diff --git a/Week6/HomeWork.js b/Week6/HomeWork.js
@@ -0,0 +1,115 @@
+(function(){
+  var GitHubUrl = 'https://api.github.com';
+
+  // This function performs an http request to a server
+  // Return a promise https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise
+  function Ajax ( method, url ){
+
+    // For promise take a first argument a function
+    // and the first two parameters are two function
+    // The first is resolve that can be call when the async operation goes well
+    // and the second is reject that can be call when something goes wrong
+    return new Promise(function(resolve, reject){
+      var req = new XMLHttpRequest();
+      req.addEventListener('load', function(){
+        // Our request is loaded
+        try{
+          resolve( JSON.parse(this.responseText) )
+        }catch(e){
+          reject( new Error(e) )
+        }
+      });
+      req.open(method, url);
+
+      // This is needed to autheticate your requests
+      // For don't get limits on api
+      req.setRequestHeader(
+        'Authorization',
+        'token 9d232e8e02c4b19142be0d89a0480a8109fd257b'
+      );
+
+      req.send();
+    })
+  }
+
+  // We declare a function that fetch the repositories of one organization
+  // And returns the Promise the above function returns
+  function fetchReposFromOrganization( organizationName ){
+    return Ajax( 'GET', [GitHubUrl, 'orgs', organizationName, 'repos'].join('/'));
+  }
+
+  var fetchedRepos = [];
+
+  // Here we create a list
+  function renderListOfRepositories ( res ){
+    var html = [];
+    var promisesForContributors = []
+
+    // Here we loop trough the repos and we create some html
+      for(var k=0; k<res.length; k++){
+        var repo = res[k];
+        var repoName = repo.full_name;
+        var description = repo.description;
+        var link = repo.html_url;
+
+        // Since this information is handy later on to get the container
+        // Where to render the list of contributors we create a reference in another variable.
+        fetchedRepos.push(repo.id);
+
+        // This is just string concatenation with some html
+        html.push([
+          '<li id="repo-', repo.id, '" >',
+          '<a href="', link, '" />',
+          '<h3>', repoName, '</h3>',
+          '<p>', description, '</p>',
+          '</a>',
+          '<div class="contributors" ></div>',
+          '</li>'
+        ].join(''));
+
+        // We create here a new promise for fetching the contributors of the repo and we push
+        // to an Array of only promises
+        promisesForContributors.push(fetchContributors(repo.owner.login, repo.name))
+      }
+    // Once the loop is done we paste in the html the result of our template
+    document.getElementById('app').innerHTML = html.join('')
+
+    // And we ask to resolve the Array of promises trough Promise.all
+    // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
+    return Promise.all(promisesForContributors);
+  }
+
+  // This get used above for fetch the Contributors (line 73)
+  function fetchContributors( owner, repo ){
+    return Ajax( 'GET', [GitHubUrl, 'repos', owner, repo, 'contributors'].join('/'));
+  }
+
+  // Alike the renderListOfRepositories this renders the list of Contributors
+  function renderContributors( repoContributors ){
+    // The first array is the repo posiotion (equivalent to the promise relsolved order)
+    for(var i=0; i<repoContributors.length; i++){
+      var contributors = repoContributors[i];
+
+      // We can have more then one contributor for repository so we iterate on them to template them
+      var htmlContributors = ['<ul>'];
+      for(var k=0; k<contributors.length; k++){
+        var contributor = contributors[k];
+        htmlContributors.push(`<li><img src="${contributor.avatar_url}" /><b>${contributor.login}</b></li>`)
+      }
+      htmlContributors.push('</ul>');
+      // We find the reference (#repo-${id}) for the DOM element and we paste the template of contributors
+      document.querySelector(`#repo-${fetchedRepos[i]} .contributors`).innerHTML = htmlContributors.join('');
+    }
+
+  }
+
+  // Perform an Ajax function and return the result to the next then()
+  fetchReposFromOrganization('hackyourfuture')
+  // This get the repos list
+    .then(renderListOfRepositories)
+  // Render the list of contributors
+    .then(renderContributors);
+
+  // PROFIT \o/
+
+})();
