Merge pull request #12 from nyaomaru/deno-study-8

refactor: refactor

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

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"

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

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

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

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

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

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

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

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

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