refactor

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

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`}
     />
   );
 }

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}

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>;

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>;

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`);
   },
 };

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));
   },

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`);