From d9cb941ed8c38a0369ed15a30a0a2116f4b03912 Mon Sep 17 00:00:00 2001 From: Eric Allam Date: Fri, 29 Apr 2022 10:22:39 +0100 Subject: [PATCH] Format star count to better match github --- app/components/UI/GithubStar.tsx | 3 ++- app/utilities/formatStarCount.ts | 33 ++++++++++++++++++++++++++++++++ tests/formatStarCount.test.ts | 23 ++++++++++++++++++++++ 3 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 app/utilities/formatStarCount.ts create mode 100644 tests/formatStarCount.test.ts diff --git a/app/components/UI/GithubStar.tsx b/app/components/UI/GithubStar.tsx index cec037d..4d4f2ea 100644 --- a/app/components/UI/GithubStar.tsx +++ b/app/components/UI/GithubStar.tsx @@ -1,3 +1,4 @@ +import { formatStarCount } from "~/utilities/formatStarCount"; import { GithubIconSimple } from "../Icons/GithubIconSimple"; import { Body } from "../Primitives/Body"; import { useStarCount } from "../StarCountProvider"; @@ -21,7 +22,7 @@ export function GithubStar({ className }: GithubStarProps) { {starCount && (
- {starCount} + {formatStarCount(starCount)}
)} diff --git a/app/utilities/formatStarCount.ts b/app/utilities/formatStarCount.ts new file mode 100644 index 0000000..41cab92 --- /dev/null +++ b/app/utilities/formatStarCount.ts @@ -0,0 +1,33 @@ +// Should truncate the number to not show the exact number of stars +// If over 1000, show 1k +// If between 1100 and 1199, show 1.1k +// If between 1200 and 1299, show 1.2k +// If between 1300 and 1399, show 1.3k +// If over 10000, show 10k +// if between 10100 and 10199, show 10.1k +// if between 10200 and 10299, show 10.2k +// if between 10300 and 10399, show 10.3k +// if between 11000 and 11099, show 11k +// if between 11100 and 11199, show 11.1k +// if over 100000, show 100k +// if between 100100 and 100199, show 100.1k +// if between 100200 and 100299, show 100.2k +export function formatStarCount(count: number | undefined): string { + if (count === undefined) { + return "⭐️"; + } + + if (count < 1000) { + return count.toString(); + } + if (count < 10000) { + return `${Math.floor(count / 100) / 10}k`; + } + if (count < 100000) { + return `${Math.floor(count / 100) / 10}k`; + } + if (count < 1000000) { + return `${Math.floor(count / 100) / 10}k`; + } + return `${Math.floor(count / 100000)}k`; +} diff --git a/tests/formatStarCount.test.ts b/tests/formatStarCount.test.ts new file mode 100644 index 0000000..c769fbf --- /dev/null +++ b/tests/formatStarCount.test.ts @@ -0,0 +1,23 @@ +import { formatStarCount } from "../app/utilities/formatStarCount"; + +describe("formatStarCount", () => { + test("formats the star count correctly", () => { + expect(formatStarCount(undefined)).toBe("⭐️"); + expect(formatStarCount(0)).toBe("0"); + expect(formatStarCount(999)).toBe("999"); + expect(formatStarCount(1000)).toBe("1k"); + expect(formatStarCount(1100)).toBe("1.1k"); + expect(formatStarCount(1200)).toBe("1.2k"); + expect(formatStarCount(1300)).toBe("1.3k"); + expect(formatStarCount(10000)).toBe("10k"); + expect(formatStarCount(10100)).toBe("10.1k"); + expect(formatStarCount(10101)).toBe("10.1k"); + expect(formatStarCount(10199)).toBe("10.1k"); + expect(formatStarCount(10200)).toBe("10.2k"); + expect(formatStarCount(52678)).toBe("52.6k"); + expect(formatStarCount(99999)).toBe("99.9k"); + expect(formatStarCount(100000)).toBe("100k"); + expect(formatStarCount(100100)).toBe("100.1k"); + expect(formatStarCount(101100)).toBe("101.1k"); + }); +});