summaryrefslogtreecommitdiff
path: root/src/pages/logintest
diff options
context:
space:
mode:
authorpolwex <polwex@sortug.com>2025-05-29 16:25:31 +0700
committerpolwex <polwex@sortug.com>2025-05-29 16:25:31 +0700
commita03c92dc82ad527d7da6bbaa3c43000e2e5f0e69 (patch)
tree9a47cae250d043d31f751c1383bdcbe09d4bc9d8 /src/pages/logintest
parent7de09570c0d7907424c30f492207e80ff69e4061 (diff)
better better
Diffstat (limited to 'src/pages/logintest')
-rw-r--r--src/pages/logintest/Form.tsx53
-rw-r--r--src/pages/logintest/ServerForm.tsx67
-rw-r--r--src/pages/logintest/funcs.ts24
-rw-r--r--src/pages/logintest/index.tsx6
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 (