Skip to content

Commit c8ff279

Browse files
remarcmijremarcmij
committed
Split View into separate classes
1 parent 7f1b06e commit c8ff279

File tree

8 files changed

+57
-39
lines changed

8 files changed

+57
-39
lines changed

‎Week3/MAKEME.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ Object Oriented Programming is a vast topic and in this homework we can only scr
9191
| ErrorView.js | Renders an error, of present. |
9292
| Util.js | Provides utility functions. |
9393

94-
>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.
94+
>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.
9595
9696
_Read:_
9797

‎homework-classes/App.js‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,25 +21,36 @@
2121

2222
class App {
2323
constructor(account) {
24-
const root = document.getElementById('root');
25-
const header = createAndAppend('header', root, { class: 'header' });
26-
this.mainContainer = createAndAppend('main', root, {
27-
id: 'main-container',
28-
});
24+
const containers = App.renderContainers();
2925

3026
const model = new Model(account);
31-
model.subscribe(this);
32-
model.subscribe(new HeaderView(model, account, header));
33-
model.subscribe(new RepoView(this.mainContainer));
34-
model.subscribe(new ContributorsView(this.mainContainer));
35-
model.subscribe(new ErrorView(this.mainContainer));
36-
model.fetchData();
27+
const fetchData = model.fetchData.bind(model);
28+
29+
model.subscribe(new HeaderView(account, containers.header, fetchData));
30+
model.subscribe(new RepoView(containers.repo));
31+
model.subscribe(new ContributorsView(containers.contributors));
32+
model.subscribe(new ErrorView(containers.error));
33+
34+
fetchData();
3735
}
3836

39-
update() {
40-
this.mainContainer.innerHTML = '';
37+
static renderContainers() {
38+
const root = document.getElementById('root');
39+
const header = createAndAppend('header', root, { class: 'header' });
40+
const error = createAndAppend('div', root);
41+
const main = createAndAppend('main', root, {
42+
id: 'main-container',
43+
});
44+
const repo = createAndAppend('section', main, {
45+
class: 'repo-container whiteframe',
46+
});
47+
const contributors = createAndAppend('section', main, {
48+
class: 'contributors-container whiteframe',
49+
});
50+
return { header, error, main, repo, contributors };
4151
}
4252
}
4353

44-
window.onload = () => new App(accounts.hyf);
54+
const ACCOUNT_KEY = 'hyf';
55+
window.onload = () => new App(accounts[ACCOUNT_KEY]);
4556
}

‎homework-classes/ContributorsView.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
const { createAndAppend } = window.Util;
55

66
class ContributorsView {
7-
constructor(mainContainer) {
8-
this.mainContainer = mainContainer;
7+
constructor(container) {
8+
this.container = container;
99
}
1010

1111
update(state) {
@@ -20,7 +20,7 @@
2020
*/
2121
render(contributors) {
2222
// TODO: replace this comment and the console.log with your own code
23-
console.log('renderContributors', contributors);
23+
console.log('ContributorsView', contributors);
2424
}
2525
}
2626

‎homework-classes/ErrorView.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,26 @@
44
const { createAndAppend } = window.Util;
55

66
class ErrorView {
7-
constructor(mainContainer) {
8-
this.mainContainer = mainContainer;
7+
constructor(container) {
8+
this.container = container;
99
}
1010

1111
update(state) {
12-
if (state.error) {
13-
this.render(state.error);
14-
}
12+
this.render(state.error);
1513
}
1614

1715
/**
1816
* Renders an error for the 'error' message type.
1917
* @param {Error} error An Error object
2018
*/
2119
render(error) {
22-
// TODO: replace this comment and the console.log with your own code
23-
console.log('renderError', error);
20+
this.container.innerHTML = '';
21+
if (error) {
22+
createAndAppend('div', this.container, {
23+
text: error.message,
24+
class: 'alert alert-error',
25+
});
26+
}
2427
}
2528
}
2629

‎homework-classes/HeaderView.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
const { createAndAppend } = window.Util;
55

66
class HeaderView {
7-
constructor(model, account, header) {
8-
this.model = model;
7+
constructor(account, header, fetchData) {
98
this.account = account;
109
this.header = header;
10+
this.fetchData = fetchData;
1111
this.select = null;
1212
}
1313

1414
update(state) {
15-
if (!this.select && !this.error) {
15+
if (!this.select && !state.error) {
1616
this.render(state.repos);
1717
}
1818
}
@@ -23,21 +23,21 @@
2323
* @param {Object[]} repos An array of repository objects.
2424
*/
2525
render(repos) {
26-
createAndAppend('p', this.header, { text: this.account.name });
26+
createAndAppend('div', this.header, { text: this.account.name });
2727
this.select = createAndAppend('select', this.header, {
2828
class: 'repo-select',
2929
autofocus: 'autofocus',
3030
});
3131

32-
repos.forEach((repo, index) =>
32+
repos.forEach(repo =>
3333
createAndAppend('option', this.select, {
3434
text: repo.name,
35-
value: index,
35+
value: repo.id,
3636
}),
3737
);
3838

3939
this.select.addEventListener('change', () =>
40-
this.model.fetchData(this.select.value),
40+
this.fetchData(this.select.value),
4141
);
4242
}
4343
}

‎homework-classes/Model.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,18 @@
1818
};
1919
}
2020

21-
async fetchData(selectedIndex = 0) {
21+
async fetchData(id) {
22+
const repoId = parseInt(id, 10);
2223
this.state.error = null;
2324
try {
2425
if (this.state.repos.length === 0) {
2526
const repos = await Model.fetchJSON(makeUrl(this.account));
2627
this.state.repos = repos.sort((a, b) => a.name.localeCompare(b.name));
2728
}
28-
this.state.selectedRepo = this.state.repos[selectedIndex];
29+
const index = id
30+
? this.state.repos.findIndex(repo => repo.id === repoId)
31+
: 0;
32+
this.state.selectedRepo = this.state.repos[index];
2933
this.state.contributors = await Model.fetchJSON(
3034
this.state.selectedRepo.contributors_url,
3135
);

‎homework-classes/RepoView.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
const { createAndAppend } = window.Util;
55

66
class RepoView {
7-
constructor(mainContainer) {
8-
this.mainContainer = mainContainer;
7+
constructor(container) {
8+
this.container = container;
99
}
1010

1111
update(state) {
@@ -20,7 +20,7 @@
2020
*/
2121
render(repo) {
2222
// TODO: replace this comment and the console.log with your own code
23-
console.log('renderRepoDetails', repo);
23+
console.log('RepoView', repo);
2424
}
2525
}
2626

‎homework/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.alert-error {
2-
color: red;
3-
}
2+
color: red;
3+
}

0 commit comments

Comments
 (0)