Week 6 Home Work.js

(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/



})();