Last active
November 20, 2023 21:18
-
-
Save jfbrennan/4ab91a6d87ff41e6cf324675690d53d0 to your computer and use it in GitHub Desktop.
Linear dialog flow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment