117 lines
3.3 KiB
JavaScript
117 lines
3.3 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import axios from "axios";
|
|
|
|
const UserList = ({ users, setUsers }) => {
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const usersPerPage = 5; // Number of users to display per page
|
|
|
|
useEffect(() => {
|
|
if (users.length === 0) {
|
|
axios
|
|
.get("https://jsonplaceholder.typicode.com/users")
|
|
.then((response) => setUsers(response.data))
|
|
.catch((error) => console.error("Error fetching users:", error));
|
|
}
|
|
}, [users, setUsers]);
|
|
|
|
const handleDelete = (id) => {
|
|
setUsers(users.filter((user) => user.id !== id));
|
|
alert(`User with ID ${id} deleted.`);
|
|
};
|
|
|
|
const filteredUsers = users.filter(
|
|
(user) =>
|
|
user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
user.email.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
// Calculate pagination details
|
|
const indexOfLastUser = currentPage * usersPerPage;
|
|
const indexOfFirstUser = indexOfLastUser - usersPerPage;
|
|
const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser);
|
|
const totalPages = Math.ceil(filteredUsers.length / usersPerPage);
|
|
|
|
const handlePageChange = (pageNumber) => {
|
|
setCurrentPage(pageNumber);
|
|
};
|
|
|
|
return (
|
|
<div className="container">
|
|
<h1>User List</h1>
|
|
|
|
<div className="search-container">
|
|
<input
|
|
type="text"
|
|
placeholder="Search by name or email..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="search-input"
|
|
/>
|
|
<button className="search-button">Search</button>
|
|
</div>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
<th>Phone</th>
|
|
<th>Website</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{currentUsers.map((user) => (
|
|
<tr key={user.id}>
|
|
<td>{user.id}</td>
|
|
<td>{user.name}</td>
|
|
<td>{user.email}</td>
|
|
<td>{user.phone}</td>
|
|
<td>{user.website}</td>
|
|
<td>
|
|
<Link to={`/user/${user.id}`} className="view-button">
|
|
View
|
|
</Link>
|
|
<Link to={`/edit/${user.id}`} className="edit-button">
|
|
Edit
|
|
</Link>
|
|
<button
|
|
onClick={() => handleDelete(user.id)}
|
|
className="delete-button"
|
|
>
|
|
Delete
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
<div className="pagination-container">
|
|
{Array.from({ length: totalPages }, (_, index) => (
|
|
<button
|
|
key={index}
|
|
className={`pagination-button ${
|
|
currentPage === index + 1 ? "active" : ""
|
|
}`}
|
|
onClick={() => handlePageChange(index + 1)}
|
|
>
|
|
{index + 1}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div>
|
|
<Link to="/edit/new" className="add-new-button">
|
|
Add New User
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserList;
|