function useUsersManagement() {
const [users, setUsers] = useState([]);
function addUser(user) {
setUsers([
...users,
user
])
}
function deleteUser(userId) {
const userIndex = users.findIndex(user => user.id === userId);
if (userIndex > -1) {
const newUsers = [...users];
newUsers.splice(userIndex, 1);
setUsers(
newUsers
);
}
}
return {
users,
addUser,
deleteUser
}
}
function useAddUserModalManagement() {
const [isAddUserModalOpened, setAddUserModalVisibility] = useState(false);
function openAddUserModal() {
setAddUserModalVisibility(true);
}
function closeAddUserModal() {
setAddUserModalVisibility(false);
}
return {
isAddUserModalOpened,
openAddUserModal,
closeAddUserModal
}
}
import React from 'react';
import AddUserModal from './AddUserModal';
import UsersTable from './UsersTable';
import useUsersManagement from "./useUsersManagement";
import useAddUserModalManagement from "./useAddUserModalManagement";
const Users = () => {
const {
users,
addUser,
deleteUser
} = useUsersManagement();
const {
isAddUserModalOpened,
openAddUserModal,
closeAddUserModal
} = useAddUserModalManagement();
return (
<>
<button onClick={openAddUserModal}>Add user</button>
<UsersTable
users={users}
onDelete={deleteUser}
/>
<AddUserModal
isOpened={isAddUserModalOpened}
onClose={closeAddUserModal}
onAddUser={addUser}
/>
</>
)
};
export default Users;