75 lines
2 KiB
TypeScript
75 lines
2 KiB
TypeScript
|
import type { Route } from "./+types/users.create";
|
||
|
|
import PageTitle from "~/components/ui/PageTitle";
|
||
|
|
import useRoutes from "~/hooks/useRoutes";
|
||
|
|
import { useNavigate } from "react-router";
|
||
|
|
import { useState } from "react";
|
||
|
|
import Alert from "~/components/ui/Alert";
|
||
|
|
import { createUser } from "~/utils/api/usersApi";
|
||
|
|
import { Link } from "react-router";
|
||
|
|
import SolidButton from "~/components/ui/Buttons/SolidButton";
|
||
|
|
|
||
|
|
export function meta({}: Route.MetaArgs) {
|
||
|
|
return [
|
||
|
|
{ title: "Dish Planner - Create User" },
|
||
|
|
{ name: "description", content: "Create a new user" },
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
const CreateUsersPage = () => {
|
||
|
|
const [name, setName] = useState<string>("");
|
||
|
|
const [error, setError] = useState<string>("");
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const routes = useRoutes();
|
||
|
|
|
||
|
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
if (!name.trim()) {
|
||
|
|
setError("Name cannot be empty.");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
createUser(name).then(() => {
|
||
|
|
navigate(routes.user.index());
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full flex flex-col items-center">
|
||
|
|
<PageTitle>Create User</PageTitle>
|
||
|
|
<Link to={routes.user.index()} className="py-2 mr-auto">
|
||
|
|
Back to users
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
<form
|
||
|
|
onSubmit={handleSubmit}
|
||
|
|
className="w-full max-w-sm mt-4 border-secondary border-2 rounded p-4"
|
||
|
|
>
|
||
|
|
{error != "" && (
|
||
|
|
<Alert type="error" className="mt-4">
|
||
|
|
{error}
|
||
|
|
</Alert>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<label htmlFor="name">Name</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder=""
|
||
|
|
name="name"
|
||
|
|
id="name"
|
||
|
|
autoFocus={true}
|
||
|
|
value={name}
|
||
|
|
onChange={(e) => setName(e.target.value)}
|
||
|
|
className="w-full p-2 border rounded bg-primary border-secondary bg-gray-600 text-secondary"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<SolidButton type="submit" className="mt-4">
|
||
|
|
Create
|
||
|
|
</SolidButton>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default CreateUsersPage;
|