Format star count to better match github

2022-04-29 10:22:39 +01:00
parent 4b8e62506d
commit d9cb941ed8
3 changed files with 58 additions and 1 deletions
@@ -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) {
      </div>
      {starCount && (
        <div className="px-2 py-1 border-l border-slate-400 bg-slate-100 rounded-r-sm">
-          <Body className="font-bold">{starCount}</Body>
+          <Body className="font-bold">{formatStarCount(starCount)}</Body>
        </div>
      )}
    </a>
@@ -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`;
+}
@@ -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");
+  });
+});