2024-02-28 16:49:44 +00:00
|
|
|
import {
|
|
|
|
AppBar as AppBarMui,
|
|
|
|
Box,
|
|
|
|
Button,
|
|
|
|
Menu,
|
|
|
|
MenuItem,
|
|
|
|
Toolbar,
|
|
|
|
Typography
|
|
|
|
} from '@mui/material'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
|
|
import { setAuthState } from '../../store/actions'
|
|
|
|
import { State } from '../../store/rootReducer'
|
|
|
|
import { Dispatch } from '../../store/store'
|
|
|
|
import Username from '../username'
|
|
|
|
|
|
|
|
import { Link, useNavigate } from 'react-router-dom'
|
|
|
|
import nostrichAvatar from '../../assets/images/avatar.png'
|
|
|
|
import nostrichLogo from '../../assets/images/nostr-logo.jpg'
|
2024-03-01 10:16:35 +00:00
|
|
|
import { appPublicRoutes, getProfileRoute } from '../../routes'
|
2024-02-28 16:49:44 +00:00
|
|
|
import { shorten } from '../../utils'
|
|
|
|
import styles from './style.module.scss'
|
|
|
|
|
|
|
|
export const AppBar = () => {
|
|
|
|
const navigate = useNavigate()
|
|
|
|
const dispatch: Dispatch = useDispatch()
|
|
|
|
|
|
|
|
const [username, setUsername] = useState('')
|
|
|
|
const [userAvatar, setUserAvatar] = useState(nostrichAvatar)
|
|
|
|
const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null)
|
|
|
|
|
|
|
|
const authState = useSelector((state: State) => state.auth)
|
|
|
|
const metadataState = useSelector((state: State) => state.metadata)
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (metadataState && metadataState.content) {
|
|
|
|
const { picture, display_name, name } = JSON.parse(metadataState.content)
|
|
|
|
|
|
|
|
if (picture) setUserAvatar(picture)
|
|
|
|
|
|
|
|
setUsername(shorten(display_name || name || '', 7))
|
|
|
|
}
|
|
|
|
}, [metadataState])
|
|
|
|
|
|
|
|
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
|
|
|
|
setAnchorElUser(event.currentTarget)
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleCloseUserMenu = () => {
|
|
|
|
setAnchorElUser(null)
|
|
|
|
}
|
|
|
|
|
2024-03-01 10:16:35 +00:00
|
|
|
const handleProfile = () => {
|
|
|
|
const hexKey = authState?.usersPubkey
|
|
|
|
if (hexKey) navigate(getProfileRoute(hexKey))
|
|
|
|
|
|
|
|
setAnchorElUser(null)
|
|
|
|
}
|
|
|
|
|
2024-02-28 16:49:44 +00:00
|
|
|
const handleLogout = () => {
|
|
|
|
dispatch(
|
|
|
|
setAuthState({
|
|
|
|
loggedIn: false,
|
2024-03-01 10:16:35 +00:00
|
|
|
usersPubkey: undefined,
|
2024-02-28 16:49:44 +00:00
|
|
|
loginMethod: undefined
|
|
|
|
})
|
|
|
|
)
|
|
|
|
|
|
|
|
navigate('/')
|
|
|
|
}
|
|
|
|
const isAuthenticated = authState?.loggedIn === true
|
|
|
|
|
|
|
|
return (
|
|
|
|
<AppBarMui position='fixed' className={styles.AppBar}>
|
2024-02-29 07:05:05 +00:00
|
|
|
<Toolbar className={styles.toolbar}>
|
|
|
|
<Box className={styles.logoWrapper}>
|
|
|
|
<img src={nostrichLogo} alt='Logo' onClick={() => navigate('/')} />
|
2024-02-28 16:49:44 +00:00
|
|
|
</Box>
|
|
|
|
|
2024-02-29 07:05:05 +00:00
|
|
|
<Box className={styles.rightSideBox}>
|
|
|
|
{!isAuthenticated && (
|
|
|
|
<Button
|
|
|
|
onClick={() => {
|
|
|
|
navigate(appPublicRoutes.login)
|
2024-02-28 16:49:44 +00:00
|
|
|
}}
|
2024-02-29 07:05:05 +00:00
|
|
|
variant='contained'
|
2024-02-28 16:49:44 +00:00
|
|
|
>
|
2024-02-29 07:05:05 +00:00
|
|
|
Sign in
|
|
|
|
</Button>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{isAuthenticated && (
|
|
|
|
<>
|
|
|
|
<Username
|
|
|
|
username={username}
|
|
|
|
avatarContent={userAvatar}
|
|
|
|
handleClick={handleOpenUserMenu}
|
|
|
|
/>
|
|
|
|
<Menu
|
|
|
|
id='menu-appbar'
|
|
|
|
anchorEl={anchorElUser}
|
|
|
|
anchorOrigin={{
|
|
|
|
vertical: 'bottom',
|
|
|
|
horizontal: 'center'
|
2024-02-28 16:49:44 +00:00
|
|
|
}}
|
2024-02-29 07:05:05 +00:00
|
|
|
keepMounted
|
|
|
|
transformOrigin={{
|
|
|
|
vertical: 'top',
|
|
|
|
horizontal: 'center'
|
|
|
|
}}
|
|
|
|
open={!!anchorElUser}
|
|
|
|
onClose={handleCloseUserMenu}
|
2024-02-28 16:49:44 +00:00
|
|
|
>
|
|
|
|
<MenuItem
|
2024-02-29 07:05:05 +00:00
|
|
|
sx={{
|
|
|
|
justifyContent: 'center',
|
2024-03-05 09:08:18 +00:00
|
|
|
display: { md: 'none' }
|
2024-02-29 07:05:05 +00:00
|
|
|
}}
|
|
|
|
>
|
2024-03-05 09:08:18 +00:00
|
|
|
<Typography variant='h6'>{username}</Typography>
|
|
|
|
</MenuItem>
|
|
|
|
<MenuItem
|
|
|
|
onClick={handleProfile}
|
|
|
|
sx={{
|
|
|
|
justifyContent: 'center'
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
Profile
|
2024-02-29 07:05:05 +00:00
|
|
|
</MenuItem>
|
|
|
|
<Link
|
|
|
|
to={appPublicRoutes.help}
|
|
|
|
target='_blank'
|
|
|
|
style={{ color: 'inherit', textDecoration: 'inherit' }}
|
|
|
|
>
|
|
|
|
<MenuItem
|
|
|
|
sx={{
|
2024-03-05 09:08:18 +00:00
|
|
|
justifyContent: 'center'
|
2024-02-29 07:05:05 +00:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
Help
|
|
|
|
</MenuItem>
|
|
|
|
</Link>
|
|
|
|
<MenuItem
|
|
|
|
onClick={handleLogout}
|
2024-02-28 16:49:44 +00:00
|
|
|
sx={{
|
2024-03-05 09:08:18 +00:00
|
|
|
justifyContent: 'center'
|
2024-02-28 16:49:44 +00:00
|
|
|
}}
|
|
|
|
>
|
2024-02-29 07:05:05 +00:00
|
|
|
Logout
|
2024-02-28 16:49:44 +00:00
|
|
|
</MenuItem>
|
2024-02-29 07:05:05 +00:00
|
|
|
</Menu>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</Box>
|
2024-02-28 16:49:44 +00:00
|
|
|
</Toolbar>
|
|
|
|
</AppBarMui>
|
|
|
|
)
|
|
|
|
}
|