sigit.io/src/components/AppBar/AppBar.tsx

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'
import { appPublicRoutes } from '../../routes'
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)
  }

  const handleLogout = () => {
    dispatch(
      setAuthState({
        loggedIn: false,
        loginMethod: undefined
      })
    )

    navigate('/')
  }
  const isAuthenticated = authState?.loggedIn === true

  return (
    <AppBarMui position='fixed' className={styles.AppBar}>
      <Toolbar>
        <Box
          className={
            isAuthenticated ? styles.AppBarLogoWrapper : styles.AppBarUnAuth
          }
        >
          <div className={styles.logoWrapper}>
            <img src={nostrichLogo} alt='Logo' onClick={() => navigate('/')} />
          </div>

          {!isAuthenticated && (
            <Box>
              <Button
                onClick={() => {
                  navigate(appPublicRoutes.login)
                }}
                variant='contained'
              >
                Sign in
              </Button>
            </Box>
          )}
        </Box>

        {authState?.loggedIn && (
          <div
            style={{
              display: 'flex',
              justifyContent: 'flex-end'
            }}
          >
            <Username
              username={username}
              avatarContent={userAvatar}
              handleClick={handleOpenUserMenu}
            />
            <Menu
              id='menu-appbar'
              anchorEl={anchorElUser}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'center'
              }}
              keepMounted
              transformOrigin={{
                vertical: 'top',
                horizontal: 'center'
              }}
              open={!!anchorElUser}
              onClose={handleCloseUserMenu}
            >
              <MenuItem
                sx={{
                  justifyContent: 'center',
                  display: { md: 'none', paddingBottom: 0, marginBottom: -10 }
                }}
              >
                <Typography variant='h5'>{username}</Typography>
              </MenuItem>
              <Link
                to={appPublicRoutes.help}
                target='_blank'
                style={{ color: 'inherit', textDecoration: 'inherit' }}
              >
                <MenuItem
                  sx={{
                    justifyContent: 'center',
                    borderTop: '0.5px solid var(--mui-palette-text-secondary)'
                  }}
                >
                  Help
                </MenuItem>
              </Link>
              <MenuItem
                onClick={handleLogout}
                sx={{
                  justifyContent: 'center',
                  borderTop: '0.5px solid var(--mui-palette-text-secondary)'
                }}
              >
                Logout
              </MenuItem>
            </Menu>
          </div>
        )}
      </Toolbar>
    </AppBarMui>
  )
}