updated the skeleton for the GitHub app for async/await

remarcmij · remarcmij · commit eac6b816ebf9 · 2018-03-26T10:05:27.000+02:00
diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md
@@ -58,42 +58,55 @@ Instructions:
 4. Move your existing code responsible for initializing your application to the `constructor` of the `View` class.
 5. The bulk of your remaining code should probably go to the `fetchAndRender()` method of the `View` class.
 
-### Skeleton
+### Suggested skeleton
 
-Use this skeleton as overall design for your code in `app.js`:
+You could use this skeleton as overall design for your code in `app.js`:
 
 ```js
 'use strict';
 {
   const hyfUrl = 'https://api.github.com';
   const hyfReposUrl = hyfUrl + '/orgs/HackYourFuture/repos?per_page=100';
-  const repoUrl = hyfUrl + '/repos/HackYourFuture/';
 
   class Repository {
     constructor(data) {
-      this.data = data;
+      this._data = data;
     }
 
     /**
-     * Render the repository info into the DOM.
-     * @param {HTML element} parent The parent element in which to render the repository
+     * Render the repository info to the DOM.
+     * @param {HTML element} parent The parent element in which to render the repository.
      * info.
      */
     render(parent) {
       // Add your code here.
-      // This method should render the repository data stored in the 'data' property
+      // This method should render the repository data stored in the '_data' property
       // as HTML elements and append them to the `parent` element.
     }
+
+    /**
+     * Returns an array of contributors as a promise
+    */
+    fetchContributors() {
+      // Add your code here
+    }
+
+    /**
+     * Returns the name of the repository
+    */
+    name() {
+      // Add your code here
+    }
   }
 
   class Contributor {
     constructor(data) {
-      this.data = data;
+      this._data = data;
     }
 
     /**
-     * Render the contributor info into the DOM.
-     * @param {HTML element} parent The parent element in which to render the contributor
+     * Render the contributor info to the DOM.
+     * @param {HTML element} parent The parent element in which to render the contributor.
      * info.
      */
     render(parent) {
@@ -105,6 +118,13 @@ Use this skeleton as overall design for your code in `app.js`:
 
   class View {
     constructor() {
+      this.initialize();
+    }
+
+    /**
+     * View initialization
+     */
+    async initialize() {
       // Add code here to initialize your app
       // 1. Create the fixed HTML elements of your page
       // 2. Make an initial XMLHttpRequest to populate your <select> element
@@ -115,29 +135,24 @@ Use this skeleton as overall design for your code in `app.js`:
      * information as HTML elements in the DOM
      * @param {*} repoName The name of the selected repository
      */
-    fetchAndRender(repoName) {
+    async fetchAndRender(repoName) {
       const leftDiv = ...;
       const rightDiv = ...;
 
       // ...
 
-      this.fetchJSON(repoUrl + repoName)
-        .then(repoInfo => {
-          const repo = new Repository(repoInfo);
-          return this.fetchJSON(repoInfo.contributors_url)
-            .then(contributors => {
-              repo.render(leftDiv);
-              contributors
-                .map(contributor => new Contributor(contributor))
-                .forEach(contributor => contributor.render(rightDiv));
-            });
-        })
-        .catch(error => {
-          // add error handling code here
-        });
+      try {
+        const contributors = await repo.fetchContributors();
+        repo.render(leftDiv);
+        contributors
+          .map(contributor => new Contributor(contributor))
+          .forEach(contributor => contributor.render(contributorList));
+      }
+      catch (error) {
+        createAndAppend('div', container, { html: error.message, class: 'alert alert-error' });
+      }
     }
 
-
     /**
      * Fetch API data as JSON data in a promise
      * @param {string} url The URL of the API endpoint.
