From e05e07dde9a3997cf189934da09762af9294780a Mon Sep 17 00:00:00 2001 From: Naji <56565743+NajiNabulsi@users.noreply.github.com> Date: Fri, 7 Feb 2020 21:53:09 +0100 Subject: [PATCH] week3 oop and axios --- oop/App.js | 56 +++++++++++++++++++ oop/ContributorsView.js | 55 ++++++++++++++++++ oop/ErrorView.js | 31 +++++++++++ oop/HeaderView.js | 46 +++++++++++++++ oop/Model.js | 53 ++++++++++++++++++ oop/Observable.js | 20 +++++++ oop/RepoView.js | 45 +++++++++++++++ oop/Util.js | 27 +++++++++ oop/hyf.png | Bin 0 -> 9116 bytes oop/index.html | 34 ++++++++++++ oop/style.css | 101 +++++++++++++++++++++++++++++++++ week3/index.css | 120 ++++++++++++++++++++++++++++++++++++++++ week3/index.html | 45 +++++++++++++++ week3/index.js | 98 ++++++++++++++++++++++++++++++++ 14 files changed, 731 insertions(+) create mode 100644 oop/App.js create mode 100644 oop/ContributorsView.js create mode 100644 oop/ErrorView.js create mode 100644 oop/HeaderView.js create mode 100644 oop/Model.js create mode 100644 oop/Observable.js create mode 100644 oop/RepoView.js create mode 100644 oop/Util.js create mode 100644 oop/hyf.png create mode 100644 oop/index.html create mode 100644 oop/style.css create mode 100644 week3/index.css create mode 100644 week3/index.html create mode 100644 week3/index.js diff --git a/oop/App.js b/oop/App.js new file mode 100644 index 000000000..960fddef4 --- /dev/null +++ b/oop/App.js @@ -0,0 +1,56 @@ +'use strict'; + +{ + const accounts = { + hyf: { + name: 'HackYourFuture', + type: 'org', + }, + microsoft: { + name: 'Microsoft', + type: 'org', + }, + jim: { + name: 'remarcmij', + type: 'user', + }, + }; + + const { Model, HeaderView, RepoView, ContributorsView, ErrorView } = window; + const { createAndAppend } = window.Util; + + class App { + constructor(account) { + const containers = App.renderContainers(); + + const model = new Model(account); + 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(); + } + + static renderContainers() { + const root = document.getElementById('root'); + const header = createAndAppend('header', root, { class: 'header' }); + const error = createAndAppend('div', root); + const main = createAndAppend('main', root, { + class: '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 }; + } + } + + const ACCOUNT_KEY = 'hyf'; + window.onload = () => new App(accounts[ACCOUNT_KEY]); +} diff --git a/oop/ContributorsView.js b/oop/ContributorsView.js new file mode 100644 index 000000000..9771139c1 --- /dev/null +++ b/oop/ContributorsView.js @@ -0,0 +1,55 @@ +'use strict'; + +{ + const { createAndAppend } = window.Util; + + class ContributorsView { + constructor(container) { + this.container = container; + } + + update(state) { + if (!state.error) { + this.render(state.contributors); + } + } + + /** + * Renders the list of contributors + * @param {Object[]} contributors An array of contributor objects + */ + render(contributors) { + + this.container.innerHTML = ''; + + const ulContributors = createAndAppend('ul', this.container, { + name: 'ul-cont', + class: 'ul-contributors' + }); + + contributors.forEach(contributors => { + const li = createAndAppend('li', ulContributors, { + + class: 'li-contributors' + }) + + const parCont = createAndAppend('p', li, { + text: contributors.contributions, + class: 'li-parCont' + }) + + const parLogin = createAndAppend('p', li, { + text: contributors.login, + class: 'li-par' + }) + + const img = createAndAppend('img', li, { + src: contributors.avatar_url, + }) + + }) + } + } + + window.ContributorsView = ContributorsView; +} \ No newline at end of file diff --git a/oop/ErrorView.js b/oop/ErrorView.js new file mode 100644 index 000000000..fafffce52 --- /dev/null +++ b/oop/ErrorView.js @@ -0,0 +1,31 @@ +'use strict'; + +{ + const { createAndAppend } = window.Util; + + class ErrorView { + constructor(container) { + this.container = container; + } + + update(state) { + this.render(state.error); + } + + /** + * Renders an error for the 'error' message type. + * @param {Error} error An Error object + */ + render(error) { + this.container.innerHTML = ''; + if (error) { + createAndAppend('div', this.container, { + text: error.message, + class: 'alert alert-error', + }); + } + } + } + + window.ErrorView = ErrorView; +} diff --git a/oop/HeaderView.js b/oop/HeaderView.js new file mode 100644 index 000000000..b94a2ae00 --- /dev/null +++ b/oop/HeaderView.js @@ -0,0 +1,46 @@ +'use strict'; + +{ + const { createAndAppend } = window.Util; + + class HeaderView { + constructor(account, header, fetchData) { + this.account = account; + this.header = header; + this.fetchData = fetchData; + this.select = null; + } + + update(state) { + if (!this.select && !state.error) { + this.render(state.repos); + } + } + + /** + * Renders the data for the 'select' message type. Create a + + + +
+ +
+
+
+ +
+
+
+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/week3/index.js b/week3/index.js new file mode 100644 index 000000000..2a8f7c381 --- /dev/null +++ b/week3/index.js @@ -0,0 +1,98 @@ +'use strict'; + +const HYF_REPOS_URL = + "https://api.github.com/orgs/HackYourFuture/repos?per_page=10"; + +const root = document.querySelector("#root"); +const select = document.querySelector("#repo"); +const repoContaine = document.querySelector('.repo-containe'); +const repoDiv = document.querySelector('#repoDiv'); +const op = document.querySelector('option'); +const contri = document.querySelector('#contri'); + + +function main(url) { + + // to creat ul and li element + function creatLi(txt) { + const liRepo = document.createElement("li"); + liRepo.innerHTML = txt; + const ulRepo = document.createElement("ul"); + ulRepo.appendChild(liRepo); + contri.appendChild(ulRepo); + } + + // to creat option element and append it to to select + function creatOption(txt, num) { + let opt = document.createElement('option'); + + opt.textContent = txt; + opt.setAttribute('value', num); + select.appendChild(opt); + } + + // load data of contributors and add it to ul + async function loadDoc(url) { + try { + const response = await axios.get(url); + const data = response.data; + + data.forEach(ele => { + const txt = ` ${ele.login} ${ele.contributions}`; + creatLi(txt); + }); + + } catch (error) { + console.error(error); + } + + } + + // load data and add it to div + async function fetchJSON(url) { + try { + const response = await axios.get(url); + + const data = response.data; + let arr = []; + + for (let i in data) { + arr.push([{ "name": data[i].name }, { "description": data[i].description }, { "forks_count": data[i].forks_count }, { "updated_at": data[i].updated_at }]); + } + + arr.forEach((ele, i) => { + creatOption(ele[0].name, i); + }); + + select.addEventListener('change', () => { + contri.innerHTML = ""; + let s = select.value; + + let txt = "Repository : " + + data[s].name + + "
" + + "Description : " + + data[s].description + + "
" + + "Forks : " + + data[s].forks_count + + "
" + + "Updated : " + + data[s].updated_at; + + repoDiv.innerHTML = txt + s; + let link = data[s].contributors_url; + + loadDoc(link); + }); + + } catch (error) { + console.error(error); + } + + } + + return fetchJSON(url); +} + +main(HYF_REPOS_URL); \ No newline at end of file