jam-cloud/jam-ui/src/components/navbar/JKProfileDropdown.js

//import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useState } from 'react';
import { DropdownItem, DropdownMenu, DropdownToggle, Dropdown } from 'reactstrap';
import { useAuth } from '../../context/UserAuth';
import JKProfileAvatar from '../profile/JKProfileAvatar';
import { useCookies } from 'react-cookie';

const ProfileDropdown = () => {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const toggle = () => setDropdownOpen(prevState => !prevState);
  const { currentUser, setCurrentUser, logout } = useAuth();
 
  const [cookies, setCookie, removeCookie] = useCookies(['remember_token']);

  const handleLogout = async (event) => {
    event.preventDefault();
    removeCookie('remember_token', {
      domain: `.${process.env.REACT_APP_ORIGIN}`
    });
    setCurrentUser(null);
    logout()
  };

  return (
    <>
    {currentUser && 
      <Dropdown
        nav
        inNavbar
        data-testid="navbarTopProfileDropdown"
        isOpen={dropdownOpen}
        toggle={toggle}
        onMouseOver={() => {
          let windowWidth = window.innerWidth;
          windowWidth > 992 && setDropdownOpen(true);
        }}
        onMouseLeave={() => {
          let windowWidth = window.innerWidth;
          windowWidth > 992 && setDropdownOpen(false);
        }}
      >
        <DropdownToggle nav className="pr-0">
          <JKProfileAvatar url={currentUser.photo_url} className="d-block d-lg-none d-xl-none" />
          <span className="d-none d-lg-block">{currentUser && currentUser.name}</span>
        </DropdownToggle>
        <DropdownMenu right className="dropdown-menu-card">
          <div className="bg-white rounded-soft py-2">
            {/* <DropdownItem tag={Link} to="/pages/settings">
              My Profile
            </DropdownItem> */}
            <DropdownItem onClick={handleLogout}>Sign out</DropdownItem>
          </div>
        </DropdownMenu>
      </Dropdown>
      }
    </>
  );
};

export default ProfileDropdown;