fadikurdi / hyf-javascript3 Goto Github PK

"use strict";

{

  function start() {
    const input = document.getElementById('input');
    const repoContainer = document.getElementById('rep');
    const contributorContainer = document.getElementById('users');

    const clearContainers = () => {
      contributorContainer.innerHTML = "";
      repoContainer.innerHTML = "";
    };

    document
      .getElementById('rep_Button')
      .addEventListener('click', () => {
        clearContainers();
        onSearchRepoClick(repoContainer, contributorContainer, input.value);
      });
    document
      .getElementById('user_Button')
      .addEventListener('click', () => {
        clearContainers();
        onSearchUserClick(repoContainer, input.value);
      });
  }

  function fetchJSON(url) {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url);
      xhr.responseType = 'json';
      xhr.onload = () => resolve(xhr.response);
      xhr.onerror = () => reject(xhr.statusText);
      xhr.send();
    });
  }

  function onSearchRepoClick(repoContainer, contributorContainer, repoName) {
    const url = 'https://api.github.com/repos/HackYourFuture/' + repoName;
    fetchJSON(url)
      .then(data => {
        if (data.message) {
          throw new Error(data.message);
        }

        createAndAppend('h1', repoContainer, 'Repository Name : ' + data.name);
        createAndAppend('h2', repoContainer, 'Description : ' + data.description);
        createAndAppend('h3', repoContainer, 'Created at : ' + formatDate(data.created_at));
        createAndAppend('h3', repoContainer, 'Updated at ' + formatDate(data.updated_at));
        createAndAppend('h3', repoContainer, 'Pushed at : ' + formatDate(data.pushed_at));
        createAndAppend('h3', repoContainer, 'Forks : ' + data.forks);
        createAndAppend('h3', repoContainer, 'On Branch : ' + data.default_branch);

        console.log(data);
        const hyfRepLink = `<a href="${data.html_url}" target="_blank">View ${data.name}</a>`;
        createAndAppend('h3', repoContainer, hyfRepLink);
        return fetchJSON(data.contributors_url);
      })
      .then(contributors => {
        createAndAppend('h2', contributorContainer, 'Contributors : ');
        contributors.forEach(contributor => {
          createAndAppend('h2', contributorContainer, 'Name : ' + contributor.login);
          const contributorImgLink = `<img src="${contributor.avatar_url}">`;
          createAndAppend('div', contributorContainer, contributorImgLink);
          createAndAppend('h2', contributorContainer, 'contributions : ' + contributor.contributions);
        });
      })
      .catch(error => {
        createAndAppend('h1', repoContainer, error.message);
      });
  }

  function formatDate(dateString) {
    return new Date(dateString).toLocaleString();
  }

  function onSearchUserClick(repoContainer, userName) {
    const url = "https://api.github.com/users/" + userName + "/repos";
    fetchJSON(url)
      .then(data => {
        if (data.message) {
          throw new Error(data.message);
        }

        createAndAppend('h1', repoContainer, data[0].owner.login);
        createAndAppend('img', repoContainer, null, {
          src: data[0].owner.avatar_url
        });
        createAndAppend('a', repoContainer, `<h3>Visit user</h3>`, {
          href: data[0].owner.html_url,
          target: '_blank'
        });
        createAndAppend('h1', repoContainer, 'Repositories :');

        data.forEach(repo => {
          createAndAppend('h2', repoContainer, 'Repository name : ' + repo.name);
          createAndAppend('h3', repoContainer, 'Description : ' + repo.description);
          createAndAppend('h3', repoContainer, 'Created at : ' + formatDate(repo.created_at));
          createAndAppend('h3', repoContainer, 'Updated at : ' + formatDate(repo.updated_at));
        });
      })
      .catch(error => {
        createAndAppend('h1', repoContainer, error.message);
      });
  }

  function createAndAppend(name, parent, innerHTML, attributes) {
    attributes = attributes || {};
    const child = document.createElement(name);
    parent.appendChild(child);
    if (innerHTML != null) {
      child.innerHTML = innerHTML;
    }
    Object.keys(attributes).forEach(name => {
      child.setAttribute(name, attributes[name]);
    });
    return child;
  }

  start();
}