Use userId instead of username

package.json

@@ -15,6 +15,7 @@
     "xo": "^0.24.0"
   },
   "dependencies": {
+    "camelcase": "^5.2.0",
     "escape-html": "^1.0.3"
   }
 }

src/build-bias-element.js

@@ -2,8 +2,8 @@ import escapeHtml from 'escape-html';
 import getData from './get-data';
 import calculateBias from './calculate-bias';
 
-const buildBiasElement = async username => {
+const buildBiasElement = async userId => {
-	const data = await getData(username);
+	const data = await getData(userId);
 
 	const container = document.createElement('div');
 	container.innerHTML = `

src/get-data.js

@@ -1,7 +1,7 @@
 const dataCache = new Map();
 
-const getData = async username => {
+const getData = async userId => {
-	const url = `https://hive.one/api/top-people/${username}`;
+	const url = `https://hive.one/api/top-people/${userId}`;
 
 	const cachedData = dataCache.get(url);
 	if (typeof cachedData !== 'undefined') {

src/inject-chart-profile-hover.js

@@ -10,8 +10,8 @@ const injectChartProfileHover = async () => {
 
 	profileCard.dataset.coinflict = true;
 
-	const username = profileCard.querySelector('[data-screen-name]').dataset.screenName;
+	const userId = profileHoverContainer.dataset.userId;
-	const biases = await buildBiasElement(username);
+	const biases = await buildBiasElement(userId);
 
 	const negativeMargin = 12;
 	biases.style.marginTop = `-${negativeMargin}px`;

src/inject-chart-profile-page.js

@@ -9,8 +9,8 @@ const injectChartProfilePage = async () => {
 
 	profileHeaderCard.dataset.coinflict = true;
 
-	const username = profileHeaderCard.querySelector('.username').textContent.split('@').pop();
+	const userId = document.querySelector('.ProfileNav').dataset.userId;
-	const biases = await buildBiasElement(username);
+	const biases = await buildBiasElement(userId);
 
 	const bio = profileHeaderCard.querySelector('.ProfileHeaderCard-bio');
 	bio.parentNode.insertBefore(biases, bio.nextSibling);

src/preload-data.js

@@ -1,15 +1,17 @@
+import camelcase from 'camelcase';
 import getData from './get-data';
 
-const preloadData = () => {
+const scrapeDataAttribute = dataAttribute => {
-	// Get all usernames we can find with data-screen-name
+	return [...document.querySelectorAll(`[data-${dataAttribute}]`)].map(el => {
-	const usernames = [...document.querySelectorAll('[data-screen-name]')]
+		return el.dataset[camelcase(dataAttribute)];
-		.map(element => element.dataset.screenName);
+	});
-
+};
-	// Also scrape usernames from mentions and other user id links
-	const linkUsernames = [...document.querySelectorAll('a[data-user-id], a[data-mentioned-user-id]')]
-		.map(a => a.href.split('/').pop());
 
-	new Set([...usernames, ...linkUsernames]).forEach(getData);
+const preloadData = () => {
+	new Set([
+		...scrapeDataAttribute('user-id'),
+		...scrapeDataAttribute('mention-user-id'),
+	]).forEach(getData);
 };
 
 export default preloadData;

yarn.lock

@@ -638,7 +638,7 @@ camelcase@^4.0.0, camelcase@^4.1.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
   integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
 
-camelcase@^5.0.0:
+camelcase@^5.0.0, camelcase@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.2.0.tgz#e7522abda5ed94cc0489e1b8466610e88404cf45"
   integrity sha512-IXFsBS2pC+X0j0N/GE7Dm7j3bsEBp+oTpb7F50dwEVX7rf3IgwO9XatnegTsDtniKCUtEJH4fSU6Asw7uoVLfQ==