Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit c8ff279

Browse filesBrowse files
remarcmijremarcmij
committed
Split View into separate classes
1 parent 7f1b06e commit c8ff279
Copy full SHA for c8ff279

File tree

Expand file treeCollapse file tree

8 files changed

+57
-39
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

8 files changed

+57
-39
lines changed
Open diff view settings
Collapse file

‎Week3/MAKEME.md‎

Copy file name to clipboardExpand all lines: Week3/MAKEME.md
+1-1Lines changed: 1 addition & 1 deletion
  • Display the source diff
  • Display the rich diff
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

Collapse file

‎homework-classes/App.js‎

Copy file name to clipboardExpand all lines: homework-classes/App.js
+25-14Lines 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
}
Collapse file

‎homework-classes/ContributorsView.js‎

Copy file name to clipboardExpand all lines: homework-classes/ContributorsView.js
+3-3Lines 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

Collapse file

‎homework-classes/ErrorView.js‎

Copy file name to clipboardExpand all lines: homework-classes/ErrorView.js
+10-7Lines 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

Collapse file

‎homework-classes/HeaderView.js‎

Copy file name to clipboardExpand all lines: homework-classes/HeaderView.js
+7-7Lines 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
}
Collapse file

‎homework-classes/Model.js‎

Copy file name to clipboardExpand all lines: homework-classes/Model.js
+6-2Lines 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
);
Collapse file

‎homework-classes/RepoView.js‎

Copy file name to clipboardExpand all lines: homework-classes/RepoView.js
+3-3Lines 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

Collapse file

‎homework/style.css‎

Copy file name to clipboard
+2-2Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.