Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 2x 2x 2x | import { useState } from "react";
import PropTypes from "prop-types";
import { LogoutSession } from "../../session";
import { setUtagLink } from "./utag-helpers";
import Modal from "../Modal/index";
const useModal = () => {
const [open, setOpen] = useState(false);
const openModal = () => setOpen(true);
const closeModal = () => setOpen(false);
return [open, openModal, closeModal];
};
const HeaderMenuSignOutButton = ({ name }) => {
const [open, openModal, closeModal] = useModal();
const showLogoutWarning = () => {
LogoutSession(window);
};
return (
<>
<button
className="signout-button"
aria-label="Sign out"
onClick={openModal}
data-track-category="TopNav"
data-track-action="click"
data-track-label={name}
>
{name}
</button>
<Modal
useDesignSystem
isOpen={open}
title="Sign out"
onRequestClose={closeModal}
primary={{
title: "Sign me out now",
onClick: () => {
showLogoutWarning();
setUtagLink("button", "click", "Sign me out now");
},
}}
secondary={{
title: "Keep me signed in",
onClick: () => {
closeModal();
setUtagLink("button", "click", "Keep me signed in");
},
}}
>
<p>Are you sure you want to sign out?</p>
</Modal>
</>
);
};
HeaderMenuSignOutButton.propTypes = {
name: PropTypes.string.isRequired,
};
export default HeaderMenuSignOutButton;
|