Skip to content

Commit 1747445

Browse files
qwerty541jacobbexten
qwerty541
authored and
jacobbexten
committed
refactor: move duplicated code for rendering repo/gist cards into utils (anuraghazra#3214)
1 parent 26b234d commit 1747445

File tree

3 files changed

+75
-90
lines changed

3 files changed

+75
-90
lines changed

‎src/cards/gist-card.js

Lines changed: 14 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {
88
kFormatter,
99
measureText,
1010
flexLayout,
11+
iconWithLabel,
12+
createLanguageNode,
1113
} from "../common/utils.js";
1214
import Card from "../common/Card.js";
1315
import { icons } from "../common/icons.js";
@@ -27,48 +29,6 @@ const ICON_SIZE = 16;
2729
const CARD_DEFAULT_WIDTH = 400;
2830
const HEADER_MAX_LENGTH = 35;
2931

30-
/**
31-
* Creates a node to display the primary programming language of the gist.
32-
*
33-
* @param {string} langName Language name.
34-
* @param {string} langColor Language color.
35-
* @returns {string} Language display SVG object.
36-
*/
37-
const createLanguageNode = (langName, langColor) => {
38-
return `
39-
<g data-testid="primary-lang">
40-
<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
41-
<text data-testid="lang-name" class="gray" x="15">${langName}</text>
42-
</g>
43-
`;
44-
};
45-
46-
/**
47-
* Creates an icon with label to display gist stats like forks, stars, etc.
48-
*
49-
* @param {string} icon The icon to display.
50-
* @param {number|string} label The label to display.
51-
* @param {string} testid The testid to assign to the label.
52-
* @returns {string} Icon with label SVG object.
53-
*/
54-
const iconWithLabel = (icon, label, testid) => {
55-
if (typeof label === "number" && label <= 0) return "";
56-
const iconSvg = `
57-
<svg
58-
class="icon"
59-
y="-12"
60-
viewBox="0 0 16 16"
61-
version="1.1"
62-
width="${ICON_SIZE}"
63-
height="${ICON_SIZE}"
64-
>
65-
${icon}
66-
</svg>
67-
`;
68-
const text = `<text data-testid="${testid}" class="gray">${label}</text>`;
69-
return flexLayout({ items: [iconSvg, text], gap: 20 }).join("");
70-
};
71-
7232
/**
7333
* @typedef {import('./types').GistCardOptions} GistCardOptions Gist card options.
7434
* @typedef {import('../fetchers/types').GistData} GistData Gist data.
@@ -122,8 +82,18 @@ const renderGistCard = (gistData, options = {}) => {
12282

12383
const totalStars = kFormatter(starsCount);
12484
const totalForks = kFormatter(forksCount);
125-
const svgStars = iconWithLabel(icons.star, totalStars, "starsCount");
126-
const svgForks = iconWithLabel(icons.fork, totalForks, "forksCount");
85+
const svgStars = iconWithLabel(
86+
icons.star,
87+
totalStars,
88+
"starsCount",
89+
ICON_SIZE,
90+
);
91+
const svgForks = iconWithLabel(
92+
icons.fork,
93+
totalForks,
94+
"forksCount",
95+
ICON_SIZE,
96+
);
12797

12898
const languageName = language || "Unspecified";
12999
const languageColor = languageColors[languageName] || "#858585";

‎src/cards/repo-card.js

Lines changed: 16 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,13 @@ import {
1010
measureText,
1111
parseEmojis,
1212
wrapTextMultiline,
13+
iconWithLabel,
14+
createLanguageNode,
1315
} from "../common/utils.js";
1416
import { repoCardLocales } from "../translations.js";
1517

18+
const ICON_SIZE = 16;
19+
1620
/**
1721
* Retrieves the repository description and wraps it to fit the card width.
1822
*
@@ -35,50 +39,6 @@ const getBadgeSVG = (label, textColor) => `
3539
</g>
3640
`;
3741

38-
/**
39-
* Creates a node to display the primary programming language of the repository.
40-
*
41-
* @param {string} langName Language name.
42-
* @param {string} langColor Language color.
43-
* @returns {string} Language display SVG object.
44-
*/
45-
const createLanguageNode = (langName, langColor) => {
46-
return `
47-
<g data-testid="primary-lang">
48-
<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
49-
<text data-testid="lang-name" class="gray" x="15">${langName}</text>
50-
</g>
51-
`;
52-
};
53-
54-
const ICON_SIZE = 16;
55-
56-
/**
57-
* Creates an icon with label to display repository stats like forks, stars, etc.
58-
*
59-
* @param {string} icon The icon to display.
60-
* @param {number|string} label The label to display.
61-
* @param {string} testid The testid to assign to the label.
62-
* @returns {string} Icon with label SVG object.
63-
*/
64-
const iconWithLabel = (icon, label, testid) => {
65-
if (typeof label === "number" && label <= 0) return "";
66-
const iconSvg = `
67-
<svg
68-
class="icon"
69-
y="-12"
70-
viewBox="0 0 16 16"
71-
version="1.1"
72-
width="${ICON_SIZE}"
73-
height="${ICON_SIZE}"
74-
>
75-
${icon}
76-
</svg>
77-
`;
78-
const text = `<text data-testid="${testid}" class="gray">${label}</text>`;
79-
return flexLayout({ items: [iconSvg, text], gap: 20 }).join("");
80-
};
81-
8242
/**
8343
* @typedef {import("../fetchers/types").RepositoryData} RepositoryData Repository data.
8444
* @typedef {import("./types").RepoCardOptions} RepoCardOptions Repo card options.
@@ -151,8 +111,18 @@ const renderRepoCard = (repo, options = {}) => {
151111

152112
const totalStars = kFormatter(starCount);
153113
const totalForks = kFormatter(forkCount);
154-
const svgStars = iconWithLabel(icons.star, totalStars, "stargazers");
155-
const svgForks = iconWithLabel(icons.fork, totalForks, "forkcount");
114+
const svgStars = iconWithLabel(
115+
icons.star,
116+
totalStars,
117+
"stargazers",
118+
ICON_SIZE,
119+
);
120+
const svgForks = iconWithLabel(
121+
icons.fork,
122+
totalForks,
123+
"forkcount",
124+
ICON_SIZE,
125+
);
156126

157127
const starAndForkCount = flexLayout({
158128
items: [svgLanguage, svgStars, svgForks],

‎src/common/utils.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,49 @@ const renderError = (message, secondaryMessage = "") => {
3434
`;
3535
};
3636

37+
/**
38+
* Creates a node to display the primary programming language of the repository/gist.
39+
*
40+
* @param {string} langName Language name.
41+
* @param {string} langColor Language color.
42+
* @returns {string} Language display SVG object.
43+
*/
44+
const createLanguageNode = (langName, langColor) => {
45+
return `
46+
<g data-testid="primary-lang">
47+
<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
48+
<text data-testid="lang-name" class="gray" x="15">${langName}</text>
49+
</g>
50+
`;
51+
};
52+
53+
/**
54+
* Creates an icon with label to display repository/gist stats like forks, stars, etc.
55+
*
56+
* @param {string} icon The icon to display.
57+
* @param {number|string} label The label to display.
58+
* @param {string} testid The testid to assign to the label.
59+
* @param {number} iconSize The size of the icon.
60+
* @returns {string} Icon with label SVG object.
61+
*/
62+
const iconWithLabel = (icon, label, testid, iconSize) => {
63+
if (typeof label === "number" && label <= 0) return "";
64+
const iconSvg = `
65+
<svg
66+
class="icon"
67+
y="-12"
68+
viewBox="0 0 16 16"
69+
version="1.1"
70+
width="${iconSize}"
71+
height="${iconSize}"
72+
>
73+
${icon}
74+
</svg>
75+
`;
76+
const text = `<text data-testid="${testid}" class="gray">${label}</text>`;
77+
return flexLayout({ items: [iconSvg, text], gap: 20 }).join("");
78+
};
79+
3780
/**
3881
* Encode string as HTML.
3982
*
@@ -515,6 +558,8 @@ const dateDiff = (d1, d2) => {
515558
export {
516559
ERROR_CARD_LENGTH,
517560
renderError,
561+
createLanguageNode,
562+
iconWithLabel,
518563
encodeHTML,
519564
kFormatter,
520565
isValidHexColor,

0 commit comments

Comments
 (0)