From fef8bc3a4a4ddb12a5c779e7cae18438231845a7 Mon Sep 17 00:00:00 2001 From: Anurag Date: Fri, 7 May 2021 00:49:43 +0530 Subject: [PATCH] refactor: minor refactors --- src/cards/repo-card.js | 12 +++++-- src/cards/stats-card.js | 24 +++++++++++--- src/cards/top-languages-card.js | 10 +++--- src/cards/wakatime-card.js | 6 ++-- src/common/Card.js | 4 +-- src/common/utils.js | 7 +++-- src/fetchers/repo-fetcher.js | 2 +- src/fetchers/stats-fetcher.js | 5 +-- src/fetchers/top-languages-fetcher.js | 8 ++--- src/translations.js | 45 ++++++++++++++------------- tests/utils.test.js | 8 ++--- 11 files changed, 76 insertions(+), 55 deletions(-) diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js index 1eb0e096f9c4b..9a21fcbdeb358 100644 --- a/src/cards/repo-card.js +++ b/src/cards/repo-card.js @@ -3,7 +3,7 @@ const { kFormatter, encodeHTML, getCardColors, - FlexLayout, + flexLayout, wrapTextMultiline, } = require("../common/utils"); const I18n = require("../common/I18n"); @@ -61,7 +61,13 @@ const renderRepoCard = (repo, options = {}) => { }); // returns theme based colors with proper overrides and defaults - const { titleColor, textColor, iconColor, bgColor, borderColor } = getCardColors({ + const { + titleColor, + textColor, + iconColor, + bgColor, + borderColor, + } = getCardColors({ title_color, icon_color, text_color, @@ -111,7 +117,7 @@ const renderRepoCard = (repo, options = {}) => { const svgForks = forkCount > 0 && iconWithLabel(icons.fork, totalForks, "forkcount"); - const starAndForkCount = FlexLayout({ + const starAndForkCount = flexLayout({ items: [svgStars, svgForks], gap: 65, }).join(""); diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js index 415252e57dc95..99582e0abe2a8 100644 --- a/src/cards/stats-card.js +++ b/src/cards/stats-card.js @@ -5,7 +5,7 @@ const { getStyles } = require("../getStyles"); const { statCardLocales } = require("../translations"); const { kFormatter, - FlexLayout, + flexLayout, clampValue, measureText, getCardColors, @@ -78,7 +78,13 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { const lheight = parseInt(line_height, 10); // returns theme based colors with proper overrides and defaults - const { titleColor, textColor, iconColor, bgColor, borderColor } = getCardColors({ + const { + titleColor, + textColor, + iconColor, + bgColor, + borderColor, + } = getCardColors({ title_color, icon_color, text_color, @@ -131,7 +137,17 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { }, }; - const longLocales = ["cn", "es", "fr", "pt-br", "ru", "uk-ua", "id", "my", "pl"]; + const longLocales = [ + "cn", + "es", + "fr", + "pt-br", + "ru", + "uk-ua", + "id", + "my", + "pl", + ]; const isLongLocale = longLocales.includes(locale) === true; // filter out hidden stats defined by user & create the text nodes @@ -223,7 +239,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { ${rankCircle} - ${FlexLayout({ + ${flexLayout({ items: statItems, gap: lheight, direction: "column", diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 5958be1cb22be..36b4b0cfe9014 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -1,8 +1,8 @@ const Card = require("../common/Card"); -const { clampValue, getCardColors, FlexLayout } = require("../common/utils"); -const { createProgressNode } = require("../common/createProgressNode"); -const { langCardLocales } = require("../translations"); const I18n = require("../common/I18n"); +const { langCardLocales } = require("../translations"); +const { createProgressNode } = require("../common/createProgressNode"); +const { clampValue, getCardColors, flexLayout } = require("../common/utils"); const createProgressTextNode = ({ width, color, name, progress }) => { const paddingRight = 95; @@ -75,7 +75,7 @@ const renderTopLanguages = (topLangs, options = {}) => { locale, langs_count = 5, border_radius, - border_color + border_color, } = options; const i18n = new I18n({ @@ -171,7 +171,7 @@ const renderTopLanguages = (topLangs, options = {}) => { }).join("")} `; } else { - finalLayout = FlexLayout({ + finalLayout = flexLayout({ items: langs.map((lang) => { return createProgressTextNode({ width: width, diff --git a/src/cards/wakatime-card.js b/src/cards/wakatime-card.js index f7306c029fb7f..14203dfea9c71 100644 --- a/src/cards/wakatime-card.js +++ b/src/cards/wakatime-card.js @@ -2,9 +2,9 @@ const Card = require("../common/Card"); const I18n = require("../common/I18n"); const { getStyles } = require("../getStyles"); const { wakatimeCardLocales } = require("../translations"); -const { clampValue, getCardColors, FlexLayout } = require("../common/utils"); -const { createProgressNode } = require("../common/createProgressNode"); const languageColors = require("../common/languageColors.json"); +const { createProgressNode } = require("../common/createProgressNode"); +const { clampValue, getCardColors, flexLayout } = require("../common/utils"); const noCodingActivityNode = ({ color, text }) => { return ` @@ -204,7 +204,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => { }).join("")} `; } else { - finalLayout = FlexLayout({ + finalLayout = flexLayout({ items: statItems.length ? statItems : [ diff --git a/src/common/Card.js b/src/common/Card.js index 0065cf798193d..3b5686e668805 100644 --- a/src/common/Card.js +++ b/src/common/Card.js @@ -1,5 +1,5 @@ -const { FlexLayout, encodeHTML } = require("../common/utils"); const { getAnimations } = require("../getStyles"); +const { flexLayout, encodeHTML } = require("../common/utils"); class Card { constructor({ @@ -85,7 +85,7 @@ class Card { data-testid="card-title" transform="translate(${this.paddingX}, ${this.paddingY})" > - ${FlexLayout({ + ${flexLayout({ items: [this.titlePrefixIcon && prefixIcon, titleText], gap: 25, }).join("")} diff --git a/src/common/utils.js b/src/common/utils.js index c1a47ff941491..64cc75658bf1c 100644 --- a/src/common/utils.js +++ b/src/common/utils.js @@ -97,7 +97,7 @@ function request(data, headers) { * Auto layout utility, allows us to layout things * vertically or horizontally with proper gaping */ -function FlexLayout({ items, gap, direction }) { +function flexLayout({ items, gap, direction }) { // filter() for filtering out empty strings return items.filter(Boolean).map((item, i) => { let transform = `translate(${gap * i}, 0)`; @@ -120,7 +120,8 @@ function getCardColors({ }) { const defaultTheme = themes[fallbackTheme]; const selectedTheme = themes[theme] || defaultTheme; - const defaultBorderColor = selectedTheme.border_color || defaultTheme.border_color; + const defaultBorderColor = + selectedTheme.border_color || defaultTheme.border_color; // get the color provided by the user else the theme color // finally if both colors are invalid fallback to default theme @@ -239,7 +240,7 @@ module.exports = { parseArray, parseBoolean, fallbackColor, - FlexLayout, + flexLayout, getCardColors, clampValue, wrapTextMultiline, diff --git a/src/fetchers/repo-fetcher.js b/src/fetchers/repo-fetcher.js index c09975dcaeea3..7e441084618f6 100644 --- a/src/fetchers/repo-fetcher.js +++ b/src/fetchers/repo-fetcher.js @@ -1,5 +1,5 @@ -const { request } = require("../common/utils"); const retryer = require("../common/retryer"); +const { request } = require("../common/utils"); const fetcher = (variables, token) => { return request( diff --git a/src/fetchers/stats-fetcher.js b/src/fetchers/stats-fetcher.js index 5c8a73cdcb6cf..ce5a4af7fad8a 100644 --- a/src/fetchers/stats-fetcher.js +++ b/src/fetchers/stats-fetcher.js @@ -1,8 +1,9 @@ -const { request, logger, CustomError } = require("../common/utils"); const axios = require("axios"); +const githubUsernameRegex = require("github-username-regex"); + const retryer = require("../common/retryer"); const calculateRank = require("../calculateRank"); -const githubUsernameRegex = require("github-username-regex"); +const { request, logger, CustomError } = require("../common/utils"); require("dotenv").config(); diff --git a/src/fetchers/top-languages-fetcher.js b/src/fetchers/top-languages-fetcher.js index 4694b6fe5f30a..7e248fb1e03cc 100644 --- a/src/fetchers/top-languages-fetcher.js +++ b/src/fetchers/top-languages-fetcher.js @@ -1,4 +1,4 @@ -const { request, logger, clampValue } = require("../common/utils"); +const { request, logger } = require("../common/utils"); const retryer = require("../common/retryer"); require("dotenv").config(); @@ -34,11 +34,7 @@ const fetcher = (variables, token) => { ); }; -async function fetchTopLanguages( - username, - exclude_repo = [], - hide = [], -) { +async function fetchTopLanguages(username, exclude_repo = []) { if (!username) throw Error("Invalid username"); const res = await retryer(fetcher, { login: username }); diff --git a/src/translations.js b/src/translations.js index 3d75b2a0a9a51..e0ce7dffcc258 100644 --- a/src/translations.js +++ b/src/translations.js @@ -1,30 +1,31 @@ const { encodeHTML } = require("./common/utils"); const statCardLocales = ({ name, apostrophe }) => { + const encodedName = encodeHTML(name); return { "statcard.title": { - cn: `${encodeHTML(name)} 的 GitHub 统计数据`, - cs: `GitHub statistiky uživatele ${encodeHTML(name)}`, - de: `${encodeHTML(name) + apostrophe} GitHub-Statistiken`, - en: `${encodeHTML(name)}'${apostrophe} GitHub Stats`, - es: `Estadísticas de GitHub de ${encodeHTML(name)}`, - fr: `Statistiques GitHub de ${encodeHTML(name)}`, - hu: `${encodeHTML(name)} GitHub statisztika`, - it: `Statistiche GitHub di ${encodeHTML(name)}`, - ja: `${encodeHTML(name)}の GitHub 統計`, - kr: `${encodeHTML(name)}의 GitHub 통계`, - nl: `${encodeHTML(name)}'${apostrophe} GitHub Statistieken`, - "pt-pt": `Estatísticas do GitHub de ${encodeHTML(name)}`, - "pt-br": `Estatísticas do GitHub de ${encodeHTML(name)}`, - np: `${encodeHTML(name)}'${apostrophe} गिटहब तथ्याङ्क`, - el: `Στατιστικά GitHub του ${encodeHTML(name)}`, - ru: `Статистика GitHub пользователя ${encodeHTML(name)}`, - "uk-ua": `Статистика GitHub користувача ${encodeHTML(name)}`, - id: `Statistik GitHub ${encodeHTML(name)}`, - my: `Statistik GitHub ${encodeHTML(name)}`, - sk: `GitHub štatistiky používateľa ${encodeHTML(name)}`, - tr: `${encodeHTML(name)} Hesabının GitHub Yıldızları`, - pl: `Statystyki GitHub użytkownika ${encodeHTML(name)}`, + cn: `${encodedName} 的 GitHub 统计数据`, + cs: `GitHub statistiky uživatele ${encodedName}`, + de: `${encodedName + apostrophe} GitHub-Statistiken`, + en: `${encodedName}'${apostrophe} GitHub Stats`, + es: `Estadísticas de GitHub de ${encodedName}`, + fr: `Statistiques GitHub de ${encodedName}`, + hu: `${encodedName} GitHub statisztika`, + it: `Statistiche GitHub di ${encodedName}`, + ja: `${encodedName}の GitHub 統計`, + kr: `${encodedName}의 GitHub 통계`, + nl: `${encodedName}'${apostrophe} GitHub Statistieken`, + "pt-pt": `Estatísticas do GitHub de ${encodedName}`, + "pt-br": `Estatísticas do GitHub de ${encodedName}`, + np: `${encodedName}'${apostrophe} गिटहब तथ्याङ्क`, + el: `Στατιστικά GitHub του ${encodedName}`, + ru: `Статистика GitHub пользователя ${encodedName}`, + "uk-ua": `Статистика GitHub користувача ${encodedName}`, + id: `Statistik GitHub ${encodedName}`, + my: `Statistik GitHub ${encodedName}`, + sk: `GitHub štatistiky používateľa ${encodedName}`, + tr: `${encodedName} Hesabının GitHub Yıldızları`, + pl: `Statystyki GitHub użytkownika ${encodedName}`, }, "statcard.totalstars": { cn: "获标星数（star）", diff --git a/tests/utils.test.js b/tests/utils.test.js index aa3bf9f564478..66f55d5d25129 100644 --- a/tests/utils.test.js +++ b/tests/utils.test.js @@ -3,7 +3,7 @@ const { kFormatter, encodeHTML, renderError, - FlexLayout, + flexLayout, getCardColors, wrapTextMultiline, } = require("../src/common/utils"); @@ -44,8 +44,8 @@ describe("Test utils.js", () => { ).toHaveTextContent(/Secondary Message/gim); }); - it("should test FlexLayout", () => { - const layout = FlexLayout({ + it("should test flexLayout", () => { + const layout = flexLayout({ items: ["1", "2"], gap: 60, }).join(""); @@ -54,7 +54,7 @@ describe("Test utils.js", () => { `12`, ); - const columns = FlexLayout({ + const columns = flexLayout({ items: ["1", "2"], gap: 60, direction: "column",