Merge pull request #225 from wildan3105/fix/pass-usertype-to-chart

Fix: differentiate browse repos based on user type

Author: wildan3105

public/js/chart.js

@@ -44,6 +44,7 @@ const saveChart = () => {
 const chart = ({ limit, singleColor }) => {
     const canvasContainer = document.getElementById('canvas-container');
     const color = 'white';
+    const type = canvasContainer.dataset.type;
     const username = canvasContainer.dataset.username;
     const languages = JSON.parse(canvasContainer.dataset.languages);
     const colors = singleColor
@@ -116,13 +117,25 @@ const chart = ({ limit, singleColor }) => {
         }
     }));
 
+    const getURLBasedOnUserType = (userType, username) => {
+        let prefixURL;
+        if (userType === 'Organization') {
+            prefixURL = `https://github.com/orgs/${username}/repositories?q=`;
+        } else if (userType === 'Personal') {
+            prefixURL = `https://github.com/${username}?tab=repositories`;
+        }
+
+        return prefixURL;
+    };
+
     const onCanvasClick = (e) => {
         const activeElement = chart.getElementAtEvent(e)[0];
 
         if (activeElement) {
             let language = chart.data.labels[activeElement._index];
             language = slugify(language);
-            const url = `https://github.com/${username}?tab=repositories&type=&language=${language}`;
+            const prefixURL = getURLBasedOnUserType(type, username);
+            const url = `${prefixURL}&language=${language}`;
             window.open(url, '_blank');
         }
     };

src/api/controller.js

@@ -90,7 +90,7 @@ exports.index = async (req, res) => {
 
             axios.all(await reqRepos(username, numberOfPages))
                 .then((pages) => {
-                    const reposData = _.flatMap(pages, (page) => page.data);
+                    const reposData = _.flatMap(pages, (page) => page);
 
                     (numberOfRepos === 1) ? repos = `${numberOfRepos} repo` : repos = `${numberOfRepos} repos`;
                     reposData.forEach((repo) => {

src/api/octokit.js

@@ -22,7 +22,7 @@ class OctokitService {
 
     async getReposForUser(username, page) {
         try {
-            const data = await this.octokit.request(`GET /users/${username}/repos?per_page=${REPOS_PER_PAGE}&page=${page}`);
+            const { data } = await this.octokit.request(`GET /users/${username}/repos?per_page=${REPOS_PER_PAGE}&page=${page}`);
             return data;
         } catch (e) {
             throw e;

src/pages/partials/body.handlebars

@@ -52,6 +52,7 @@
             data-username='{{username}}'
             data-languages='{{languages}}'
             data-colors='{{colors}}'
+            data-type='{{type}}'
           >
             <canvas id="myChart" style="cursor:pointer;"></canvas>