Split up View into multiple classes

remarcmij · remarcmij · commit 5448828f3681 · 2019-08-26T22:53:01.000+02:00
diff --git a/homework-classes/App.js b/homework-classes/App.js
@@ -16,12 +16,28 @@
     },
   };
 
-  const { Model, View } = window;
+  const { Model, HeaderView, RepoView, ContributorsView, ErrorView } = window;
+  const { createAndAppend } = window.Util;
 
   class App {
     constructor(account) {
+      const root = document.getElementById('root');
+      const header = createAndAppend('header', root, { class: 'header' });
+      this.mainContainer = createAndAppend('main', root, {
+        id: 'main-container',
+      });
+
       const model = new Model(account);
-      this.view = new View(model, account);
+      model.subscribe(this);
+      model.subscribe(new HeaderView(model, account, header));
+      model.subscribe(new RepoView(this.mainContainer));
+      model.subscribe(new ContributorsView(this.mainContainer));
+      model.subscribe(new ErrorView(this.mainContainer));
+      model.fetchData();
+    }
+
+    update() {
+      this.mainContainer.innerHTML = '';
     }
   }
 
diff --git a/homework-classes/ContributorsView.js b/homework-classes/ContributorsView.js
@@ -0,0 +1,28 @@
+'use strict';
+
+{
+  const { createAndAppend } = window.Util;
+
+  class ContributorsView {
+    constructor(mainContainer) {
+      this.mainContainer = mainContainer;
+    }
+
+    update(state) {
+      if (!state.error) {
+        this.render(state.contributors);
+      }
+    }
+
+    /**
+     * Renders the list of contributors
+     * @param {Object[]} contributors An array of contributor objects
+     */
+    render(contributors) {
+      // TODO: replace this comment and the console.log with your own code
+      console.log('renderContributors', contributors);
+    }
+  }
+
+  window.ContributorsView = ContributorsView;
+}
diff --git a/homework-classes/ErrorView.js b/homework-classes/ErrorView.js
@@ -0,0 +1,28 @@
+'use strict';
+
+{
+  const { createAndAppend } = window.Util;
+
+  class ErrorView {
+    constructor(mainContainer) {
+      this.mainContainer = mainContainer;
+    }
+
+    update(state) {
+      if (state.error) {
+        this.render(state.error);
+      }
+    }
+
+    /**
+     * Renders an error for the 'error' message type.
+     * @param {Error} error An Error object
+     */
+    render(error) {
+      // TODO: replace this comment and the console.log with your own code
+      console.log('renderError', error);
+    }
+  }
+
+  window.ErrorView = ErrorView;
+}
diff --git a/homework-classes/HeaderView.js b/homework-classes/HeaderView.js
@@ -0,0 +1,33 @@
+'use strict';
+
+{
+  const { createAndAppend } = window.Util;
+
+  class HeaderView {
+    constructor(model, account, header) {
+      this.model = model;
+      this.account = account;
+      this.header = header;
+      this.select = null;
+    }
+
+    update(state) {
+      if (!this.select && !this.error) {
+        this.render(state.repos);
+      }
+    }
+
+    /**
+     * Renders the data for the 'select' message type. Create a <select> element
+     * and its <option> children.
+     * @param {Object[]} repos An array of repository objects.
+     */
+    render(repos) {
+      this.select = createAndAppend('select', this.header);
+      // TODO: replace this comment and the console.log with your own code
+      console.log('renderSelect', repos);
+    }
+  }
+
+  window.HeaderView = HeaderView;
+}
diff --git a/homework-classes/RepoView.js b/homework-classes/RepoView.js
@@ -0,0 +1,28 @@
+'use strict';
+
+{
+  const { createAndAppend } = window.Util;
+
+  class RepoView {
+    constructor(mainContainer) {
+      this.mainContainer = mainContainer;
+    }
+
+    update(state) {
+      if (!state.error) {
+        this.render(state.selectedRepo);
+      }
+    }
+
+    /**
+     * Renders the repository details.
+     * @param {Object} repo A repository object.
+     */
+    render(repo) {
+      // TODO: replace this comment and the console.log with your own code
+      console.log('renderRepoDetails', repo);
+    }
+  }
+
+  window.RepoView = RepoView;
+}
diff --git a/homework-classes/Util.js b/homework-classes/Util.js
@@ -0,0 +1,27 @@
+'use strict';
+
+{
+  class Util {
+    /**
+     * Creates an element, optionally setting its attributes, and appends
+     * the element to a parent.
+     * @param {string} name The tag name of the element to create.
+     * @param {HTMLElement} parent The parent element.
+     * @param {Object} options An object with attribute names and values.
+     */
+    static createAndAppend(name, parent, options = {}) {
+      const elem = document.createElement(name);
+      parent.appendChild(elem);
+      Object.entries(options).forEach(([key, value]) => {
+        if (key === 'text') {
+          elem.textContent = value;
+        } else {
+          elem.setAttribute(key, value);
+        }
+      });
+      return elem;
+    }
+  }
+
+  window.Util = Util;
+}
diff --git a/homework-classes/View.js b/homework-classes/View.js
diff --git a/homework-classes/index.html b/homework-classes/index.html
@@ -21,9 +21,13 @@
   </head>
   <body>
     <div id="root"></div>
+    <script src="./Util.js"></script>
     <script src="./Observable.js"></script>
     <script src="./Model.js"></script>
-    <script src="./View.js"></script>
+    <script src="./HeaderView.js"></script>
+    <script src="./RepoView.js"></script>
+    <script src="./ContributorsView.js"></script>
+    <script src="./ErrorView.js"></script>
     <script src="./App.js"></script>
   </body>
 </html>
diff --git a/homework-classes/style.css b/homework-classes/style.css
@@ -31,6 +31,7 @@ body {
   display: flex;
   flex-direction: row;
   align-items: center;
+  height: 56px;
 }
 
 .repo-select {

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,7 @@ body {`
`31`	`31`	`display: flex;`
`32`	`32`	`flex-direction: row;`
`33`	`33`	`align-items: center;`
	`34`	`+ height: 56px;`
`34`	`35`	`}`
`35`	`36`
`36`	`37`	`.repo-select {`