Skip to main content

custom hook - The Facade pattern

By

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;

Labels

Labels:

Popular posts from this blog

useRef in store.subscribe, re-render

By andmap
const Dashboard : React . FC = () => { const store = createStore ( countReducer ) const divRef = useRef < HTMLDivElement >( null ); store . subscribe (() => { const state = store . getState () if ( divRef . current ) divRef . current . innerText = `this is cool, another listener: ${ state . count } ` ; }) return ( ... < button onClick = { () => store . dispatch ({ type : ActionType . INCREMENT }) } > add </ button > < button onClick = { () => store . dispatch ({ type : ActionType . DECREMENT }) } > minus </ button > < div ref = { divRef } > 0 </ div > ... ) } Re-Render: const count = useRef ( 0 ) ; useEffect ( ( ) => { count . current = count . current + 1 ; } ) ; return ( < > < input type = " text " value = { inputValue } onChange = { ( e ) => setInputValue ( e . target . value ) } /...
Read more

setup prettier / eslint for create-react-app typescript

By
1. npm i -D prettier  2. create .prettierrc.json { "trailingComma": "all", "tabWidth": 2, "singleQuote": true, "jsxBracketSameLine": true,    "semi": false } 3. npm i -D eslint-config-prettier 4. in package.json, add this: "eslintConfig": { "extends": [ "react-app", "react-app/jest", "prettier" ] }, 5. install extension in VS Code Prettier extension
Read more

Big-Oh (O) Notation, and sorting in Javascript

By andmap
Asymptotic notations are classified into three types: Worst case time complexity : It is a function defined as a result of a maximum number of steps taken on any instance of size n. It is usually expressed in  Big O notation . Average case time complexity : It is a function defined as a result of the average number of steps taken on any instance of size n. It is usually expressed in  Big theta notation . Best case time complexity : It is a function defined as a result of the minimum number of steps taken on any instance of size n. It is usually expressed in  Big omega notation . Space complexity : It is a function defined as a result of additional memory space needed to carry out the algorithm. It is usually expressed in  Big O notation . Big-Oh (O) notation Big Omega ( Ω ) notation Big Theta ( Θ ) notation Default sort() in JavaScript uses  insertion sort  by  V8 Engine of Chrome  and  Merge sort  by  Mozilla Firefox  and...
Read more