chore: link click counter

It doesn't quite work, but it doesn't break anything.

Author: lishaduck

.github/workflows/deno.yaml

@@ -62,6 +62,7 @@ jobs:
             _fresh/
             static/
             routes/
+            utils/
             deno.json
             deno.lock
             main.ts

islands/LinkCounter.tsx

@@ -0,0 +1,20 @@
+import type { JSX } from "preact/jsx-runtime";
+import type { ComponentProps } from "preact";
+
+interface Props extends ComponentProps<"a"> {
+}
+
+export default function LinkCounter(props: Props): JSX.Element {
+  return (
+    <a
+      {...props}
+      onClick={async () => {
+        await fetch("/api/links", {
+          method: "post",
+          body: JSON.stringify({ link: props.href }),
+        });
+      }}
+    >
+    </a>
+  );
+}

routes/api/links.tsx

@@ -0,0 +1,23 @@
+import { define } from "../../utils.ts";
+import { db } from "../../utils/db.ts";
+
+export const handler = define.handlers({
+  GET: async (ctx): Promise<Response> => {
+    const { link } = await ctx.req.json();
+
+    const key = ["clicks", link];
+
+    const clicksRes = await db.get<number>(key).catch(() => undefined);
+
+    if (clicksRes !== undefined) {
+      await db.atomic().check(clicksRes).set(
+        key,
+        clicksRes.value! + 1,
+      ).commit();
+    } else {
+      await db.set(key, 1);
+    }
+
+    return new Response();
+  },
+});

routes/index.tsx

@@ -1,29 +1,25 @@
 import { page, type PageResponse } from "fresh";
 import { define } from "../utils.ts";
 import { getCookies, setCookie } from "@std/http/cookie";
-
-const db = await Deno.openKv();
+import { db } from "../utils/db.ts";
 
 const key = ["clicks", "main"];
 
 export const handler = define.handlers({
   GET: async (ctx): Promise<PageResponse<{ clicks: number }>> => {
     const cookie = getCookies(ctx.req.headers)["Clicked"];
 
-    let clicksRes;
-
-    try {
-      clicksRes = await db.get<number>(key);
-    } catch {
-      await db.atomic().set(key, 0).commit();
-      clicksRes = await db.get<number>(key);
-    }
+    const clicksRes = await db.get<number>(key).catch(() => undefined);
 
     if (cookie === undefined) {
-      await db.atomic().check(clicksRes).set(
-        key,
-        clicksRes.value! + 1,
-      ).commit();
+      if (clicksRes !== undefined) {
+        await db.atomic().check(clicksRes).set(
+          key,
+          clicksRes.value! + 1,
+        ).commit();
+      } else {
+        await db.set(key, 1);
+      }
     }
 
     const headers = new Headers();
@@ -33,10 +29,12 @@ export const handler = define.handlers({
     }
 
     return page({
-      clicks: cookie === undefined ? clicksRes.value! + 1 : clicksRes.value!,
-    }, {
-      headers,
-    });
+      clicks: clicksRes === undefined
+        ? 0
+        : cookie === undefined
+        ? clicksRes.value! + 1
+        : clicksRes.value!,
+    }, { headers });
   },
 });
 

routes/insecure.tsx

@@ -1,46 +1,43 @@
 import { page, type PageResponse } from "fresh";
 import { define } from "../utils.ts";
 import { getCookies, setCookie } from "@std/http/cookie";
+import { db } from "../utils/db.ts";
 
-const db = await Deno.openKv();
-
-const key = ["clicks", "insecure"];
+export const key = ["clicks", "insecure"];
 
 export const handler = define.handlers({
   GET: async (ctx): Promise<PageResponse<{ clicks: number }>> => {
     const cookie = getCookies(ctx.req.headers)["Clicked-Insecure"];
 
-    let clicksRes;
-
-    try {
-      clicksRes = await db.get<number>(key);
-    } catch {
-      await db.atomic().set(key, 0).commit();
-      clicksRes = await db.get<number>(key);
-    }
+    const clicksRes = await db.get<number>(key).catch(() => undefined);
 
     if (cookie === undefined) {
-      await db.atomic().check(clicksRes).set(
-        key,
-        clicksRes.value! + 1,
-      ).commit();
+      if (clicksRes !== undefined) {
+        await db.atomic().check(clicksRes).set(
+          key,
+          clicksRes.value! + 1,
+        ).commit();
+      } else {
+        await db.set(key, 1);
+      }
     }
-
     const headers = new Headers();
 
     if (ctx.config.mode === "production") {
       setCookie(headers, {
         name: "Clicked-Insecure",
         value: "true",
-        path: "/",
+        path: "/insecure/",
       });
     }
 
     return page({
-      clicks: cookie === undefined ? clicksRes.value! + 1 : clicksRes.value!,
-    }, {
-      headers,
-    });
+      clicks: clicksRes === undefined
+        ? 0
+        : cookie === undefined
+        ? clicksRes.value! + 1
+        : clicksRes.value!,
+    }, { headers });
   },
 });
 

utils/db.ts

@@ -0,0 +1 @@
+export const db = await Deno.openKv();