-
Notifications
You must be signed in to change notification settings - Fork 1
/
ProfileButton.js
63 lines (62 loc) · 1.82 KB
/
ProfileButton.js
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
import React, { useState, useEffect, useRef } from "react";
import { useDispatch } from "react-redux";
import { logout } from "../store/session";
import { useNavigate } from "react-router-dom";
import "../SCSS/navigation.css";
function ProfileButton({ user }) {
const [showMenu, setShowMenu] = useState(false);
const ulRef = useRef();
const navigate= useNavigate();
const dispatch = useDispatch();
const openMenu = () => {
if (showMenu) return;
setShowMenu(true);
};
useEffect(() => {
if (!showMenu) return;
const closeMenu = (e) => {
if (!ulRef.current.contains(e.target)) {
setShowMenu(false);
}
};
document.addEventListener("click", closeMenu);
return () => document.removeEventListener("click", closeMenu);
}, [showMenu]);
const handleLogout = (e) => {
e.preventDefault();
dispatch(logout())
.then(() => {
navigate("/");
closeMenu();
})
};
const navUserProfile = (e) => {
e.preventDefault();
navigate('/profile')
}
const ulClassName = "profile-dropdown" + (showMenu ? "" : " hidden");
const closeMenu = () => setShowMenu(false);
return (
<>
<button onClick={openMenu} className="user-profile-dropdown-button">
{/* {user.username} */}
<img
className="profile-button-picture"
src="icons/profile-button.png"
alt="profile button"
/>
</button>
<ul className={ulClassName} ref={ulRef}>
<>
<div className="user-dropdown-menu">
<button className="drop-down-profile-settings" onClick={navUserProfile}>Profile Settings</button>
<button onClick={handleLogout} className="drop-down-sign-out">
Sign Out
</button>
</div>
</>
</ul>
</>
);
}
export default ProfileButton;