From 1aac397daa3acfcd773ce98a51d3a549418218db Mon Sep 17 00:00:00 2001 From: jrtechs Date: Fri, 27 Dec 2019 15:10:42 -0500 Subject: [PATCH] Updated the front end to use the new friends backend api route --- public/js/friendsGraph.js | 123 ++++++++++++-------------------------- public/js/githubAPI.js | 81 +++++++++++++++++-------- 2 files changed, 93 insertions(+), 111 deletions(-) diff --git a/public/js/friendsGraph.js b/public/js/friendsGraph.js index f3baa11..794d4fb 100644 --- a/public/js/friendsGraph.js +++ b/public/js/friendsGraph.js @@ -75,12 +75,12 @@ function addPersonToGraph(profileData) * @param apiPath * @returns {Promise} */ -function addFriends(username, apiPath, page) +function addFriends(username) { updateProgress(); - return new Promise(function(resolve, reject) + return new Promise((resolve, reject)=> { - queryAPIByUser(apiPath + "?page=" + page, username, function(data) + getFriendsAPI(username, (data)=> { for(var i = 0; i < data.length; i++) { @@ -89,20 +89,9 @@ function addFriends(username, apiPath, page) addPersonToGraph(data[i]); } } - - if(page < 50 && data.length === 30) - { - addFriends(username, apiPath, page+ 1).then(function() - { - resolve(); - }) - } - else - { - resolve(); - } + resolve(); }, - function(error) + (error)=> { reject(error); }) @@ -156,37 +145,6 @@ function addConnection(person1, person2) } -function processConnections(user, apiPoint, page) -{ - return new Promise(function(resolve, reject) - { - queryAPIByUser(apiPoint + "?page=" + page, user.name, - function(data) - { - for(var i = 0; i < data.length; i++) - { - addConnection(user, data[i]) - } - if(page < 50 && data.length === 30) - { - processConnections(user, apiPoint, page + 1).then(function() - { - resolve(); - }); - } - else - { - resolve(); - } - }, function(error) - { - console.log(error); - resolve(); - }) - }) -} - - /** * Processes all the connections of a user and adds them to the graph * @@ -197,25 +155,20 @@ function processUserConnections(user) { return new Promise(function(resolve, reject) { - if(user.id === baseID) - { - processConnections(user, API_FOLLOWING, 1).then(function() + updateProgress(); + getFriendsAPI(user.name, + (data)=> { - processConnections(user, API_FOLLOWERS, 1).then(function() + for(var i = 0; i < data.length; i++) { - updateProgress(); - resolve(); - }) - }) - } - else - { - processConnections(user, API_FOLLOWING, 1).then(function() + addConnection(user, data[i]) + } + resolve(); + }, (error)=> { - updateProgress(); + console.log(error); resolve(); }) - } }); } @@ -228,7 +181,7 @@ function processUserConnections(user) */ function createConnections() { - return new Promise(function(resolve, reject) + return new Promise((resolve, reject)=> { var prom = []; for(var i = 0; i < nodes.length; i++) @@ -248,6 +201,9 @@ function createConnections() } +/** + * Updates progress bar for loading the JS graph + */ function updateProgress() { indexed++; @@ -267,16 +223,16 @@ function updateProgress() */ function addSelfToGraph(username) { - return new Promise(function(resolve, reject) + return new Promise((resolve, reject)=> { - queryAPIByUser("", username, function(data) + queryAPIByUser("", username, (data)=> { baseID = data.id; total = (data.followers + data.following); addPersonToGraph(data); resolve(); }, - function(error) + (error)=> { reject(error); }); @@ -313,35 +269,32 @@ function createFriendsGraph(username, containerName, progressBarID) nodes = []; edges = []; - addSelfToGraph(username).then(function() + addSelfToGraph(username).then(()=> { - addFriends(username, API_FOLLOWERS,1).then(function() + addFriends(username).then(()=> { - addFriends(username, API_FOLLOWING,1).then(function() + createConnections().then(()=> { - createConnections().then(function() - { - $("#" + progressID).html(""); + $("#" + progressID).html(""); - var container = document.getElementById(containerName); - var data = - { - nodes: nodes, - edges: edges - }; - var network = new vis.Network(container, data, options); + var container = document.getElementById(containerName); + var data = + { + nodes: nodes, + edges: edges + }; + var network = new vis.Network(container, data, options); - network.on("click", function (params) + network.on("click", function (params) + { + if(Number(this.getNodeAt(params.pointer.DOM)) !== NaN) { - if(Number(this.getNodeAt(params.pointer.DOM)) !== NaN) - { - bringUpProfileView(Number(this.getNodeAt(params.pointer.DOM))); - } - }); + bringUpProfileView(Number(this.getNodeAt(params.pointer.DOM))); + } }); }); }) - }).catch(function(error) + }).catch((error)=> { $("#" + graphsTitle).html("Error Fetching Data From API"); alert("Invalid User"); diff --git a/public/js/githubAPI.js b/public/js/githubAPI.js index 0dbe0a6..beb8030 100644 --- a/public/js/githubAPI.js +++ b/public/js/githubAPI.js @@ -17,10 +17,6 @@ const API_ORG_MEMBERS = "/members"; const API_REPOS = "/repos"; -const API_FOLLOWING = "/following"; - -const API_FOLLOWERS = "/followers"; - const API_REPOSITORIES = "/repos"; const API_ORGANIZATIONS = "/orgs"; @@ -31,39 +27,72 @@ const API_ORGANIZATIONS = "/orgs"; * allows you to get at the data using a * callback which gives you a json object. * - * @param apiPath the path on the github api ie API_FOLLOWING * @param user the username to query * @param successCallBack callback to complete when data is returned * @param errorCallBack callback which is invoked on error */ -function queryAPIByUser(apiPath, user, successCallBack, errorCallBack) { +function queryAPIByUser(apiPath, user, successCallBack, errorCallBack) +{ const urlpath = APIROOT + API_USER_PATH + user + apiPath; - console.log(urlpath); - $.ajax({ - type:'GET', - url: urlpath, - dataType: "json", - success: successCallBack, - error:errorCallBack, - timeout: 4000 - }); + runAjax(urlpath, successCallBack, errorCallBack); } -function queryAPIByOrg(apiPath, org, successCallBack, errorCallBack) { +/** + * Makes API calls for orgs on github + * + * @param {*} apiPath + * @param {*} org + * @param {*} successCallBack + * @param {*} errorCallBack + */ +function queryAPIByOrg(apiPath, org, successCallBack, errorCallBack) +{ const urlpath = APIROOT + API_ORG_PATH + org + apiPath; - console.log(urlpath); - $.ajax({ - type:'GET', - url: urlpath, - dataType: "json", - success: successCallBack, - error:errorCallBack, - timeout: 4000 - }); + runAjax(urlpath, successCallBack, errorCallBack); } -function queryUrl(url, successCallBack, errorCallBack) { + +/** + * Fetches a list of fiends for a user. + * + * @param {*} userName + * @param {*} suc + * @param {*} err + */ +function getFriendsAPI(userName, suc, err) +{ + // api/friends/jrtechs + const urlpath = APIROOT + "/friends/" + userName; + runAjax(urlpath, suc, err); +} + + +/** + * Queries github API end points with the backend + * proxy server for github graphs. + * + * @param {*} url + * @param {*} successCallBack + * @param {*} errorCallBack + */ +function queryUrl(url, successCallBack, errorCallBack) +{ url = url.split("https://api.github.com/").join("api/"); + runAjax(url, successCallBack, errorCallBack); +} + + +/** + * Wrapper for AJAX calls so we can unify + * all of our settings. + * + * @param {*} url -- url to query + * @param {*} successCallBack -- callback with data retrieved + * @param {*} errorCallBack -- callback with error message + */ +function runAjax(url, successCallBack, errorCallBack) +{ + console.log(url); $.ajax({ type:'GET', url: url,