SocialHackerCreteClass · anastastelios · Feb 24, 2020
diff --git a/Week1/homework/HackYourRepo/index.js b/Week1/homework/HackYourRepo/index.js
@@ -12,7 +12,7 @@
                 cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
             }
         };
-        xhr.onerror = () => cb(new Error('Network request failed'));
+        xhr.onerror = () => cb(new Error('Network request faileddddd'));
         xhr.send();
     }
 

diff --git a/Week2/homework/HackYourRepo2/index.js b/Week2/homework/HackYourRepo2/index.js
@@ -21,7 +21,12 @@
                 'Content-Type': 'application/json',
             }
         })
-            .then((response) => response.json())
+        .then((response) => {
+            if (!response.ok) {
+                throw response
+            }
+            return response.json()
+        })
             .then((data) => {
                 cb(null, data);
             })
@@ -212,4 +217,4 @@
     const HYF_REPOS_URL =
         'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
     window.onload = () => main(HYF_REPOS_URL);
-}
+}
diff --git a/Week3/homework/HackYourRepo2/hyf.png b/Week3/homework/HackYourRepo2/hyf.png
diff --git a/Week3/homework/HackYourRepo2/index.html b/Week3/homework/HackYourRepo2/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="theme-color" content="#000000">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="format-detection" content="telephone=no">
+    <link rel="apple-touch-icon" href="./hyf.png">
+    <link rel="shortcut icon" type="image/png" href="./hyf.png" />
+    <title>HYF-GITHUB</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <div id="root"></div>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="./index.js"></script>
+</body>
+
+</html>
diff --git a/Week3/homework/HackYourRepo2/index.js b/Week3/homework/HackYourRepo2/index.js
@@ -0,0 +1,250 @@
+'use strict';
+
+{
+    async function fetchJSON(url, cb) {
+        // const xhr = new XMLHttpRequest();
+        // xhr.open('GET', url);
+        // xhr.responseType = 'json';
+        // xhr.onload = () => {
+        //     if (xhr.status >= 200 && xhr.status <= 299) {
+        //         cb(null, xhr.response);
+        //     } else {
+        //         cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
+        //     }
+        // };
+        // xhr.onerror = () => cb(new Error('Network request failed'));
+        // xhr.send();
+
+        // With fetch()
+        // fetch(url, {
+        //     method: 'GET',
+        //     headers: {
+        //         'Content-Type': 'application/json',
+        //     }
+        // })
+        //     .then((response) => {
+        //         if (!response.ok) {
+        //             throw response
+        //         }
+        //         return response.json()
+        //     })
+        //     .then((data) => {
+        //         cb(null, data);
+        //     })
+        //     .catch((err) => {
+        //         cb(new Error('Network request failed'));
+        //     });
+
+        /// With Axios
+        // const axios = require('axios');
+        // axios.get(url)
+        //     .then(function (response) {
+        //         if (response.status !== 200) {
+        //             throw response
+        //         }
+        //         return response.data
+        //     })
+        //     .then(function (data) {
+        //         cb(null, data);
+        //     })
+        //     .catch(function (error) {
+        //         cb(new Error('Network request failed'));
+        //     });
+
+
+        // With axios async await
+        try {
+            const response = await axios.get(url)
+            if (response.status !== 200) {
+                throw response
+            }
+            const data = response.data;
+            cb(null, data);
+        } catch (error) {
+            cb(new Error('Network request failed'));
+        }
+    }
+
+    function createAndAppend(name, parent, options = {}) {
+        const elem = document.createElement(name);
+        parent.appendChild(elem);
+        Object.entries(options).forEach(([key, value]) => {
+            if (key === 'text') {
+                elem.innerHTML = value;
+            } else {
+                elem.setAttribute(key, value);
+            }
+        });
+        return elem;
+    }
+
+    // Fix the format of the date
+    const fixFormatDate = (myDate) => {
+        let [date, time] = myDate.split('T');
+        let [year, month, day] = date.split('-');
+        let [timeClean] = time.split('Z');
+        let [hour, minutes, seconds] = timeClean.split(':');
+        if (hour > 12) {
+            hour = hour - 12;
+            var time_ind = 'PM';
+        } else {
+            var time_ind = 'AM';
+        }
+        let fixedDate = `${day}/${month}/${year}, ${hour}:${minutes}:${seconds} ${time_ind}`;
+
+        return fixedDate;
+    }
+
+
+    function renderRepoDetails(repo, ul) {
+
+        createAndAppend('li', ul, {
+            text: `<strong>Repository:</strong> <a href="${repo.html_url}">${repo.name}</a><br><span class="description"><strong>Description:</strong> ${repo.description}</span><br><strong>Forks:</strong> ${repo.forks}<br><span class="updated"><strong>Updated:</strong> ${fixFormatDate(repo.updated_at)}</span>`,
+            style: `padding: 1.5rem`
+        });
+    }
+
+
+    // Sort the arrays, eg. repos
+    const sortArrayAlpha = (array) => {
+        let sortedArray = array.sort(function (a, b) {
+            let textA = a.name.toUpperCase();
+            let textB = b.name.toUpperCase();
+            return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
+        });
+        return sortedArray;
+    }
+
+    // Load the contributors container
+    const loadContributors = (url) => {
+        fetchJSON(url, (err, contributors) => {
+            contributors_container.innerHTML = '';
+
+            createAndAppend('h3', contributors_container, {
+                id: 'contributors__title',
+                text: 'Contributions'
+            });
+            var contributorsList = createAndAppend('ul', contributors_container, {
+                id: 'contributors__list'
+            });
+
+            if (contributors) {
+                contributors.forEach(contributor => {
+                    const contributorElem = createAndAppend('li', contributorsList, {
+                        class: 'contributor__element'
+                    });
+                    const nameImgElem = createAndAppend('div', contributorElem, {
+                        class: 'contributor__name-container'
+                    })
+                    createAndAppend('img', nameImgElem, {
+                        class: 'contributor__image',
+                        src: contributor.avatar_url,
+                        style: 'height: 50px; width:50px'
+                    });
+                    createAndAppend('a', nameImgElem, {
+                        text: contributor.login,
+                        href: contributor.html_url
+                    });
+                    createAndAppend('div', contributorElem, {
+                        text: contributor.contributions,
+                        class: 'contributions__count'
+                    })
+                });
+            }
+
+
+            if (err) {
+                createAndAppend('li', contributorsList, {
+                    text: `Network Request Failed`,
+                    class: 'alert-error',
+                });
+                return;
+            }
+        });
+    }
+
+
+    function main(url) {
+
+        fetchJSON(url, (err, repos) => {
+            const root = document.getElementById('root');
+
+            // CREATE THE HEADER
+            const hyfElem = createAndAppend('div', root, {
+                text: `HYF Repositories`,
+                style: `padding: 1.5rem; color: white; background-color: #4567d8`,
+                id: 'hyf__header'
+            });
+
+            const data_container = createAndAppend('div', root, {
+                id: 'data__container'
+            })
+
+            const list_container = createAndAppend('div', data_container, {
+                id: 'list__container'
+            });
+            const ul = createAndAppend('ul', list_container);
+
+            if (repos) {
+                // Sort the repos array
+                let sortRepos = sortArrayAlpha(repos);
+
+                // Create the SELECT item
+                const selectElem = createAndAppend('select', hyfElem, {
+                    name: 'repos',
+                    id: 'repos__select'
+                })
+
+                sortRepos.forEach(repo => {
+                    createAndAppend('option', selectElem, {
+                        text: repo.name,
+                        value: repo.name
+                    });
+                });
+
+
+                renderRepoDetails(sortRepos[0], ul);
+
+                const contributors_container = createAndAppend('div', data_container, {
+                    id: 'contributors_container'
+                })
+
+                loadContributors(sortRepos[0].contributors_url);
+
+                // Make the repos have only specific number of items eg. 10
+                const sizeRepos = (num) => {
+                    const reposSized = [];
+                    for (let i = 0; i < num; i++) {
+                        reposSized.push(sortRepos[i]);
+                    }
+                    return reposSized;
+                }
+
+                selectElem.addEventListener('change', e => {
+                    ul.innerHTML = '';
+                    sortRepos.forEach(repo => {
+                        if (repo.name === e.target.value) {
+                            renderRepoDetails(repo, ul);
+                            loadContributors(repo.contributors_url);
+                        }
+                    });
+                })
+            }
+
+
+            if (err) {
+                createAndAppend('li', ul, {
+                    text: `Network Request Failed`,
+                    class: 'alert-error',
+                });
+                return;
+            }
+
+            // sizeRepos(10).forEach(repo => renderRepoDetails(repo, ul));
+        });
+    }
+
+    const HYF_REPOS_URL =
+        'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+    window.onload = () => main(HYF_REPOS_URL);
+}