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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { 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;
|