-
Notifications
You must be signed in to change notification settings - Fork 0
/
LoginState.tsx
50 lines (42 loc) · 1.3 KB
/
LoginState.tsx
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
import { useOnOutsideMouseDown } from '@oliverflecke/components-react';
import React, { useCallback, useRef, useState } from 'react';
import { User } from 'utils/githubAuth';
import LoginButton from './LoginButton';
import LoginMenu from './LoginMenuProps';
import UserAvatar from './UserAvatarProps';
interface LoginStateProps {
user: User | null;
authorizeUrl: string;
logoutUrl: string;
}
const LoginState: React.FC<LoginStateProps> = ({ user, authorizeUrl, logoutUrl }) =>
user === null ? (
<LoginButton authorizeUrl={authorizeUrl} />
) : (
<LoginDropDownMenu user={user} logoutUrl={logoutUrl} />
);
export default LoginState;
interface LoginDropDownMenuProps {
user: User;
logoutUrl: string;
}
const LoginDropDownMenu: React.FC<LoginDropDownMenuProps> = ({ user, logoutUrl }) => {
const [isOpen, setIsOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useOnOutsideMouseDown(
ref,
useCallback(() => setIsOpen(false), [])
);
console.debug(logoutUrl);
return (
<div ref={ref} className="relative flex items-center space-x-4">
<span className="hidden sm:inline">{user.login}</span>
<div className="group">
<button onClick={() => setIsOpen(x => !x)}>
<UserAvatar user={user} />
</button>
</div>
<LoginMenu isOpen={isOpen} logoutUrl={logoutUrl} />
</div>
);
};