From 03b0e4c6f3da41ce5bf462a95b1fc68f308092e4 Mon Sep 17 00:00:00 2001
From: nyaomaru <nyaonyao0725@gmail.com>
Date: Sun, 11 Aug 2024 10:49:59 +0900
Subject: [PATCH] refactor: refactor

---
 src/components/Card.tsx            |  2 +-
 src/components/Link.tsx            |  6 ++--
 src/islands/Counter.tsx            |  6 ++--
 src/islands/NextContentButton.tsx  | 24 +++++++--------
 src/routes/_500.tsx                |  2 +-
 src/routes/_layout.tsx             | 12 ++++----
 src/routes/_middleware.ts          | 14 ++++-----
 src/routes/api/random-uuid.ts      | 12 ++++----
 src/routes/greet/_middleware.ts    | 12 ++++----
 src/routes/index.tsx               | 48 +++++++++++++++++++-----------
 src/routes/partials/about/[id].tsx | 38 +++++++++++------------
 11 files changed, 95 insertions(+), 81 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index e40b1a9..c4ee85a 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -5,7 +5,7 @@ export function Card(props: JSX.HTMLAttributes<HTMLButtonElement>) {
     <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white border-gray-400 ">
       <div class="px-6 py-4">
         <div class="font-bold text-xl mb-2">{props.title}</div>
-        <div class="mt-4">{props.children}</div>
+        <div>{props.children}</div>
       </div>
     </div>
   );
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index f809af6..406b063 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -1,12 +1,14 @@
+import { JSX } from "preact";
+
 type LinkProps = {
   text: string;
   href: string;
   color?: "primary" | "secondary";
-};
+} & JSX.HTMLAttributes<HTMLAnchorElement>;
 
 export function Link({ color = "primary", ...props }: LinkProps) {
   return (
-    <a class="mx-2" href={props.href}>
+    <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 ${
           color === "primary" ? "bg-gray-900 text-white" : "bg-white text-black"
diff --git a/src/islands/Counter.tsx b/src/islands/Counter.tsx
index 217db3c..6f9d451 100644
--- a/src/islands/Counter.tsx
+++ b/src/islands/Counter.tsx
@@ -11,13 +11,13 @@ export default function Counter({ children }: Props) {
   const count = useSignal(0);
 
   return (
-    <Card title={"Counter"}>
-      <div class="flex gap-8">
+    <Card title="Counter">
+      <div class="flex gap-8 items-center justify-center">
         <Button onClick={() => count.value -= 1}>-</Button>
         <p class="text-3xl tabular-nums">{count}</p>
         <Button onClick={() => (count.value += 1)}>+</Button>
       </div>
-      <div class="mt-4">{children}</div>
+      <div>{children}</div>
     </Card>
   );
 }
diff --git a/src/islands/NextContentButton.tsx b/src/islands/NextContentButton.tsx
index 7ec3525..156c359 100644
--- a/src/islands/NextContentButton.tsx
+++ b/src/islands/NextContentButton.tsx
@@ -1,20 +1,20 @@
 import { useSignal } from "@preact/signals";
 
 interface Props {
-    name: string;
+  name: string;
 }
 
 export default function NextContentButton({ name }: Props) {
-    const id = useSignal(0);
+  const id = useSignal(0);
 
-    return (
-        <a
-            class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
-            href="/about"
-            f-partial={`/partials/about/${id}`}
-            onClick={() => (id.value += 1)}
-        >
-            {name}
-        </a>
-    );
+  return (
+    <a
+      class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
+      href="/about"
+      f-partial={`/partials/about/${id}`}
+      onClick={() => (id.value += 1)}
+    >
+      {name}
+    </a>
+  );
 }
diff --git a/src/routes/_500.tsx b/src/routes/_500.tsx
index 24699d0..544455c 100644
--- a/src/routes/_500.tsx
+++ b/src/routes/_500.tsx
@@ -1,5 +1,5 @@
 import { PageProps } from "$fresh/server.ts";
 
 export default function Error500Page({ error }: PageProps) {
-    return <p>500 internal error: {(error as Error).message}</p>;
+  return <p>500 internal error: {(error as Error).message}</p>;
 }
diff --git a/src/routes/_layout.tsx b/src/routes/_layout.tsx
index 1bfc504..e90f0fa 100644
--- a/src/routes/_layout.tsx
+++ b/src/routes/_layout.tsx
@@ -1,10 +1,10 @@
 import { PageProps } from "$fresh/server.ts";
 
 export default function Layout({ Component, state }: PageProps) {
-    // do something with state here
-    return (
-        <div class="px-4 py-8 mx-auto bg-cyan-300 h-screen">
-            <Component />
-        </div>
-    );
+  // do something with state here
+  return (
+    <div class="px-4 py-8 mx-auto bg-cyan-300 h-screen">
+      <Component />
+    </div>
+  );
 }
diff --git a/src/routes/_middleware.ts b/src/routes/_middleware.ts
index a05765c..d26be09 100644
--- a/src/routes/_middleware.ts
+++ b/src/routes/_middleware.ts
@@ -1,15 +1,15 @@
 import { FreshContext } from "$fresh/server.ts";
 
 interface State {
-    data: string;
+  data: string;
 }
 
 export async function handler(
-    _req: Request,
-    ctx: FreshContext<State>,
+  _req: Request,
+  ctx: FreshContext<State>,
 ) {
-    ctx.state.data = "myData";
-    const resp = await ctx.next();
-    resp.headers.set("server", "fresh server");
-    return resp;
+  ctx.state.data = "myData";
+  const resp = await ctx.next();
+  resp.headers.set("server", "fresh server");
+  return resp;
 }
diff --git a/src/routes/api/random-uuid.ts b/src/routes/api/random-uuid.ts
index d28d2e3..4785eae 100644
--- a/src/routes/api/random-uuid.ts
+++ b/src/routes/api/random-uuid.ts
@@ -1,10 +1,10 @@
 import { Handlers } from "$fresh/server.ts";
 
 export const handler: Handlers = {
-    GET(_req) {
-        const uuid = crypto.randomUUID();
-        return new Response(JSON.stringify(uuid), {
-            headers: { "Content-Type": "application/json" },
-        });
-    },
+  GET(_req) {
+    const uuid = crypto.randomUUID();
+    return new Response(JSON.stringify(uuid), {
+      headers: { "Content-Type": "application/json" },
+    });
+  },
 };
diff --git a/src/routes/greet/_middleware.ts b/src/routes/greet/_middleware.ts
index 1bbe6e0..077cc57 100644
--- a/src/routes/greet/_middleware.ts
+++ b/src/routes/greet/_middleware.ts
@@ -1,10 +1,10 @@
 import { FreshContext } from "$fresh/server.ts";
 
 export async function handler(_req: Request, ctx: FreshContext) {
-    const currentName = ctx.params.name;
-    if (currentName === "Bob") {
-        ctx.params.name = "super-bob";
-    }
-    const resp = await ctx.next();
-    return resp;
+  const currentName = ctx.params.name;
+  if (currentName === "Bob") {
+    ctx.params.name = "super-bob";
+  }
+  const resp = await ctx.next();
+  return resp;
 }
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index a74195e..99b9084 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -22,25 +22,37 @@ export default function Home({ data }: PageProps<string>) {
         height="128"
         alt="the Fresh logo: a sliced lemon dripping with juice"
       />
-      <h1 class="text-4xl font-bold">Nyaomaru Deno Sample</h1>
-      <p class="my-4">
-        I am a cat being!!
-      </p>
-      <Counter>
-        <p>This text is rendered on the server</p>
-      </Counter>
-      <div class="my-4">
-        <Link text="Go About Page" href="about" />
-        <Link text="Go Greet Page" href={`greet/${name}`} />
-        <Link text="Go Search Page" href="search" />
-        <Link text="Go Countdown Page" href="countdown" />
+      <div class="my-4 flex flex-col items-center justify-center">
+        <h1 class="text-4xl font-bold">Nyaomaru Deno Sample</h1>
+        <p class="my-4">
+          I am a cat being!!
+        </p>
       </div>
-      <div class="my-4">
-        <Link
-          text="Go Projects Page"
-          href={`projects/${Math.round(Math.random()) + 1}`}
-        />
-        <Link text="Go Chart Page" href="chart" />
+
+      <div class="my-4 flex flex-col items-center justify-center">
+        <h2 class="text-2xl font-bold">Counter Test</h2>
+        <div class="my-4">
+          <Counter>
+            <p class="mt-4">This text is rendered on the server</p>
+          </Counter>
+        </div>
+      </div>
+
+      <div class="my-4 flex flex-col items-center justify-center">
+        <h2 class="text-2xl font-bold">Page Buttons</h2>
+        <div class="my-4 flex gap-4">
+          <Link text="Go About Page" href="about" />
+          <Link text="Go Greet Page" href={`greet/${name}`} />
+          <Link text="Go Search Page" href="search" />
+          <Link text="Go Countdown Page" href="countdown" />
+        </div>
+        <div class="my-4 flex gap-4">
+          <Link
+            text="Go Projects Page"
+            href={`projects/${Math.round(Math.random()) + 1}`}
+          />
+          <Link text="Go Chart Page" href="chart" />
+        </div>
       </div>
 
       <p class="my-4">
diff --git a/src/routes/partials/about/[id].tsx b/src/routes/partials/about/[id].tsx
index df7bbba..cbd10d9 100644
--- a/src/routes/partials/about/[id].tsx
+++ b/src/routes/partials/about/[id].tsx
@@ -2,34 +2,34 @@ import { defineRoute, RouteConfig } from "$fresh/server.ts";
 import { Partial } from "$fresh/runtime.ts";
 
 const contents = [
-    "This is the documentation page. It should contain all the \n information you need to get started with the project.",
-    "bla bla bla",
+  "This is the documentation page. It should contain all the \n information you need to get started with the project.",
+  "bla bla bla",
 ];
 
 const loadContent = async (id: string) => {
-    const currentContent = contents[Number(id) % 2];
+  const currentContent = contents[Number(id) % 2];
 
-    return (
-        <article class="prose lg:prose-xl">
-            <h1>Documentation: {id}</h1>
-            <p>
-                {currentContent}
-            </p>
-        </article>
-    );
+  return (
+    <article class="prose lg:prose-xl">
+      <h1>Documentation: {id}</h1>
+      <p>
+        {currentContent}
+      </p>
+    </article>
+  );
 };
 
 export const config: RouteConfig = {
-    skipAppWrapper: true,
-    skipInheritedLayouts: true,
+  skipAppWrapper: true,
+  skipInheritedLayouts: true,
 };
 
 export default defineRoute(async (req, ctx) => {
-    const content = await loadContent(ctx.params.id);
+  const content = await loadContent(ctx.params.id);
 
-    return (
-        <Partial name="about-content">
-            {content}
-        </Partial>
-    );
+  return (
+    <Partial name="about-content">
+      {content}
+    </Partial>
+  );
 });