122 lines
3.3 KiB
JavaScript
122 lines
3.3 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { useParams, useNavigate, useLocation } from "react-router-dom";
|
|
import { useForm, Controller } from "react-hook-form";
|
|
|
|
const EditUser = () => {
|
|
const { id } = useParams();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [users, setUsers] = useState(location.state?.users || []);
|
|
|
|
const { control, handleSubmit, reset, formState: { errors } } = useForm({
|
|
defaultValues: {
|
|
name: "",
|
|
email: "",
|
|
phone: "",
|
|
website: "",
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (users.length === 0) {
|
|
const fetchUsers = async () => {
|
|
const response = await fetch("https://jsonplaceholder.typicode.com/users");
|
|
const data = await response.json();
|
|
setUsers(data);
|
|
};
|
|
fetchUsers();
|
|
}
|
|
}, [users]);
|
|
|
|
const user = users.find((user) => user.id === parseInt(id));
|
|
|
|
useEffect(() => {
|
|
if (user) {
|
|
reset(user);
|
|
}
|
|
}, [user, reset]);
|
|
|
|
const onSubmit = (data) => {
|
|
let updatedUsers;
|
|
if (id === "new") {
|
|
const newUser = { ...data, id: users.length + 1 };
|
|
updatedUsers = [...users, newUser];
|
|
alert("User added successfully!");
|
|
} else {
|
|
updatedUsers = users.map((u) =>
|
|
u.id === parseInt(id) ? { ...data, id: u.id } : u
|
|
);
|
|
alert("User updated successfully!");
|
|
}
|
|
|
|
setUsers(updatedUsers);
|
|
navigate("/", { state: { users: updatedUsers } });
|
|
};
|
|
|
|
const handleDelete = () => {
|
|
const updatedUsers = users.filter((user) => user.id !== parseInt(id));
|
|
setUsers(updatedUsers);
|
|
alert(`User with ID ${id} deleted.`);
|
|
navigate("/", { state: { users: updatedUsers } });
|
|
};
|
|
|
|
return (
|
|
<div className="form-container">
|
|
<h1>{id === "new" ? "Add" : "Edit"} User</h1>
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<div>
|
|
<label>Name</label>
|
|
<Controller
|
|
name="name"
|
|
control={control}
|
|
rules={{ required: "Name is required" }}
|
|
render={({ field }) => <input {...field} />}
|
|
/>
|
|
{errors.name && <p>{errors.name.message}</p>}
|
|
</div>
|
|
<div>
|
|
<label>Email</label>
|
|
<Controller
|
|
name="email"
|
|
control={control}
|
|
rules={{ required: "Email is required" }}
|
|
render={({ field }) => <input {...field} />}
|
|
/>
|
|
{errors.email && <p>{errors.email.message}</p>}
|
|
</div>
|
|
<div>
|
|
<label>Phone</label>
|
|
<Controller
|
|
name="phone"
|
|
control={control}
|
|
render={({ field }) => <input {...field} />}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label>Website</label>
|
|
<Controller
|
|
name="website"
|
|
control={control}
|
|
render={({ field }) => <input {...field} />}
|
|
/>
|
|
</div>
|
|
<button type="submit" className="submit-button">
|
|
Save
|
|
</button>
|
|
</form>
|
|
<div className="button-container">
|
|
<button className="home-button" onClick={() => navigate("/")}>
|
|
Return to Home
|
|
</button>
|
|
{id !== "new" && (
|
|
<button className="delete-button" onClick={handleDelete}>
|
|
Delete User
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EditUser;
|