Add organizations

assets/js/app.js

@@ -21,6 +21,7 @@ const starsContainer = document.querySelector('#stars');
 const avatarWrapper = document.querySelector('#avatar-wrapper');
 const nameValue = document.querySelector('#name');
 const urlValue = document.querySelector('#url');
+const organizationsValue = document.querySelector('#organizations');
 const userLocationValue = document.querySelector('#location');
 const bioValue = document.querySelector('#bio');
 const rankingContainer = document.querySelector('#ranking');
@@ -124,8 +125,13 @@ function inspectFormSubmitHandler(e) {
             followers {
                 totalCount
             },
-            organizations {
-                totalCount
+            organizations(first: 100) {
+                totalCount,
+                nodes {
+                    name,
+                    url,
+                    avatarUrl
+                }
             },
             repositories(first: 100) {
                 totalCount,
@@ -191,6 +197,7 @@ function inspectFormSubmitHandler(e) {
             fillValue(userSinceDateValue, createdAtMoment.format('(DD.MM.YYYY)'));
             fillStatisticsContainer(userSinceContainer, createdAtMoment.fromNow(), currentTimestamp - createdAtTimestamp);
             fillStatisticsContainer(reposContainer, userData.repositories.totalCount);
+            fillValue(organizationsValue, getOrganizationsValue(userData.organizations.nodes), true);
 
             let starsCount = 0;
             userData.repositories.nodes.forEach(repo => {
@@ -347,6 +354,14 @@ function round(num) {
     return Math.round(num * 10) / 10;
 }
 
+function getOrganizationsValue(organizations) {
+    let organizationsValue = '';
+    organizations.forEach((organization) => {
+        organizationsValue += '<a href="' + organization.url + '"><img src="' + organization.avatarUrl + '" alt="' + organization.name + '" /></a>';
+    });
+    return organizationsValue;
+}
+
 function fillStatisticsContainer(container, value, rawValue) {
     if(typeof rawValue === 'undefined') {
         rawValue = value;
@@ -374,15 +389,19 @@ function fillRankingContainer(container, value, maxValue) {
     progressBar.setAttribute('aria-valuenow', rankPercentage);
     fillValue(valueContainer, value + ' / ' + maxValue);
 }
-function fillValue(container, value) {
+function fillValue(container, value, allowHtml) {
     if(Number.isInteger(value)) {
         let valueAnimation = new CountUp(container, 0, value);
         valueAnimation.start();
     } else {
         if(!value || value === '') {
             value = '-';
         }
-        container.innerText = value;
+        if(allowHtml) {
+            container.innerHTML = value;
+        } else {
+            container.innerText = value;
+        }
     }
 }
 

assets/scss/styles.scss

@@ -172,3 +172,10 @@ $avatar-border-size: 5px;
     background-color: red;
     transition: width 2s ease-out;
 }
+#organizations img {
+    width: 35px;
+    height: 35px;
+    border-radius: 3px;
+    margin-bottom: 3px;
+    margin-right: 3px;
+}

index.html

@@ -59,6 +59,7 @@ <h1 id="page-title">Should we hire that dev?</h1>
                     <h2><a href="#" id="url"><span id="name">-</span></a></h2>
                     <p class="text-muted"><i class="fas fa-map-marker-alt" aria-hidden="true"></i> <span id="location">-</span></p>
                     <p id="bio">-</p>
+                    <div id="organizations"></div>
                 </div>
 
                 <div class="row statistics justify-content-center">