import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import Link from 'next/link'
import styles from './header.module.css'
import { useRouter } from 'next/router'
import Button from 'react-bootstrap/Button'
import Container from 'react-bootstrap/Container'
import NavDropdown from 'react-bootstrap/NavDropdown'
import Price from './price'
import { useMe } from './me'
import Head from 'next/head'
import { signOut } from 'next-auth/client'
import { useCallback, useEffect, useState } from 'react'
import { randInRange } from '../lib/rand'
import { abbrNum } from '../lib/format'
import NoteIcon from '../svgs/notification-4-fill.svg'
import { useQuery } from '@apollo/client'
import LightningIcon from '../svgs/bolt.svg'
import CowboyHat from './cowboy-hat'
import { Select } from './form'
import SearchIcon from '../svgs/search-line.svg'
import BackArrow from '../svgs/arrow-left-line.svg'
import { SUBS } from '../lib/constants'
import { useLightning } from './lightning'
import { HAS_NOTIFICATIONS } from '../fragments/notifications'
function WalletSummary ({ me }) {
if (!me) return null
return `${abbrNum(me.sats)}`
}
function Back () {
const router = useRouter()
const [show, setShow] = useState()
useEffect(() => {
setShow(typeof window !== 'undefined' && router.asPath !== '/' &&
(typeof window.navigation === 'undefined' || window.navigation.canGoBack === undefined || window?.navigation.canGoBack))
}, [router.asPath])
if (show) {
return router.back()}>
}
return null
}
function NotificationBell () {
const { data } = useQuery(HAS_NOTIFICATIONS, {
pollInterval: 30000,
nextFetchPolicy: 'cache-and-network'
})
return (
<>
{data?.hasNewNotes &&
{' '}
}
)
}
function StackerCorner ({ dropNavKey }) {
const me = useMe()
return (
e.preventDefault()}>
{`@${me.name}`}
}
align='end'
>
profile
{me && !me.bioId &&
{' '}
}
bookmarks
wallet
satistics
referrals
settings
signOut({ callbackUrl: '/' })}>logout
{!me.bioId &&
{' '}
}
)
}
function LurkerCorner ({ path }) {
const router = useRouter()
const strike = useLightning()
useEffect(() => {
if (!window.localStorage.getItem('striked')) {
const to = setTimeout(() => {
strike()
window.localStorage.setItem('striked', 'yep')
}, randInRange(3000, 10000))
return () => clearTimeout(to)
}
}, [])
const handleLogin = useCallback(async pathname => await router.push({
pathname,
query: { callbackUrl: window.location.origin + router.asPath }
}), [router])
return path !== '/login' && path !== '/signup' && !path.startsWith('/invites') &&
}
function NavItems ({ className, sub, prefix }) {
const router = useRouter()
sub ||= 'home'
return (
<>
hot
recent
{sub !== 'jobs' &&
top
}
)
}
function PostItem ({ className, prefix }) {
const me = useMe()
if (!me) return null
return (
post
)
}
export default function Header ({ sub }) {
const router = useRouter()
const path = router.asPath.split('?')[0]
const prefix = sub ? `/~${sub}` : ''
const topNavKey = path.split('/')[sub ? 2 : 1] ?? ''
const dropNavKey = path.split('/').slice(sub ? 2 : 1).join('/')
const me = useMe()
return (
)
}
export function HeaderStatic () {
return (
)
}