Split View into separate classes

remarcmij · remarcmij · commit c8ff279fb8d6 · 2019-08-27T09:57:54.000+02:00
diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md
@@ -91,7 +91,7 @@ Object Oriented Programming is a vast topic and in this homework we can only scr
 | ErrorView.js | Renders an error, of present. |
 | Util.js | Provides utility functions. |
 
->For this part of the homework you should modify the **RepoView.js**, **ContributorsView.js** and the **ErrorView.js** files, by adding and adapting code from your non-OOP version of the homework to these files. You should also copy the styling from your non-OOP version. Other files should not be modified.
+>For this part of the homework you should modify the **RepoView.js** and **ContributorsView.js** files, by adding and adapting code from your non-OOP version of the homework to these files. You should also copy the styling from your non-OOP version. Other files should not be modified.
 
 _Read:_
 
diff --git a/homework-classes/App.js b/homework-classes/App.js
@@ -21,25 +21,36 @@
 
   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 containers = App.renderContainers();
 
       const model = new 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();
+      const fetchData = model.fetchData.bind(model);
+
+      model.subscribe(new HeaderView(account, containers.header, fetchData));
+      model.subscribe(new RepoView(containers.repo));
+      model.subscribe(new ContributorsView(containers.contributors));
+      model.subscribe(new ErrorView(containers.error));
+
+      fetchData();
     }
 
-    update() {
-      this.mainContainer.innerHTML = '';
+    static renderContainers() {
+      const root = document.getElementById('root');
+      const header = createAndAppend('header', root, { class: 'header' });
+      const error = createAndAppend('div', root);
+      const main = createAndAppend('main', root, {
+        id: 'main-container',
+      });
+      const repo = createAndAppend('section', main, {
+        class: 'repo-container whiteframe',
+      });
+      const contributors = createAndAppend('section', main, {
+        class: 'contributors-container whiteframe',
+      });
+      return { header, error, main, repo, contributors };
     }
   }
 
-  window.onload = () => new App(accounts.hyf);
+  const ACCOUNT_KEY = 'hyf';
+  window.onload = () => new App(accounts[ACCOUNT_KEY]);
 }
diff --git a/homework-classes/ContributorsView.js b/homework-classes/ContributorsView.js
@@ -4,8 +4,8 @@
   const { createAndAppend } = window.Util;
 
   class ContributorsView {
-    constructor(mainContainer) {
-      this.mainContainer = mainContainer;
+    constructor(container) {
+      this.container = container;
     }
 
     update(state) {
@@ -20,7 +20,7 @@
      */
     render(contributors) {
       // TODO: replace this comment and the console.log with your own code
-      console.log('renderContributors', contributors);
+      console.log('ContributorsView', contributors);
     }
   }
 
diff --git a/homework-classes/ErrorView.js b/homework-classes/ErrorView.js
@@ -4,23 +4,26 @@
   const { createAndAppend } = window.Util;
 
   class ErrorView {
-    constructor(mainContainer) {
-      this.mainContainer = mainContainer;
+    constructor(container) {
+      this.container = container;
     }
 
     update(state) {
-      if (state.error) {
-        this.render(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);
+      this.container.innerHTML = '';
+      if (error) {
+        createAndAppend('div', this.container, {
+          text: error.message,
+          class: 'alert alert-error',
+        });
+      }
     }
   }
 
diff --git a/homework-classes/HeaderView.js b/homework-classes/HeaderView.js
@@ -4,15 +4,15 @@
   const { createAndAppend } = window.Util;
 
   class HeaderView {
-    constructor(model, account, header) {
-      this.model = model;
+    constructor(account, header, fetchData) {
       this.account = account;
       this.header = header;
+      this.fetchData = fetchData;
       this.select = null;
     }
 
     update(state) {
-      if (!this.select && !this.error) {
+      if (!this.select && !state.error) {
         this.render(state.repos);
       }
     }
@@ -23,21 +23,21 @@
      * @param {Object[]} repos An array of repository objects.
      */
     render(repos) {
-      createAndAppend('p', this.header, { text: this.account.name });
+      createAndAppend('div', this.header, { text: this.account.name });
       this.select = createAndAppend('select', this.header, {
         class: 'repo-select',
         autofocus: 'autofocus',
       });
 
-      repos.forEach((repo, index) =>
+      repos.forEach(repo =>
         createAndAppend('option', this.select, {
           text: repo.name,
-          value: index,
+          value: repo.id,
         }),
       );
 
       this.select.addEventListener('change', () =>
-        this.model.fetchData(this.select.value),
+        this.fetchData(this.select.value),
       );
     }
   }
diff --git a/homework-classes/Model.js b/homework-classes/Model.js
@@ -18,14 +18,18 @@
       };
     }
 
-    async fetchData(selectedIndex = 0) {
+    async fetchData(id) {
+      const repoId = parseInt(id, 10);
       this.state.error = null;
       try {
         if (this.state.repos.length === 0) {
           const repos = await Model.fetchJSON(makeUrl(this.account));
           this.state.repos = repos.sort((a, b) => a.name.localeCompare(b.name));
         }
-        this.state.selectedRepo = this.state.repos[selectedIndex];
+        const index = id
+          ? this.state.repos.findIndex(repo => repo.id === repoId)
+          : 0;
+        this.state.selectedRepo = this.state.repos[index];
         this.state.contributors = await Model.fetchJSON(
           this.state.selectedRepo.contributors_url,
         );
diff --git a/homework-classes/RepoView.js b/homework-classes/RepoView.js
@@ -4,8 +4,8 @@
   const { createAndAppend } = window.Util;
 
   class RepoView {
-    constructor(mainContainer) {
-      this.mainContainer = mainContainer;
+    constructor(container) {
+      this.container = container;
     }
 
     update(state) {
@@ -20,7 +20,7 @@
      */
     render(repo) {
       // TODO: replace this comment and the console.log with your own code
-      console.log('renderRepoDetails', repo);
+      console.log('RepoView', repo);
     }
   }
 
diff --git a/homework/style.css b/homework/style.css
@@ -1,3 +1,3 @@
 .alert-error {
-    color: red;
-}
+  color: red;
+}

Original file line number	Diff line number	Diff line change
`@@ -4,8 +4,8 @@`
`4`	`4`	`const { createAndAppend } = window.Util;`
`5`	`5`
`6`	`6`	`class ContributorsView {`
`7`		`- constructor(mainContainer) {`
`8`		`- this.mainContainer = mainContainer;`
	`7`	`+ constructor(container) {`
	`8`	`+ this.container = container;`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`update(state) {`
`@@ -20,7 +20,7 @@`
`20`	`20`	`*/`
`21`	`21`	`render(contributors) {`
`22`	`22`	`// TODO: replace this comment and the console.log with your own code`
`23`		`- console.log('renderContributors', contributors);`
	`23`	`+ console.log('ContributorsView', contributors);`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`
Original file line number	Diff line number	Diff line change
`@@ -4,8 +4,8 @@`
`4`	`4`	`const { createAndAppend } = window.Util;`
`5`	`5`
`6`	`6`	`class RepoView {`
`7`		`- constructor(mainContainer) {`
`8`		`- this.mainContainer = mainContainer;`
	`7`	`+ constructor(container) {`
	`8`	`+ this.container = container;`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`update(state) {`
`@@ -20,7 +20,7 @@`
`20`	`20`	`*/`
`21`	`21`	`render(repo) {`
`22`	`22`	`// TODO: replace this comment and the console.log with your own code`
`23`		`- console.log('renderRepoDetails', repo);`
	`23`	`+ console.log('RepoView', repo);`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`