|
1 | 1 | 'use strict'; |
2 | 2 | { |
3 | | - // function fetchJSON(url, cb) { |
4 | | - // const xhr = new XMLHttpRequest(); |
5 | | - // xhr.open('GET', url); |
6 | | - // xhr.responseType = 'json'; |
7 | | - // xhr.onload = () => { |
8 | | - // if (xhr.status >= 200 && xhr.status <= 299) { |
9 | | - // cb(null, xhr.response); |
10 | | - // } else { |
11 | | - // cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`)); |
12 | | - // } |
13 | | - // }; |
14 | | - // xhr.onerror = () => cb(new Error('Network request failed')); |
15 | | - // xhr.send(); |
16 | | - // } |
| 3 | + async function fetchJSON(url) { |
| 4 | + const getByAxios = await axios.get(url).then((res) => { |
| 5 | + return res.data; |
| 6 | + }); |
| 7 | + return getByAxios; |
| 8 | + } |
17 | 9 |
|
18 | 10 | function createAndAppend(name, parent, options = {}) { |
19 | 11 | const elem = document.createElement(name); |
|
58 | 50 | createAndAppend('th', tr, { text: 'Updated:' }); |
59 | 51 | td = createAndAppend('td', tr, { text: repo.updated_at }); |
60 | 52 | } |
61 | | - function contributorDetail(url) { |
| 53 | + |
| 54 | + async function contributorDetail(url) { |
62 | 55 | let select = document.createElement('select'); |
63 | | - fetch(url).then((response) => response.json()).then((data) => { |
64 | | - let byData = data; |
65 | | - byData.sort((a, b) => a.name.localeCompare(b.name)); |
66 | | - byData.forEach((repo, index) => { |
67 | | - let option = document.createElement('option'); |
68 | | - option.value = index; |
69 | | - option.innerText = repo.name; |
70 | | - select.appendChild(option); |
71 | | - }); |
72 | | - select.addEventListener('click', () => { |
73 | | - let repo = document.getElementById('repository'); |
74 | | - let sectionContributor = document.getElementById('contributor'); |
75 | | - if (repo.hasChildNodes()) { |
76 | | - repo.removeChild(repo.lastChild); |
77 | | - } |
78 | | - while (sectionContributor.hasChildNodes()) { |
79 | | - sectionContributor.removeChild(sectionContributor.lastChild); |
80 | | - } |
| 56 | + const fetchAxios = await axios.get(url).then((res) => { |
| 57 | + return res.data; |
| 58 | + }); |
| 59 | + let byData = fetchAxios; |
| 60 | + byData.sort((a, b) => a.name.localeCompare(b.name)); |
| 61 | + byData.forEach((repo, index) => { |
| 62 | + let option = document.createElement('option'); |
| 63 | + option.value = index; |
| 64 | + option.innerText = repo.name; |
| 65 | + select.appendChild(option); |
| 66 | + }); |
| 67 | + select.addEventListener('click', () => { |
| 68 | + let repo = document.getElementById('repository'); |
| 69 | + let sectionContributor = document.getElementById('contributor'); |
| 70 | + if (repo.hasChildNodes()) { |
| 71 | + repo.removeChild(repo.lastChild); |
| 72 | + } |
| 73 | + while (sectionContributor.hasChildNodes()) { |
| 74 | + sectionContributor.removeChild(sectionContributor.lastChild); |
| 75 | + } |
81 | 76 |
|
82 | | - fetch(`https://api.github.com/repos/HackYourFuture/ |
| 77 | + fetch(`https://api.github.com/repos/HackYourFuture/ |
83 | 78 | ${byData[select.value].name}/contributors`) |
84 | | - .then((response) => response.json()) |
85 | | - .then((data) => { |
86 | | - data.forEach((ele) => { |
87 | | - let contributorDiv = document.createElement('div'); |
88 | | - contributorDiv.id = 'contributorDiv'; |
89 | | - let h4 = createAndAppend('h4', contributorDiv); |
90 | | - let h5 = createAndAppend('h5', contributorDiv); |
91 | | - let img = createAndAppend('img', contributorDiv); |
92 | | - h4.innerText = ele.login; |
93 | | - h5.innerText = ele.contributions; |
94 | | - img.src = ele.avatar_url; |
95 | | - sectionContributor.appendChild(contributorDiv); |
96 | | - }); |
| 79 | + .then((response) => response.json()) |
| 80 | + .then((data) => { |
| 81 | + data.forEach((ele) => { |
| 82 | + let contributorDiv = document.createElement('div'); |
| 83 | + contributorDiv.id = 'contributorDiv'; |
| 84 | + let h4 = createAndAppend('h4', contributorDiv); |
| 85 | + let h5 = createAndAppend('h5', contributorDiv); |
| 86 | + let img = createAndAppend('img', contributorDiv); |
| 87 | + h4.innerText = ele.login; |
| 88 | + h5.innerText = ele.contributions; |
| 89 | + img.src = ele.avatar_url; |
| 90 | + sectionContributor.appendChild(contributorDiv); |
97 | 91 | }); |
98 | | - let ul = createAndAppend('ul', repo); |
99 | | - renderRepoDetails(byData[select.value], ul); |
100 | | - }); |
| 92 | + }); |
| 93 | + let ul = createAndAppend('ul', repo); |
| 94 | + renderRepoDetails(byData[select.value], ul); |
101 | 95 | }); |
| 96 | + |
102 | 97 | let header = document.getElementById('header'); |
103 | 98 | header.appendChild(select); |
104 | 99 | let contributor = document.getElementById('contributor'); |
105 | 100 | while (contributor.hasChildNodes()) { |
106 | 101 | contributor.removeChild(contributor.lastChild); |
107 | 102 | } |
108 | 103 | } |
109 | | - function main(url) { |
110 | | - fetch(url).then((res) => res.json()).then((data) => data).catch((err) => { |
| 104 | + // function main(url) { |
| 105 | + // fetch(url).then((res) => res.json()).then((data) => data).catch((err) => { |
| 106 | + // createAndAppend('div', root, { |
| 107 | + // text: err.message, |
| 108 | + // class: 'alert-error' |
| 109 | + // }); |
| 110 | + // }); |
| 111 | + // contributorDetail(url); |
| 112 | + // renderRepoDetails(repo, ul); |
| 113 | + // } |
| 114 | + |
| 115 | + async function main(url) { |
| 116 | + try { |
| 117 | + await fetch(url).then((res) => res.json()).then((data) => data); |
| 118 | + } catch (err) { |
111 | 119 | createAndAppend('div', root, { |
112 | 120 | text: err.message, |
113 | 121 | class: 'alert-error' |
114 | 122 | }); |
115 | | - }); |
| 123 | + } |
116 | 124 | contributorDetail(url); |
117 | 125 | renderRepoDetails(repo, ul); |
118 | 126 | } |
|
0 commit comments