THE FACADE PATTERN - useHooks

https://wanago.io/2019/12/09/javascript-design-patterns-facade-react-hooks/

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;