♻️ refactor getGithubUserContribution

packages/action/generateContributionSnake.ts

@@ -15,9 +15,9 @@ export const generateContributionSnake = async (
   } | null)[]
 ) => {
   console.log("🎣 fetching github user contribution");
-  const { cells, colorScheme } = await getGithubUserContribution(userName);
+  const cells = await getGithubUserContribution(userName);
 
-  const grid = userContributionToGrid(cells, colorScheme);
+  const grid = userContributionToGrid(cells);
   const snake = snake4;
 
   console.log("📡 computing best route");

packages/action/userContributionToGrid.ts

@@ -2,17 +2,13 @@ import { setColor, createEmptyGrid, setColorEmpty } from "@snk/types/grid";
 import type { Cell } from "@snk/github-user-contribution";
 import type { Color } from "@snk/types/grid";
 
-export const userContributionToGrid = (
+export const userContributionToGrid = (cells: Cell[]) => {
-  cells: Cell[],
-  colorScheme: string[]
-) => {
   const width = Math.max(0, ...cells.map((c) => c.x)) + 1;
   const height = Math.max(0, ...cells.map((c) => c.y)) + 1;
 
   const grid = createEmptyGrid(width, height);
   for (const c of cells) {
-    const k = colorScheme.indexOf(c.color);
+    if (c.level > 0) setColor(grid, c.x, c.y, c.level as Color);
-    if (k > 0) setColor(grid, c.x, c.y, k as Color);
     else setColorEmpty(grid, c.x, c.y);
   }
 

packages/demo/demo.interactive.ts

@@ -163,7 +163,7 @@ const createViewer = ({
     const k = spring.x % 1;
 
     ctx.clearRect(0, 0, 9999, 9999);
-    drawLerpWorld(ctx, grid, null, snake0, snake1, stack, k, drawOptions);
+    drawLerpWorld(ctx, grid, cells, snake0, snake1, stack, k, drawOptions);
 
     if (!stable) animationFrame = requestAnimationFrame(loop);
   };
@@ -231,19 +231,19 @@ const onSubmit = async (userName: string) => {
   const res = await fetch(
     process.env.GITHUB_USER_CONTRIBUTION_API_ENDPOINT + userName
   );
-  const { cells, colorScheme } = (await res.json()) as Res;
+  const cells = (await res.json()) as Res;
 
   const drawOptions: DrawOptions = {
     sizeDotBorderRadius: 2,
     sizeCell: 16,
     sizeDot: 12,
     colorDotBorder: "#1b1f230a",
-    colorDots: colorScheme as any,
+    colorDots: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"],
-    colorEmpty: colorScheme[0],
+    colorEmpty: "#ebedf0",
     colorSnake: "purple",
   };
 
-  const grid = userContributionToGrid(cells, colorScheme);
+  const grid = userContributionToGrid(cells);
 
   const chain = await getChain(grid);
 

packages/github-user-contribution/__tests__/getGithubUserContribution.spec.ts

@@ -7,41 +7,22 @@ describe("getGithubUserContribution", () => {
     await promise;
   });
 
-  it("should get colorScheme", async () => {
-    const { colorScheme } = await promise;
-
-    expect(colorScheme).toEqual([
-      "#ebedf0",
-      "#9be9a8",
-      "#40c463",
-      "#30a14e",
-      "#216e39",
-    ]);
-  });
-
   it("should get around 365 cells", async () => {
-    const { cells } = await promise;
+    const cells = await promise;
 
     expect(cells.length).toBeGreaterThanOrEqual(365);
     expect(cells.length).toBeLessThanOrEqual(365 + 7);
   });
 
   it("cells should have x / y coords representing to a 7 x (365/7) (minus unfilled last row)", async () => {
-    const { cells, colorScheme } = await promise;
+    const cells = await promise;
 
     expect(cells.length).toBeGreaterThan(300);
-    expect(colorScheme).toEqual([
-      "#ebedf0",
-      "#9be9a8",
-      "#40c463",
-      "#30a14e",
-      "#216e39",
-    ]);
 
     const undefinedDays = Array.from({ length: Math.floor(365 / 7) })
       .map((x) => Array.from({ length: 7 }).map((y) => ({ x, y })))
       .flat()
-      .filter(({ x, y }) => cells.some((c) => c.x === x && c.y === y));
+      .filter(({ x, y }) => cells.some((c: any) => c.x === x && c.y === y));
 
     expect(undefinedDays).toEqual([]);
   });

packages/github-user-contribution/index.ts

@@ -39,21 +39,9 @@ export const getGithubUserContribution = async (
   return parseUserPage(resText);
 };
 
-const defaultColorScheme = [
-  "#ebedf0",
-  "#9be9a8",
-  "#40c463",
-  "#30a14e",
-  "#216e39",
-];
-
 const parseUserPage = (content: string) => {
   const $ = cheerio.load(content);
 
-  //
-  // "parse" colorScheme
-  const colorScheme = [...defaultColorScheme];
-
   //
   // parse cells
   const rawCells = $(".js-calendar-graph rect[data-count]")
@@ -63,13 +51,9 @@ const parseUserPage = (content: string) => {
       const count = +x.attribs["data-count"];
       const date = x.attribs["data-date"];
 
-      const color = colorScheme[level];
-
-      if (!color) throw new Error("could not determine the color of the cell");
-
       return {
         svgPosition: getSvgPosition(x),
-        color,
+        level,
         count,
         date,
       };
@@ -95,7 +79,7 @@ const parseUserPage = (content: string) => {
     y: yRange.indexOf(svgPosition.y),
   }));
 
-  return { cells, colorScheme };
+  return cells;
 };
 
 // returns the position of the svg elements, accounting for it's transform and it's parent transform
@@ -126,4 +110,4 @@ const getSvgPosition = (
 
 export type Res = Awaited<ReturnType<typeof getGithubUserContribution>>;
 
-export type Cell = Res["cells"][number];
+export type Cell = Res[number];