Linear dialog flow

linear-dialog-flow.jsx

// A version of https://www.esveo.com/en/blog/O5/ using native dialog API and no extra abstractions.
function App() {
  const [users, setUsers] = useState([
    { id: 1, name: "peter" },
    { id: 2, name: "tony" },
  ]);
  const [userToBeDeleted, setUserToBeDeleted] = useState(null);
  const dialog = useRef();

  function handleDeleteClick(user) {
    setUserToBeDeleted(user);
    dialog.current.showModal();
    dialog.current.addEventListener('close', () => {
      if (dialog.current.returnValue == 'confirm') {
        // Make some API Request to delete
        console.log(user); 
      }
      
      setUserToBeDeleted(null);
    }, {once: true});
  }

  return (
    <div>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name}{" "}
            <button onClick={() => handleDeleteClick(user)}>delete</button>
          </li>
        ))}
      </ul>
      <dialog ref={dialog} aria-label="Confirm user deletion">
        <p>Should the user "{userToBeDeleted?.name}" really be deleted?</p>
        <button onClick={dialog.current.close()}>Close</button>
        <button onClick={dialog.current.close('confirm')}>Confirm</button>
      </dialog>
    </div>
  );
}