tchapeaux · AlfiYusrina · May 27, 2019 · May 27, 2019 · May 30, 2019 · Jun 6, 2019
diff --git a/alfi.txt b/alfi.txt
@@ -0,0 +1 @@
+Week 1 Homework
diff --git a/homework/App.js b/homework/App.js
@@ -12,23 +12,37 @@ class App {
    * @param {string} url The GitHub URL for obtaining the organization's repositories.
    */
   async initialize(url) {
-    // Add code here to initialize your app
-    // 1. Create the fixed HTML elements of your page
     // 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your <select> element
 
     const root = document.getElementById('root');
-
-    Util.createAndAppend('h1', root, { text: 'It works!' }); // TODO: replace with your own code
+    const header = Util.createAndAppend('header', root, { class: 'header' });
+    Util.createAndAppend('p', header, { text: 'Hack Your Future Repositories:' });
+    const repoSelector = Util.createAndAppend('select', header, { class: 'repo-selector' });
+    const container = Util.createAndAppend('div', root, { id: 'container', class: 'container' });
+    repoSelector.addEventListener('change', event => {
+      const repoId = parseInt(event.target.value);
+      this.setRepo(repoId);
+    });
 
     try {
       const repos = await Util.fetchJSON(url);
       this.repos = repos.map(repo => new Repository(repo));
       // TODO: add your own code here
+      repoSelector.innerHTML = this.repos
+        .map((repo, i) => `<option value="${i}">${repo.name()}</option>`)
+        .join('');
     } catch (error) {
       this.renderError(error);
     }
   }
 
+  setRepo(repoId) {
+    this.fetchContributorsAndRender(repoId);
+    // removeAllChildren(tableBody);
+    // createRepoInfo(repoId);
+    // createContributorItems(data[repoId].contributors_url);
+  }
+
   /**
    * Removes all child elements from a container element
    * @param {*} container Container element to clear
@@ -53,8 +67,13 @@ class App {
       App.clearContainer(container);
 
       const leftDiv = Util.createAndAppend('div', container);
+      leftDiv.className = 'left-div';
+      leftDiv.className += ' whiteframe';
       const rightDiv = Util.createAndAppend('div', container);
-
+      rightDiv.className = 'right-div';
+      rightDiv.className += ' whiteframe';
+      Util.createAndAppend('p', rightDiv, { class: 'contributor-header', text: 'Contributors' });
+      Util.createAndAppend('ul', rightDiv, { class: 'contributor-list' });
       const contributorList = Util.createAndAppend('ul', rightDiv);
 
       repo.render(leftDiv);
@@ -72,7 +91,10 @@ class App {
    * @param {Error} error An Error object describing the error.
    */
   renderError(error) {
-    console.log(error); // TODO: replace with your own code
+    Util.createAndAppend('div', root, {
+      class: 'alert-error',
+      text: `Sorry, there's something wrong.`,
+    });
   }
 }
 

diff --git a/homework/Contributor.js b/homework/Contributor.js
@@ -14,6 +14,21 @@ class Contributor {
    */
   render(container) {
     // TODO: replace the next line with your code.
-    Util.createAndAppend('pre', container, JSON.stringify(this.contributor, null, 2));
+
+    const li = Util.createAndAppend('li', container, {
+      class: 'contributor-item',
+      'aria-label': this.contributor.login,
+    });
+    li.innerHTML = `<img src="${
+      this.contributor.avatar_url
+    }" height="48" class="contributor-avatar">
+                <div class="contributor-data">
+                  <a href="https://github.com/${this.contributor.login}" target="_blank">${
+      this.contributor.login
+    }</a>
+                  <span class=>${this.contributor.contributions}</span>
+                </div>`;
+
+    // Util.createAndAppend('pre', container, JSON.stringify(this.contributor, null, 2));
   }
 }
diff --git a/homework/Repository.js b/homework/Repository.js
@@ -14,7 +14,36 @@ class Repository {
    */
   render(container) {
     // TODO: replace the next line with your code.
-    Util.createAndAppend('pre', container, JSON.stringify(this.repository, null, 2));
+    const table = document.createElement('table');
+    const tableBody = document.createElement('tbody');
+    table.appendChild(tableBody);
+    container.appendChild(table);
+
+    const makeRow = (label, content) => {
+      const tableRow = document.createElement('tr');
+      tableBody.appendChild(tableRow);
+      const tableData = document.createElement('td');
+      const repoName = document.createElement('td');
+      tableRow.appendChild(tableData);
+      tableRow.appendChild(repoName);
+      tableData.innerHTML = label;
+      tableData.className = 'label';
+      repoName.innerHTML = content;
+    };
+
+    const createRepoInfo = () => {
+      makeRow(
+        'Repository: ',
+        `<a href="https://github.com/HackYourFuture/${this.repository.name}" target="_blank">${
+          this.repository.name
+        }</a>`,
+      );
+      makeRow('Description: ', this.repository.description);
+      makeRow('Forks: ', this.repository.forks);
+      makeRow('Updated: ', new Date(this.repository.updated_at).toLocaleDateString('en-US'));
+    };
+    createRepoInfo();
+    // Util.createAndAppend('pre', container, JSON.stringify(this.repository, null, 2));
   }
 
   /**

diff --git a/homework/index.js b/homework/index.js
@@ -1,45 +1,122 @@
 'use strict';
 
 {
-  function fetchJSON(url, cb) {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url);
-    xhr.responseType = 'json';
-    xhr.onload = () => {
-      if (xhr.status < 400) {
-        cb(null, xhr.response);
-      } else {
-        cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
-      }
-    };
-    xhr.onerror = () => cb(new Error('Network request failed'));
-    xhr.send();
-  }
-
-  function createAndAppend(name, parent, options = {}) {
-    const elem = document.createElement(name);
-    parent.appendChild(elem);
-    Object.keys(options).forEach(key => {
-      const value = options[key];
-      if (key === 'text') {
-        elem.textContent = value;
-      } else {
-        elem.setAttribute(key, value);
-      }
-    });
-    return elem;
-  }
-
-  function main(url) {
-    fetchJSON(url, (err, data) => {
-      const root = document.getElementById('root');
-      if (err) {
-        createAndAppend('div', root, { text: err.message, class: 'alert-error' });
-      } else {
-        createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
-      }
-    });
-  }
+  const main = url => {
+    const rootContainer = document.getElementById('root');
+    const container = document.createElement('div');
+    container.className = 'container';
+
+    fetch(url)
+      .then(response => response.json())
+      .then(data => {
+        const header = document.createElement('header');
+        header.className = 'header';
+        const titleHeader = document.createElement('p');
+        titleHeader.innerHTML = 'HYF Repositories: ';
+        const repoSelector = document.createElement('select');
+        repoSelector.className = 'repo-selector';
+        header.appendChild(titleHeader);
+        header.appendChild(repoSelector);
+
+        const containerLeft = document.createElement('div');
+        containerLeft.className = 'left-div';
+        containerLeft.className += ' whiteframe';
+
+        const containerRight = document.createElement('div');
+        containerRight.className = 'right-div';
+        containerRight.className += ' whiteframe';
+
+        const table = document.createElement('table');
+        const tableBody = document.createElement('tbody');
+        table.appendChild(tableBody);
+        containerLeft.appendChild(table);
+        const removeAllChildren = parent => {
+          while (parent.firstChild) {
+            parent.removeChild(parent.firstChild);
+          }
+        };
+        const contributorHeader = document.createElement('p');
+        contributorHeader.className = 'contributor-header';
+        contributorHeader.innerHTML = 'Contributors';
+        const contributorList = document.createElement('ul');
+        contributorList.className = 'contributor-list';
+        containerRight.appendChild(contributorHeader);
+        containerRight.appendChild(contributorList);
+
+        container.appendChild(containerLeft);
+        container.appendChild(containerRight);
+        rootContainer.appendChild(header);
+        rootContainer.appendChild(container);
+
+        const repos = document.querySelector('.repo-selector');
+        data.sort((a, b) => a.name.localeCompare(b.name));
+
+        repos.innerHTML = data
+          .map((repo, i) => `<option value="${i}">${repo.name}</option>`)
+          .join('');
+
+        const tableRow = document.createElement('tr');
+        tableBody.appendChild(tableRow);
+
+        const makeRow = (label, content) => {
+          const tableRow = document.createElement('tr');
+          tableBody.appendChild(tableRow);
+          const tableData = document.createElement('td');
+          const repoName = document.createElement('td');
+          tableRow.appendChild(tableData);
+          tableRow.appendChild(repoName);
+          tableData.innerHTML = label;
+          tableData.className = 'label';
+          repoName.innerHTML = content;
+        };
+        const createContributorItems = url => {
+          fetch(url)
+            .then(response => response.json())
+            .then(data => {
+              contributorList.innerHTML = data
+                .map(
+                  (item, i) =>
+                    `<li class="contributor-item" aria-label=${item.login} tabindex="${i}">
+                    <img src="${item.avatar_url}" height="48" class="contributor-avatar">
+                    <div class="contributor-data">
+                      <a href="https://github.com/${item.login}" target="_blank">${item.login}</a>
+                      <span class=>${item.contributions}</span>
+                    </div>
+                  </li>`,
+                )
+                .join('');
+            });
+        };
+        const createRepoInfo = repoId => {
+          makeRow(
+            'Repository: ',
+            `<a href="https://github.com/HackYourFuture/${data[repoId].name}" target="_blank">${
+              data[repoId].name
+            }</a>`,
+          );
+          makeRow('Description: ', data[repoId].description);
+          makeRow('Forks: ', data[repoId].forks);
+          makeRow('Updated: ', new Date(data[repoId].updated_at).toLocaleDateString('en-US'));
+        };
+        const setRepo = repoId => {
+          removeAllChildren(tableBody);
+          createRepoInfo(repoId);
+          createContributorItems(data[repoId].contributors_url);
+        };
+        setRepo(0);
+        repos.addEventListener('change', function() {
+          const repoId = this.value;
+          setRepo(repoId);
+        });
+      })
+      .catch(() => {
+        container.parentNode.removeChild(container);
+        const divError = document.createElement('div');
+        rootContainer.appendChild(divError);
+        divError.className = 'alert-error ';
+        divError.innerHTML = `Sorry, there's something wrong.`;
+      });
+  };
 
   const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';