first commit
This commit is contained in:
Jeannette Chin committed
commit
5d6023a8af
52 files changed
+5830
No files matched your search
@@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
|
||||
import { useActionState, JSX } from "react";
|
||||
import { addUserAction, FormState } from "../actions/UserActionsZod";
|
||||
import SubmitButton from "./SubmitButton";
|
||||
|
||||
const initialState: FormState = {
|
||||
success: false,
|
||||
message: "",
|
||||
};
|
||||
|
||||
export default function AddUserForm(): JSX.Element {
|
||||
// useActionState receives (action, initialState)
|
||||
const [state, formAction] = useActionState(addUserAction, initialState);
|
||||
|
||||
return (
|
||||
<div className="card bg-base-100 shadow border border-base-300">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title text-lg">
|
||||
Add New User using Zod Validation
|
||||
</h2>
|
||||
|
||||
{/* Global Success / Failure Alerts */}
|
||||
{state.message && (
|
||||
<div
|
||||
className={`alert ${state.success ? "alert-success" : "alert-error"} text-sm py-2`}
|
||||
>
|
||||
<span>{state.message}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form action={formAction} className="space-y-4 mt-2">
|
||||
{/* Name Input */}
|
||||
<div className="form-control">
|
||||
<label className="label label-text font-medium">Name</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Jane Doe"
|
||||
className={`input input-bordered w-full ${state.errors?.name ? "input-error" : ""}`}
|
||||
/>
|
||||
{state.errors?.name && (
|
||||
<span className="text-xs text-error mt-1">
|
||||
{state.errors.name[0]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email Input */}
|
||||
<div className="form-control">
|
||||
<label className="label label-text font-medium">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="jane@example.com"
|
||||
className={`input input-bordered w-full ${state.errors?.email ? "input-error" : ""}`}
|
||||
/>
|
||||
{state.errors?.email && (
|
||||
<span className="text-xs text-error mt-1">
|
||||
{state.errors.email[0]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Password Input */}
|
||||
<div className="form-control">
|
||||
<label className="label label-text font-medium">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
name="pass"
|
||||
placeholder="••••••••"
|
||||
className={`input input-bordered w-full ${state.errors?.pass ? "input-error" : ""}`}
|
||||
/>
|
||||
{state.errors?.pass && (
|
||||
<span className="text-xs text-error mt-1">
|
||||
{state.errors.pass[0]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Submit Button with Loading Spinner */}
|
||||
<div className="flex justify-end pt-2">
|
||||
<SubmitButton label="Create Account" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
|
||||
import { JSX } from "react";
|
||||
import { useFormStatus } from "react-dom";
|
||||
|
||||
export default function SubmitButton({
|
||||
label = "Add User",
|
||||
}: {
|
||||
label?: string;
|
||||
}): JSX.Element {
|
||||
const { pending } = useFormStatus();
|
||||
|
||||
return (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={pending}
|
||||
className="btn btn-primary w-full md:w-auto"
|
||||
>
|
||||
{pending ? (
|
||||
<>
|
||||
<span className="loading loading-spinner loading-xs"></span>
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
label
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
import { JSX } from "react";
|
||||
import { getUsers, addUser, editUser, removeUser } from "../actions/UserAction";
|
||||
import AddUserForm from "./AddUserForm";
|
||||
|
||||
export default async function UsersPage(): Promise<JSX.Element> {
|
||||
const users = await getUsers();
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-base-200 p-8 flex flex-col items-center">
|
||||
<div className="max-w-4xl w-full space-y-6">
|
||||
<h1 className="text-3xl font-bold">PostgreSQL User Management</h1>
|
||||
|
||||
{/* add user form using zod validation */}
|
||||
<AddUserForm />
|
||||
|
||||
{/* --- ADD USER FORM --- */}
|
||||
<div className="card bg-base-100 shadow border border-base-300">
|
||||
<div className="card-body">
|
||||
<h2 className="card-title text-lg">Add New User</h2>
|
||||
|
||||
{/* Form using Server Action */}
|
||||
<form
|
||||
action={async (formData: FormData) => {
|
||||
"use server";
|
||||
const name = formData.get("name") as string;
|
||||
const email = formData.get("email") as string;
|
||||
const pass = formData.get("pass") as string;
|
||||
|
||||
if (name && email && pass) {
|
||||
await addUser({ name, email, pass });
|
||||
}
|
||||
}}
|
||||
className="grid grid-cols-1 md:grid-cols-4 gap-3 items-end mt-2"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Name"
|
||||
className="input input-bordered input-sm w-full"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
className="input input-bordered input-sm w-full"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
name="pass"
|
||||
placeholder="Password"
|
||||
className="input input-bordered input-sm w-full"
|
||||
required
|
||||
/>
|
||||
<button type="submit" className="btn btn-primary btn-sm">
|
||||
Add User
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* --- USER TABLE --- */}
|
||||
<div className="card bg-base-100 shadow border border-base-300">
|
||||
<div className="card-body p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table table-zebra w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Password</th>
|
||||
<th className="text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => (
|
||||
<tr key={user.id}>
|
||||
<td className="font-mono">{user.id}</td>
|
||||
<td>{user.name}</td>
|
||||
<td>{user.email}</td>
|
||||
<td className="font-mono text-xs opacity-60">
|
||||
{user.password}
|
||||
</td>
|
||||
<td className="text-right flex justify-end gap-2">
|
||||
{/* EDIT BUTTON (QUICK NAME UPDATE) */}
|
||||
<form
|
||||
action={async () => {
|
||||
"use server";
|
||||
await editUser(user.id, {
|
||||
name: `${user.name} (Edited)`,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-xs btn-outline btn-warning"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* DELETE BUTTON */}
|
||||
<form
|
||||
action={async () => {
|
||||
"use server";
|
||||
await removeUser(user.id);
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-xs btn-outline btn-error"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
||||
{users.length === 0 && (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={5}
|
||||
className="text-center py-4 text-base-content/60"
|
||||
>
|
||||
No users found in database. Add one above!
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user