study: shared state and refactor

Author: nyaomaru

src/islands/Counter.tsx

@@ -1,15 +1,14 @@
-import { useSignal } from "@preact/signals";
+import { Signal } from "@preact/signals";
 import { ComponentChildren } from "preact";
 import { Button } from "../components/Button.tsx";
 import { Card } from "../components/Card.tsx";
 
 interface Props {
+  count: Signal<number>;
   children: ComponentChildren;
 }
 
-export default function Counter({ children }: Props) {
-  const count = useSignal(0);
-
+export default function Counter({ count, children }: Props) {
   return (
     <Card title="Counter">
       <div class="flex gap-8 items-center justify-center">

src/islands/NextContentButton.tsx

@@ -9,7 +9,7 @@ export default function NextContentButton({ name }: Props) {
 
   return (
     <a
-      class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
+      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 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 bg-white text-black border-2 border-black hover:border-transparent hover:border-transparent hover:text-white hover:bg-black"
       href="/about"
       f-partial={`/partials/about/${id}`}
       onClick={() => (id.value += 1)}

src/routes/_middleware.ts

@@ -35,6 +35,7 @@ export async function handler(
   }
 
   const origin = req.headers.get("Origin") || "*";
+  ctx.state.data = "myData";
   const resp = await ctx.next();
   const headers = resp.headers;
 
@@ -49,7 +50,6 @@ export async function handler(
     `${HTTP_METHOD.POST}, ${HTTP_METHOD.OPTIONS}, ${HTTP_METHOD.GET}, ${HTTP_METHOD.DELETE}, ${HTTP_METHOD.PUT}`,
   );
 
-  ctx.state.data = "myData";
   resp.headers.set("server", "fresh server");
   return resp;
 }

src/routes/index.tsx

@@ -1,4 +1,5 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
+import { useSignal } from "@preact/signals";
 import { Link } from "../components/Link.tsx";
 import Counter from "../islands/Counter.tsx";
 
@@ -12,6 +13,7 @@ export const handler: Handlers<unknown, { data: string }> = {
 
 export default function Home({ data }: PageProps<string>) {
   const name = nameList[Math.floor(Math.random() * 5)];
+  const count = useSignal(0);
 
   return (
     <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
@@ -30,9 +32,9 @@ export default function Home({ data }: PageProps<string>) {
       </div>
 
       <div class="my-4 flex flex-col items-center justify-center">
-        <h2 class="text-2xl font-bold">Counter Test</h2>
+        <h2 class="text-2xl font-bold">Counter</h2>
         <div class="my-4">
-          <Counter>
+          <Counter count={count}>
             <p class="mt-4">This text is rendered on the server</p>
           </Counter>
         </div>

src/routes/search.tsx

@@ -32,7 +32,7 @@ export default function Page({ data }: PageProps<Data>) {
         <div class="mt-4">
           <button
             type="submit"
-            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            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 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 bg-gray-900 text-white"
           >
             Search
           </button>