From 253eb39b19dad64a6af877d2a9da3f599cca237b Mon Sep 17 00:00:00 2001 From: anuraghazra Date: Sat, 18 Jul 2020 22:44:27 +0530 Subject: [PATCH] refactor: added FlexLayout for flex layouts --- src/renderRepoCard.js | 56 ++++++++++++++++++++++------------- src/renderStatsCard.js | 28 +++++++----------- src/utils.js | 22 ++++++++++++++ tests/renderRepoCard.test.js | 28 ++++++++++++++++++ tests/renderStatsCard.test.js | 2 -- tests/utils.test.js | 28 +++++++++++++++++- 6 files changed, 122 insertions(+), 42 deletions(-) diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js index c3e5a602793a9..db2dbf5fd056e 100644 --- a/src/renderRepoCard.js +++ b/src/renderRepoCard.js @@ -1,4 +1,9 @@ -const { kFormatter, encodeHTML, fallbackColor } = require("../src/utils"); +const { + kFormatter, + encodeHTML, + fallbackColor, + FlexLayout, +} = require("../src/utils"); const icons = require("./icons"); const renderRepoCard = (repo, options = {}) => { @@ -42,6 +47,31 @@ const renderRepoCard = (repo, options = {}) => { ` : ""; + const svgLanguage = ` + + + ${langName} + + `; + + const svgStars = + stargazers.totalCount > 0 && + ` + + ${icons.star} + + ${totalStars} + `; + + const svgForks = + totalForks > 0 && + ` + + ${icons.fork} + + ${totalForks} + `; + return ` `; }; diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js index bedfc2ec57460..2ba27614dee86 100644 --- a/src/renderStatsCard.js +++ b/src/renderStatsCard.js @@ -1,22 +1,11 @@ -const { kFormatter, fallbackColor } = require("../src/utils"); +const { kFormatter, fallbackColor, FlexLayout } = require("../src/utils"); const getStyles = require("./getStyles"); const icons = require("./icons"); -const createTextNode = ({ - icon, - label, - value, - id, - index, - lineHeight, - showIcons, -}) => { +const createTextNode = ({ icon, label, value, id, index, showIcons }) => { const kValue = kFormatter(value); const staggerDelay = (index + 3) * 150; - // manually calculating lineHeight based on index instead of using - // to fix firefox layout bug - const lheight = lineHeight * (index + 1); - const translateY = lheight - lineHeight / 2; + const labelOffset = showIcons ? `x="25"` : ""; const iconSvg = showIcons ? ` @@ -26,7 +15,7 @@ const createTextNode = ({ ` : ""; return ` - + ${iconSvg} ${label}: ${kValue} @@ -106,7 +95,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { createTextNode({ ...STATS[key], index, - lineHeight: lheight, showIcons: show_icons, }) ); @@ -188,8 +176,12 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { })"> ${rankCircle} - - ${statItems.toString().replace(/\,/gm, "")} + + ${FlexLayout({ + items: statItems, + gap: lheight, + direction: "column", + }).join("")} diff --git a/src/utils.js b/src/utils.js index 4564ffb9f6e3f..e3a12b1ebcd25 100644 --- a/src/utils.js +++ b/src/utils.js @@ -56,6 +56,27 @@ function request(data, headers) { }); } +/** + * + * @param {String[]} items + * @param {Number} gap + * @param {string} direction + * + * @description + * Auto layout utility, allows us to layout things + * vertically or horizontally with proper gaping + */ +function FlexLayout({ items, gap, direction }) { + // filter() for filtering out empty strings + return items.filter(Boolean).map((item, i) => { + let transform = `translate(${gap * i}, 0)`; + if (direction === "column") { + transform = `translate(0, ${gap * i})`; + } + return `${item}`; + }); +} + module.exports = { renderError, kFormatter, @@ -64,4 +85,5 @@ module.exports = { request, parseBoolean, fallbackColor, + FlexLayout, }; diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js index 27ca23b2d93f7..a962a29b6cbd8 100644 --- a/tests/renderRepoCard.test.js +++ b/tests/renderRepoCard.test.js @@ -158,4 +158,32 @@ describe("Test renderRepoCard", () => { "Archived" ); }); + + it("should not render star count or fork count if either of the are zero", () => { + document.body.innerHTML = renderRepoCard({ + ...data_repo.repository, + stargazers: { totalCount: 0 }, + }); + + expect(queryByTestId(document.body, "stargazers")).toBeNull(); + expect(queryByTestId(document.body, "forkcount")).toBeDefined(); + + document.body.innerHTML = renderRepoCard({ + ...data_repo.repository, + stargazers: { totalCount: 1 }, + forkCount: 0, + }); + + expect(queryByTestId(document.body, "stargazers")).toBeDefined(); + expect(queryByTestId(document.body, "forkcount")).toBeNull(); + + document.body.innerHTML = renderRepoCard({ + ...data_repo.repository, + stargazers: { totalCount: 0 }, + forkCount: 0, + }); + + expect(queryByTestId(document.body, "stargazers")).toBeNull(); + expect(queryByTestId(document.body, "forkcount")).toBeNull(); + }); }); diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index 7dc76f464aeca..603af0f48dc1c 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -70,7 +70,6 @@ describe("Test renderStatsCard", () => { document.body.innerHTML = renderStatsCard(stats); const styleTag = document.querySelector("style"); - console.log(styleTag.textContent); const stylesObject = cssToObject(styleTag.textContent); const headerClassStyles = stylesObject[".header"]; @@ -157,7 +156,6 @@ describe("Test renderStatsCard", () => { it("should not have icons if show_icons is false", () => { document.body.innerHTML = renderStatsCard(stats, { show_icons: false }); - console.log(queryAllByTestId(document.body, "icon")); expect(queryAllByTestId(document.body, "icon")[0]).not.toBeDefined(); expect(queryByTestId(document.body, "stars")).toBeDefined(); expect( diff --git a/tests/utils.test.js b/tests/utils.test.js index e206f4f85e1b6..3584bb5de9d66 100644 --- a/tests/utils.test.js +++ b/tests/utils.test.js @@ -1,4 +1,9 @@ -const { kFormatter, encodeHTML, renderError } = require("../src/utils"); +const { + kFormatter, + encodeHTML, + renderError, + FlexLayout, +} = require("../src/utils"); describe("Test utils.js", () => { it("should test kFormatter", () => { @@ -23,4 +28,25 @@ describe("Test utils.js", () => { "Something went wrong" ); }); + + it("should test FlexLayout", () => { + const layout = FlexLayout({ + items: ["1", "2"], + gap: 60, + }).join(""); + + expect(layout).toBe( + `12` + ); + + const columns = FlexLayout({ + items: ["1", "2"], + gap: 60, + direction: "column", + }).join(""); + + expect(columns).toBe( + `12` + ); + }); });