Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 1333177

Browse files
remarcmijremarcmij
committed
Rename Subject to Observable
1 parent d21420c commit 1333177

File tree

9 files changed

+49
-48
lines changed

9 files changed

+49
-48
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"editor.tabSize": 2,
77
"cSpell.words": [
88
"networkidle",
9+
"remarcmij",
910
"tabindex",
1011
"whiteframe"
1112
]

‎Week3/MAKEME.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,9 @@ Object Oriented Programming is a vast topic and in this homework we can only scr
8383
| style.css | CSS styling. |
8484
| hyf.png | The HYF logo. |
8585
| App.js | The **App** class contains the start-up code and manages the overall orchestration of the app. |
86-
| Model.js | The **Model** class is concerned with all data handling (e.g. fetching). Extends the Subject class. |
86+
| Model.js | The **Model** class is concerned with all data handling (e.g. fetching). Extends the Observable class. |
8787
| View.js | The **View** class is concerned with rendering the data from the Model to the web page. Extends the Observer class. |
88-
| Subject.js | The **Subject** class is a component of a Observer pattern implementation. |
88+
| Observable.js | The **Observable** class is a component of a Observer pattern implementation. |
8989
| Observer.js | The **Observer** class is a component of a Observer pattern implementation. |
9090

9191
>For this part of the homework you should need to modify **View.js**, by adding and adapting code from your non-OOP version of the homework to this file.

‎homework-classes/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
class App {
2222
constructor(account) {
2323
const model = new Model(account);
24-
this.pageView = new View(model, account);
24+
this.view = new View(model, account);
2525
}
2626
}
2727

‎homework-classes/Model.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
'use strict';
22

33
{
4-
const { Subject } = window;
4+
const { Observable } = window;
55

66
const makeUrl = ({ name, type }) =>
77
`https://api.github.com/${type}s/${name}/repos?per_page=100`;
88

9-
class Model extends Subject {
9+
class Model extends Observable {
1010
constructor(account) {
1111
super();
1212
this.account = account;
@@ -19,20 +19,19 @@
1919
}
2020

2121
async fetchData(selectedIndex = 0) {
22-
const newState = { ...this.state, error: null };
22+
this.state.error = null;
2323
try {
2424
if (this.state.repos.length === 0) {
2525
const repos = await Model.fetchJSON(makeUrl(this.account));
26-
newState.repos = repos.sort((a, b) => a.name.localeCompare(b.name));
26+
this.state.repos = repos.sort((a, b) => a.name.localeCompare(b.name));
2727
}
28-
newState.selectedRepo = newState.repos[selectedIndex];
29-
newState.contributors = await Model.fetchJSON(
30-
newState.selectedRepo.contributors_url,
28+
this.state.selectedRepo = this.state.repos[selectedIndex];
29+
this.state.contributors = await Model.fetchJSON(
30+
this.state.selectedRepo.contributors_url,
3131
);
3232
} catch (err) {
33-
newState.error = err;
33+
this.state.error = err;
3434
}
35-
this.state = newState;
3635
this.notify(this.state);
3736
}
3837

‎homework-classes/Observable.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
'use strict';
2+
3+
{
4+
class Observable {
5+
constructor() {
6+
this.observers = new Set();
7+
}
8+
9+
subscribe(observer = {}) {
10+
this.observers.add(observer);
11+
return () => this.observers.delete(observer);
12+
}
13+
14+
notify(data) {
15+
this.observers.forEach(observer => observer.update(data));
16+
}
17+
}
18+
19+
window.Observable = Observable;
20+
}

‎homework-classes/Observer.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@
22

33
{
44
class Observer {
5-
constructor(subject) {
6-
subject.register(this);
5+
constructor(Observable) {
6+
Observable.subscribe(this);
7+
}
8+
9+
update() {
10+
throw new Error('Observer: the `update` method should be overridden.');
711
}
812
}
913

‎homework-classes/Subject.js‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎homework-classes/View.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,17 @@
1212
this.mainContainer = null;
1313

1414
const root = document.getElementById('root');
15-
this.header = this.createAndAppend('header', root, { class: 'header' });
16-
this.createAndAppend('p', this.header, { text: account.name });
17-
this.mainContainer = this.createAndAppend('main', root, {
15+
this.header = View.createAndAppend('header', root, { class: 'header' });
16+
View.createAndAppend('p', this.header, { text: account.name });
17+
this.mainContainer = View.createAndAppend('main', root, {
1818
id: 'main-container',
1919
});
2020

2121
this.model.fetchData();
2222
}
2323

2424
/**
25-
* Receives data from the Subject to which this Observer is registered
25+
* Receives data from the Observable to which this Observer is registered
2626
* and renders the data.
2727
* @param {Object} state On object containing the Model state
2828
*/
@@ -46,9 +46,9 @@
4646
* @param {Object[]} repos An array of repository objects.
4747
*/
4848
renderSelect(repos) {
49-
this.select = this.createAndAppend('select', this.header);
49+
this.select = View.createAndAppend('select', this.header);
5050
// TODO: replace this comment and the console.log with your own code
51-
console.log(repos);
51+
console.log('renderSelect', repos);
5252
}
5353

5454
/**
@@ -57,7 +57,7 @@
5757
*/
5858
renderRepoDetails(repo) {
5959
// TODO: replace this comment and the console.log with your own code
60-
console.log(repo);
60+
console.log('renderRepoDetails', repo);
6161
}
6262

6363
/**
@@ -66,7 +66,7 @@
6666
*/
6767
renderContributors(contributors) {
6868
// TODO: replace this comment and the console.log with your own code
69-
console.log(contributors);
69+
console.log('renderContributors', contributors);
7070
}
7171

7272
/**
@@ -75,7 +75,7 @@
7575
*/
7676
renderError(err) {
7777
// TODO: replace this comment and the console.log with your own code
78-
console.log(err);
78+
console.log('renderError', err);
7979
}
8080

8181
/**
@@ -85,7 +85,7 @@
8585
* @param {HTMLElement} parent The parent element.
8686
* @param {Object} options An object with attribute names and values.
8787
*/
88-
createAndAppend(name, parent, options = {}) {
88+
static createAndAppend(name, parent, options = {}) {
8989
const elem = document.createElement(name);
9090
parent.appendChild(elem);
9191
Object.entries(options).forEach(([key, value]) => {

‎homework-classes/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</head>
2222
<body>
2323
<div id="root"></div>
24-
<script src="./Subject.js"></script>
24+
<script src="./Observable.js"></script>
2525
<script src="./Observer.js"></script>
2626
<script src="./Model.js"></script>
2727
<script src="./View.js"></script>

0 commit comments

Comments
 (0)