From 6e70e14a40b5a8874afeafa3401dd69c91f9062c Mon Sep 17 00:00:00 2001
From: nyaomaru <nyaonyao0725@gmail.com>
Date: Sat, 21 Sep 2024 09:15:05 +0900
Subject: [PATCH] refactor

---
 README.md                         |  2 ++
 csp-reports.txt                   | 43 -------------------------------
 src/components/Button.tsx         |  4 +--
 src/components/Link.tsx           |  4 +--
 src/islands/Countdown.tsx         |  2 +-
 src/providers/LeafletProvider.tsx |  2 --
 src/routes/api/users/[id].ts      | 20 +++++++-------
 src/routes/api/users/index.ts     |  5 ++--
 src/utils/api.ts                  | 10 +++++++
 9 files changed, 30 insertions(+), 62 deletions(-)
 delete mode 100644 csp-reports.txt
 create mode 100644 src/utils/api.ts

diff --git a/README.md b/README.md
index 0436523..992e21c 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 This project is deno with 🍋fresh🍋 sample project
 
+[![Made with Fresh](https://fresh.deno.dev/fresh-badge-dark.svg)](https://fresh.deno.dev)
+
 ## 🚀 Get started
 
 You run below command
diff --git a/csp-reports.txt b/csp-reports.txt
deleted file mode 100644
index 2ba2d67..0000000
--- a/csp-reports.txt
+++ /dev/null
@@ -1,43 +0,0 @@
-{
-  "csp-report": {
-    "document-uri": "http://localhost:8000/correctCSPwithReport",
-    "referrer": "http://localhost:8000/",
-    "violated-directive": "style-src-elem",
-    "effective-directive": "style-src-elem",
-    "original-policy": "default-src 'none'; style-src 'unsafe-inline' http://www.example.com; report-uri http://localhost:8000/reportHandler; script-src 'nonce-71d90af6c22f47f3b28399209fdd8dc5'; connect-src 'self'",
-    "disposition": "report",
-    "blocked-uri": "http://localhost:8000/example.css",
-    "line-number": 1,
-    "source-file": "http://localhost:8000/correctCSPwithReport",
-    "status-code": 200,
-    "script-sample": ""
-  }
-}
-{
-  "csp-report": {
-    "document-uri": "http://localhost:8000/correctCSPwithReport",
-    "referrer": "http://localhost:8000/",
-    "violated-directive": "style-src-elem",
-    "effective-directive": "style-src-elem",
-    "original-policy": "default-src 'none'; style-src 'unsafe-inline' http://www.example.com; report-uri http://localhost:8000/reportHandler; script-src 'nonce-71d90af6c22f47f3b28399209fdd8dc5'; connect-src 'self'",
-    "disposition": "report",
-    "blocked-uri": "http://localhost:8000/styles.css",
-    "line-number": 1,
-    "source-file": "http://localhost:8000/correctCSPwithReport",
-    "status-code": 200,
-    "script-sample": ""
-  }
-}
-{
-  "csp-report": {
-    "document-uri": "http://localhost:8000/correctCSPwithReport",
-    "referrer": "http://localhost:8000/",
-    "violated-directive": "img-src",
-    "effective-directive": "img-src",
-    "original-policy": "default-src 'none'; style-src 'unsafe-inline' http://www.example.com; report-uri http://localhost:8000/reportHandler; script-src 'nonce-71d90af6c22f47f3b28399209fdd8dc5'; connect-src 'self'",
-    "disposition": "report",
-    "blocked-uri": "http://localhost:8000/favicon.ico",
-    "status-code": 200,
-    "script-sample": ""
-  }
-}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 27a4d24..ea519aa 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -12,11 +12,11 @@ export function Button(
     <button
       {...props}
       disabled={!IS_BROWSER || props.disabled}
-      class={`px-2 py-1 border-2 rounded ${
+      class={`${
         color === "primary"
           ? "bg-black text-white hover:text-black"
           : "bg-white border-gray-500"
-      } hover:bg-gray-200 transition-colors`}
+      } px-2 py-1 border-2 rounded hover:bg-gray-200 transition-colors`}
     />
   );
 }
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 406b063..bffc566 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -10,9 +10,9 @@ export function Link({ color = "primary", ...props }: LinkProps) {
   return (
     <a {...props} href={props.href}>
       <span
-        class={`align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg ${
+        class={`${
           color === "primary" ? "bg-gray-900 text-white" : "bg-white text-black"
-        } shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none`}
+        } align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none`}
         type="button"
       >
         {props.text}
diff --git a/src/islands/Countdown.tsx b/src/islands/Countdown.tsx
index 44bda0d..97fd68a 100644
--- a/src/islands/Countdown.tsx
+++ b/src/islands/Countdown.tsx
@@ -22,7 +22,7 @@ export default function Countdown(props: { target: string }) {
   );
 
   if (secondsLeft <= 0) {
-    return <span>🎉</span>;
+    return <span>🎉You are wonderful!!🎉</span>;
   }
 
   return <span>{timeFmt.format(secondsLeft, "seconds")}</span>;
diff --git a/src/providers/LeafletProvider.tsx b/src/providers/LeafletProvider.tsx
index 10b4836..f49763f 100644
--- a/src/providers/LeafletProvider.tsx
+++ b/src/providers/LeafletProvider.tsx
@@ -3,10 +3,8 @@ import { IS_BROWSER } from "$fresh/runtime.ts";
 import { useState } from "preact/hooks";
 import { ComponentChildren, createContext } from "preact";
 
-// Create a context to hold Leaflet data/functions
 export const LeafletContext = createContext<typeof Leaflet | null>(null);
 
-// LeafletProvider component manages Leaflet loading and context
 export function LeafletProvider(props: { children: ComponentChildren }) {
   if (!IS_BROWSER) {
     return <p>Leaflet must be loaded on the client. No children will render</p>;
diff --git a/src/routes/api/users/[id].ts b/src/routes/api/users/[id].ts
index 333d0e8..8ff9dbf 100644
--- a/src/routes/api/users/[id].ts
+++ b/src/routes/api/users/[id].ts
@@ -1,39 +1,39 @@
 import { Handlers } from "$fresh/server.ts";
 import { kv } from "#src/services/database.ts";
 import type { User } from "#src/shared/api.ts";
+import { getUserKey, handleUserNotFound, statusCheck } from "#src/utils/api.ts";
 
 export const handler: Handlers<User | null> = {
   async GET(_req, ctx) {
     const id = ctx.params.id;
-    const key = ["user", id];
-    const user = (await kv.get<User>(key)).value!;
-    return new Response(JSON.stringify(user));
+    const user = (await kv.get<User>(getUserKey(id))).value;
+    return user ? new Response(JSON.stringify(user)) : handleUserNotFound(id);
   },
 
   async PUT(req, ctx) {
     const id = ctx.params.id;
     const user = (await req.json()) as User;
-    const userKey = ["user", id];
+    const userKey = getUserKey(id);
 
     const userRes = await kv.get(userKey);
-    if (!userRes.value) return new Response(`no user with id ${id} found`);
+    if (!userRes.value) return handleUserNotFound(id);
 
     const ok = await kv.atomic().check(userRes).set(userKey, user).commit();
-    if (!ok) throw new Error("Something went wrong.");
+    statusCheck(ok);
 
     return new Response(JSON.stringify(user));
   },
 
   async DELETE(_req, ctx) {
     const id = ctx.params.id;
-    const userKey = ["user", id];
+    const userKey = getUserKey(id);
 
     const userRes = await kv.get(userKey);
-    if (!userRes.value) return new Response(`no user with id ${id} found`);
+    if (!userRes.value) return handleUserNotFound(id);
 
     const ok = await kv.atomic().check(userRes).delete(userKey).commit();
-    if (!ok) throw new Error("Something went wrong.");
+    statusCheck(ok);
 
-    return new Response(`user ${id} deleted`);
+    return new Response(`User ${id} deleted`);
   },
 };
diff --git a/src/routes/api/users/index.ts b/src/routes/api/users/index.ts
index eaa7203..614fd28 100644
--- a/src/routes/api/users/index.ts
+++ b/src/routes/api/users/index.ts
@@ -1,14 +1,15 @@
 import { Handlers } from "$fresh/server.ts";
 import { kv } from "#src/services/database.ts";
 import type { User } from "#src/shared/api.ts";
+import { getUserKey, statusCheck } from "#src/utils/api.ts";
 
 export const handler: Handlers<User | null> = {
   async POST(req, _ctx) {
     const user = (await req.json()) as User;
-    const userKey = ["user", user.id];
+    const userKey = getUserKey(user.id);
 
     const ok = await kv.atomic().set(userKey, user).commit();
-    if (!ok) throw new Error("Something went wrong.");
+    statusCheck(ok);
 
     return new Response(JSON.stringify(user));
   },
diff --git a/src/utils/api.ts b/src/utils/api.ts
new file mode 100644
index 0000000..7615fc0
--- /dev/null
+++ b/src/utils/api.ts
@@ -0,0 +1,10 @@
+export const statusCheck = (
+  status: Deno.KvCommitResult | Deno.KvCommitError,
+) => {
+  if (!status) throw new Error("Something went wrong.");
+};
+
+export const getUserKey = (id: string) => ["user", id];
+
+export const handleUserNotFound = (id: string) =>
+  new Response(`No user with id ${id} found`);