diff options
author | polwex <polwex@sortug.com> | 2025-05-29 16:25:31 +0700 |
---|---|---|
committer | polwex <polwex@sortug.com> | 2025-05-29 16:25:31 +0700 |
commit | a03c92dc82ad527d7da6bbaa3c43000e2e5f0e69 (patch) | |
tree | 9a47cae250d043d31f751c1383bdcbe09d4bc9d8 /src/pages/logintest | |
parent | 7de09570c0d7907424c30f492207e80ff69e4061 (diff) |
better better
Diffstat (limited to 'src/pages/logintest')
-rw-r--r-- | src/pages/logintest/Form.tsx | 53 | ||||
-rw-r--r-- | src/pages/logintest/ServerForm.tsx | 67 | ||||
-rw-r--r-- | src/pages/logintest/funcs.ts | 24 | ||||
-rw-r--r-- | src/pages/logintest/index.tsx | 6 |
4 files changed, 3 insertions, 147 deletions
diff --git a/src/pages/logintest/Form.tsx b/src/pages/logintest/Form.tsx deleted file mode 100644 index a593acb..0000000 --- a/src/pages/logintest/Form.tsx +++ /dev/null @@ -1,53 +0,0 @@ -"use client"; - -import { useFormStatus } from "react-dom"; - -const SubmitButton = () => { - const { pending } = useFormStatus(); - return ( - <> - <button - disabled={pending} - type="submit" - className="hover:bg-slate-50 w-fit rounded-lg bg-white p-2" - > - {pending ? "Pending..." : "Submit"} - </button> - </> - ); -}; - -export const Form = ({ - message, - greet, -}: { - message: Promise<string>; - greet: (formData: FormData) => Promise<void>; -}) => ( - <div style={{ border: "3px blue dashed", margin: "1em", padding: "1em" }}> - <p>{message}</p> - <form action={greet}> - <div className="flex flex-col gap-1 text-left"> - <div> - Name:{" "} - <input - name="name" - required - className="invalid:border-red-500 rounded-sm border px-2 py-1" - /> - </div> - <div> - Email:{" "} - <input - type="email" - name="email" - required - className="invalid:border-red-500 rounded-sm border px-2 py-1" - /> - </div> - <SubmitButton /> - </div> - </form> - <h3>This is a client component.</h3> - </div> -); diff --git a/src/pages/logintest/ServerForm.tsx b/src/pages/logintest/ServerForm.tsx deleted file mode 100644 index 8e629b8..0000000 --- a/src/pages/logintest/ServerForm.tsx +++ /dev/null @@ -1,67 +0,0 @@ -async function submitUserProfile(formData: FormData) { - "use server"; - const name = formData.get("name"); - const age = formData.get("age"); - const favoriteColor = formData.get("favoriteColor"); - const hobby = formData.get("hobby"); - const isSubscribed = formData.get("newsletter") === "on"; - - console.log({ - name, - age, - favoriteColor, - hobby, - isSubscribed, - }); -} - -export const ServerForm = () => { - return ( - <form action={submitUserProfile} className="space-y-4"> - <div style={{ display: "flex", gap: 4, marginBottom: 4 }}> - <label htmlFor="name">Full Name</label> - <input type="text" name="name" id="name" required /> - </div> - - <div style={{ display: "flex", gap: 4, marginBottom: 4 }}> - <label htmlFor="age">Age</label> - <input type="number" name="age" id="age" min="13" max="120" /> - </div> - - <div style={{ display: "flex", gap: 4, marginBottom: 4 }}> - <label htmlFor="favoriteColor">Favorite Color</label> - <select name="favoriteColor" id="favoriteColor"> - <option value="red">Red</option> - <option value="blue">Blue</option> - <option value="green">Green</option> - <option value="purple">Purple</option> - <option value="yellow">Yellow</option> - </select> - </div> - - <div style={{ display: "flex", gap: 4, marginBottom: 4 }}> - <label htmlFor="hobby">Favorite Hobby</label> - <input - type="text" - name="hobby" - id="hobby" - placeholder="e.g. Reading, Gaming, Cooking" - /> - </div> - - <div style={{ display: "flex", gap: 4, marginBottom: 4 }}> - <label> - <input type="checkbox" name="newsletter" /> - Subscribe to newsletter - </label> - </div> - - <button - type="submit" - className="hover:bg-slate-50 w-fit rounded-lg bg-white p-2" - > - Save Profile - </button> - </form> - ); -}; diff --git a/src/pages/logintest/funcs.ts b/src/pages/logintest/funcs.ts deleted file mode 100644 index 4ffd5ef..0000000 --- a/src/pages/logintest/funcs.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { readFile, writeFile } from "node:fs/promises"; -import { unstable_rerenderRoute } from "waku/router/server"; - -export const getMessage = async () => { - const data = await readFile("./message.txt", "utf8"); - return data; -}; - -export const greet = async (formData: FormData) => { - "use server"; - // simulate a slow server response - await new Promise((resolve) => setTimeout(resolve, 1000)); - const currentData = await getMessage(); - await writeFile( - "./message.txt", - currentData + "\n" + formData.get("name") + " from server!", - ); - unstable_rerenderRoute("/"); -}; - -export const increment = async (count: number) => { - "use server"; - return count + 1; -}; diff --git a/src/pages/logintest/index.tsx b/src/pages/logintest/index.tsx index df8bc08..5707c69 100644 --- a/src/pages/logintest/index.tsx +++ b/src/pages/logintest/index.tsx @@ -1,6 +1,6 @@ -import { Form } from "./Form"; -import { getMessage, greet } from "./funcs"; -import { ServerForm } from "./ServerForm"; +import { Form } from "../../components/logintest/Form"; +import { getMessage, greet } from "../../actions/logintest/funcs"; +import { ServerForm } from "../../components/logintest/ServerForm"; export default function HomePage() { return ( |