141 lines
4.9 KiB
TypeScript
141 lines
4.9 KiB
TypeScript
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>
|
|
);
|
|
}
|