2021-04-12 18:05:09 +00:00
|
|
|
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'
|
2021-12-05 17:37:55 +00:00
|
|
|
import { Button, Container, NavDropdown } from 'react-bootstrap'
|
2021-04-28 19:30:14 +00:00
|
|
|
import Price from './price'
|
2021-05-25 00:08:56 +00:00
|
|
|
import { useMe } from './me'
|
2021-07-08 19:52:11 +00:00
|
|
|
import Head from 'next/head'
|
2023-01-10 00:33:44 +00:00
|
|
|
import { signOut } from 'next-auth/client'
|
2021-07-16 16:47:18 +00:00
|
|
|
import { useLightning } from './lightning'
|
2021-10-21 22:05:06 +00:00
|
|
|
import { useEffect, useState } from 'react'
|
2021-07-16 16:47:18 +00:00
|
|
|
import { randInRange } from '../lib/rand'
|
2022-10-25 21:35:32 +00:00
|
|
|
import { abbrNum } from '../lib/format'
|
2022-04-19 21:37:05 +00:00
|
|
|
import NoteIcon from '../svgs/notification-4-fill.svg'
|
2022-05-09 17:30:27 +00:00
|
|
|
import { useQuery, gql } from '@apollo/client'
|
2022-09-27 21:27:29 +00:00
|
|
|
import LightningIcon from '../svgs/bolt.svg'
|
2023-02-01 14:44:35 +00:00
|
|
|
import CowboyHat from './cowboy-hat'
|
2023-05-01 20:58:30 +00:00
|
|
|
import { Form, Select } from './form'
|
|
|
|
|
import SearchIcon from '../svgs/search-line.svg'
|
2021-11-12 22:39:52 +00:00
|
|
|
|
2021-06-24 23:56:01 +00:00
|
|
|
function WalletSummary ({ me }) {
|
2021-11-12 22:39:52 +00:00
|
|
|
if (!me) return null
|
|
|
|
|
|
2022-10-25 21:35:32 +00:00
|
|
|
return `${abbrNum(me.sats)}`
|
2021-05-11 15:52:50 +00:00
|
|
|
}
|
2021-03-25 19:29:24 +00:00
|
|
|
|
2022-02-17 17:23:43 +00:00
|
|
|
export default function Header ({ sub }) {
|
2021-04-12 18:05:09 +00:00
|
|
|
const router = useRouter()
|
2021-12-06 16:32:58 +00:00
|
|
|
const [fired, setFired] = useState()
|
2023-05-01 20:58:30 +00:00
|
|
|
const [topNavKey, setTopNavKey] = useState('')
|
|
|
|
|
const [dropNavKey, setDropNavKey] = useState('')
|
|
|
|
|
const [prefix, setPrefix] = useState('')
|
|
|
|
|
const [path, setPath] = useState('')
|
2021-06-24 23:56:01 +00:00
|
|
|
const me = useMe()
|
2023-05-01 20:58:30 +00:00
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// there's always at least 2 on the split, e.g. '/' yields ['','']
|
|
|
|
|
const path = router.asPath.split('?')[0]
|
|
|
|
|
setPrefix(sub ? `/~${sub}` : '')
|
|
|
|
|
setTopNavKey(path.split('/')[sub ? 2 : 1] ?? '')
|
|
|
|
|
setDropNavKey(path.split('/').slice(sub ? 2 : 1).join('/'))
|
|
|
|
|
setPath(path)
|
|
|
|
|
}, [sub, router.asPath])
|
|
|
|
|
|
|
|
|
|
// const { data: subLatestPost } = useQuery(gql`
|
|
|
|
|
// query subLatestPost($name: ID!) {
|
|
|
|
|
// subLatestPost(name: $name)
|
|
|
|
|
// }
|
|
|
|
|
// `, { variables: { name: 'jobs' }, pollInterval: 600000, fetchPolicy: 'network-only' })
|
2022-11-07 23:31:29 +00:00
|
|
|
const { data: hasNewNotes } = useQuery(gql`
|
|
|
|
|
{
|
|
|
|
|
hasNewNotes
|
|
|
|
|
}
|
|
|
|
|
`, { pollInterval: 30000, fetchPolicy: 'cache-and-network' })
|
2023-05-01 20:58:30 +00:00
|
|
|
// const [lastCheckedJobs, setLastCheckedJobs] = useState(new Date().getTime())
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// if (me) {
|
|
|
|
|
// setLastCheckedJobs(me.lastCheckedJobs)
|
|
|
|
|
// } else {
|
|
|
|
|
// if (sub === 'jobs') {
|
|
|
|
|
// localStorage.setItem('lastCheckedJobs', new Date().getTime())
|
|
|
|
|
// }
|
|
|
|
|
// setLastCheckedJobs(localStorage.getItem('lastCheckedJobs'))
|
|
|
|
|
// }
|
|
|
|
|
// }, [sub])
|
2021-10-21 22:05:06 +00:00
|
|
|
|
2021-04-12 18:05:09 +00:00
|
|
|
const Corner = () => {
|
2021-09-24 23:51:07 +00:00
|
|
|
if (me) {
|
2021-04-12 18:05:09 +00:00
|
|
|
return (
|
2023-05-03 00:22:23 +00:00
|
|
|
<div className='d-flex align-items-center ml-auto'>
|
2021-08-17 23:59:22 +00:00
|
|
|
<Head>
|
2022-11-07 23:31:29 +00:00
|
|
|
<link rel='shortcut icon' href={hasNewNotes?.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} />
|
2021-08-17 23:59:22 +00:00
|
|
|
</Head>
|
2022-04-19 21:37:05 +00:00
|
|
|
<Link href='/notifications' passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<Nav.Link eventKey='notifications' className='pl-0 position-relative'>
|
2023-05-01 20:58:30 +00:00
|
|
|
<NoteIcon height={22} width={22} className='theme' />
|
2022-11-07 23:31:29 +00:00
|
|
|
{hasNewNotes?.hasNewNotes &&
|
2022-04-19 21:37:05 +00:00
|
|
|
<span className={styles.notification}>
|
|
|
|
|
<span className='invisible'>{' '}</span>
|
|
|
|
|
</span>}
|
|
|
|
|
</Nav.Link>
|
|
|
|
|
</Link>
|
2021-11-12 22:39:52 +00:00
|
|
|
<div className='position-relative'>
|
2022-05-24 21:15:51 +00:00
|
|
|
<NavDropdown
|
|
|
|
|
className={styles.dropdown} title={
|
2023-05-01 20:58:30 +00:00
|
|
|
<Nav.Link eventKey={me?.name} as='span' className='p-0 d-flex align-items-center' onClick={e => e.preventDefault()}>
|
2023-05-01 21:49:47 +00:00
|
|
|
{`@${me?.name}`}<CowboyHat user={me} />
|
2023-05-01 20:58:30 +00:00
|
|
|
</Nav.Link>
|
2022-05-24 21:15:51 +00:00
|
|
|
} alignRight
|
|
|
|
|
>
|
2021-09-24 23:43:30 +00:00
|
|
|
<Link href={'/' + me?.name} passHref>
|
2023-02-16 22:23:59 +00:00
|
|
|
<NavDropdown.Item active={me?.name === dropNavKey}>
|
2021-09-24 21:56:51 +00:00
|
|
|
profile
|
2022-04-28 18:11:05 +00:00
|
|
|
{me && !me.bioId &&
|
2021-09-24 21:56:51 +00:00
|
|
|
<div className='p-1 d-inline-block bg-secondary ml-1'>
|
|
|
|
|
<span className='invisible'>{' '}</span>
|
|
|
|
|
</div>}
|
|
|
|
|
</NavDropdown.Item>
|
2021-06-24 23:56:01 +00:00
|
|
|
</Link>
|
2023-02-16 22:23:59 +00:00
|
|
|
<Link href={'/' + me?.name + '/bookmarks'} passHref>
|
|
|
|
|
<NavDropdown.Item active={me?.name + '/bookmarks' === dropNavKey}>bookmarks</NavDropdown.Item>
|
|
|
|
|
</Link>
|
2021-06-24 23:56:01 +00:00
|
|
|
<Link href='/wallet' passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<NavDropdown.Item eventKey='wallet'>wallet</NavDropdown.Item>
|
2021-06-24 23:56:01 +00:00
|
|
|
</Link>
|
2022-04-19 21:37:05 +00:00
|
|
|
<Link href='/satistics?inc=invoice,withdrawal,stacked,spent' passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<NavDropdown.Item eventKey='satistics'>satistics</NavDropdown.Item>
|
2022-04-19 21:37:05 +00:00
|
|
|
</Link>
|
2021-10-14 21:05:37 +00:00
|
|
|
<NavDropdown.Divider />
|
2022-12-19 22:27:52 +00:00
|
|
|
<Link href='/referrals/month' passHref>
|
|
|
|
|
<NavDropdown.Item eventKey='referrals'>referrals</NavDropdown.Item>
|
2021-10-14 21:05:37 +00:00
|
|
|
</Link>
|
2021-05-06 21:15:22 +00:00
|
|
|
<NavDropdown.Divider />
|
2021-11-04 18:22:03 +00:00
|
|
|
<div className='d-flex align-items-center'>
|
|
|
|
|
<Link href='/settings' passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<NavDropdown.Item eventKey='settings'>settings</NavDropdown.Item>
|
2021-11-04 18:22:03 +00:00
|
|
|
</Link>
|
|
|
|
|
</div>
|
2021-10-30 16:20:11 +00:00
|
|
|
<NavDropdown.Divider />
|
2021-12-20 22:34:26 +00:00
|
|
|
<NavDropdown.Item onClick={() => signOut({ callbackUrl: '/' })}>logout</NavDropdown.Item>
|
2021-06-24 23:56:01 +00:00
|
|
|
</NavDropdown>
|
2022-04-28 18:11:05 +00:00
|
|
|
{me && !me.bioId &&
|
2022-04-19 21:37:05 +00:00
|
|
|
<span className='position-absolute p-1 bg-secondary' style={{ top: '5px', right: '0px' }}>
|
2021-09-24 21:56:51 +00:00
|
|
|
<span className='invisible'>{' '}</span>
|
|
|
|
|
</span>}
|
2021-06-24 23:56:01 +00:00
|
|
|
</div>
|
|
|
|
|
{me &&
|
|
|
|
|
<Nav.Item>
|
|
|
|
|
<Link href='/wallet' passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<Nav.Link eventKey='wallet' className='text-success px-0 text-nowrap'><WalletSummary me={me} /></Nav.Link>
|
2021-05-06 21:15:22 +00:00
|
|
|
</Link>
|
2021-06-24 23:56:01 +00:00
|
|
|
</Nav.Item>}
|
2021-05-05 18:13:14 +00:00
|
|
|
</div>
|
2021-04-12 18:05:09 +00:00
|
|
|
)
|
|
|
|
|
} else {
|
2021-12-06 16:32:58 +00:00
|
|
|
if (!fired) {
|
|
|
|
|
const strike = useLightning()
|
|
|
|
|
useEffect(() => {
|
2022-10-26 16:45:16 +00:00
|
|
|
let isMounted = true
|
|
|
|
|
if (!localStorage.getItem('striked')) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
if (isMounted) {
|
|
|
|
|
strike()
|
|
|
|
|
localStorage.setItem('striked', 'yep')
|
|
|
|
|
setFired(true)
|
|
|
|
|
}
|
|
|
|
|
}, randInRange(3000, 10000))
|
|
|
|
|
}
|
|
|
|
|
return () => { isMounted = false }
|
|
|
|
|
}, [])
|
2021-12-06 16:32:58 +00:00
|
|
|
}
|
2023-01-10 00:33:44 +00:00
|
|
|
return path !== '/login' && path !== '/signup' && !path.startsWith('/invites') &&
|
2023-05-03 00:22:23 +00:00
|
|
|
<div className='ml-auto'>
|
2023-01-10 00:33:44 +00:00
|
|
|
<Button
|
|
|
|
|
className='align-items-center px-3 py-1 mr-2'
|
|
|
|
|
id='signup'
|
|
|
|
|
style={{ borderWidth: '2px' }}
|
|
|
|
|
variant='outline-grey-darkmode'
|
|
|
|
|
onClick={async () => await router.push({ pathname: '/login', query: { callbackUrl: window.location.origin + router.asPath } })}
|
|
|
|
|
>
|
|
|
|
|
login
|
|
|
|
|
</Button>
|
|
|
|
|
<Button
|
|
|
|
|
className='align-items-center pl-2 py-1 pr-3'
|
|
|
|
|
style={{ borderWidth: '2px' }}
|
|
|
|
|
id='login'
|
|
|
|
|
onClick={async () => await router.push({ pathname: '/signup', query: { callbackUrl: window.location.origin + router.asPath } })}
|
|
|
|
|
>
|
|
|
|
|
<LightningIcon
|
|
|
|
|
width={17}
|
|
|
|
|
height={17}
|
|
|
|
|
className='mr-1'
|
|
|
|
|
/>sign up
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
2021-04-12 18:05:09 +00:00
|
|
|
}
|
2021-03-25 19:29:24 +00:00
|
|
|
}
|
|
|
|
|
|
2023-05-01 20:58:30 +00:00
|
|
|
// const showJobIndicator = sub !== 'jobs' && (!me || me.noteJobIndicator) &&
|
|
|
|
|
// (!lastCheckedJobs || lastCheckedJobs < subLatestPost?.subLatestPost)
|
2022-09-02 16:53:44 +00:00
|
|
|
|
2022-05-09 17:30:27 +00:00
|
|
|
const NavItems = ({ className }) => {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
2023-05-01 20:58:30 +00:00
|
|
|
<Nav.Item className={className}>
|
|
|
|
|
<Form
|
|
|
|
|
initial={{
|
|
|
|
|
sub: sub || 'home'
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Select
|
|
|
|
|
groupClassName='mb-0'
|
|
|
|
|
onChange={(formik, e) => router.push(e.target.value === 'home' ? '/' : `/~${e.target.value}`)}
|
|
|
|
|
name='sub'
|
|
|
|
|
size='sm'
|
|
|
|
|
items={['home', 'bitcoin', 'nostr', 'jobs']}
|
|
|
|
|
/>
|
|
|
|
|
</Form>
|
|
|
|
|
</Nav.Item>
|
|
|
|
|
<Nav.Item className={className}>
|
|
|
|
|
<Link href={prefix + '/'} passHref>
|
|
|
|
|
<Nav.Link eventKey='' className={styles.navLink}>hot</Nav.Link>
|
|
|
|
|
</Link>
|
|
|
|
|
</Nav.Item>
|
2022-05-09 17:30:27 +00:00
|
|
|
<Nav.Item className={className}>
|
|
|
|
|
<Link href={prefix + '/recent'} passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<Nav.Link eventKey='recent' className={styles.navLink}>recent</Nav.Link>
|
2022-05-09 17:30:27 +00:00
|
|
|
</Link>
|
|
|
|
|
</Nav.Item>
|
|
|
|
|
{!prefix &&
|
|
|
|
|
<Nav.Item className={className}>
|
2023-02-03 19:10:18 +00:00
|
|
|
<Link href='/top/posts/day' passHref>
|
2022-08-23 22:34:51 +00:00
|
|
|
<Nav.Link eventKey='top' className={styles.navLink}>top</Nav.Link>
|
2022-05-09 17:30:27 +00:00
|
|
|
</Link>
|
|
|
|
|
</Nav.Item>}
|
2023-05-01 20:58:30 +00:00
|
|
|
{/* <Nav.Item className={className}>
|
2022-05-09 17:30:27 +00:00
|
|
|
<div className='position-relative'>
|
|
|
|
|
<Link href='/~jobs' passHref>
|
|
|
|
|
<Nav.Link active={sub === 'jobs'} className={styles.navLink}>
|
|
|
|
|
jobs
|
|
|
|
|
</Nav.Link>
|
|
|
|
|
</Link>
|
2022-09-02 16:53:44 +00:00
|
|
|
{showJobIndicator &&
|
2022-05-09 17:30:27 +00:00
|
|
|
<span className={styles.jobIndicator}>
|
|
|
|
|
<span className='invisible'>{' '}</span>
|
|
|
|
|
</span>}
|
|
|
|
|
</div>
|
2023-05-01 20:58:30 +00:00
|
|
|
</Nav.Item> */}
|
|
|
|
|
{/* <Nav.Item className={`text-monospace nav-link mx-auto px-0 ${me?.name.length > 6 ? 'd-none d-lg-flex' : ''}`}>
|
|
|
|
|
<Price />
|
|
|
|
|
</Nav.Item> */}
|
2022-05-09 17:30:27 +00:00
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-01 20:58:30 +00:00
|
|
|
const PostItem = ({ className }) => {
|
|
|
|
|
return me
|
|
|
|
|
? (
|
|
|
|
|
<Nav.Link eventKey='post' className={`${className}`}>
|
|
|
|
|
<Link href={prefix + '/post'} passHref>
|
|
|
|
|
<button className='btn btn-md btn-primary px-3 py-1'>post</button>
|
|
|
|
|
</Link>
|
|
|
|
|
</Nav.Link>)
|
|
|
|
|
: null
|
|
|
|
|
}
|
|
|
|
|
|
2021-03-25 19:29:24 +00:00
|
|
|
return (
|
2021-04-12 18:05:09 +00:00
|
|
|
<>
|
2023-05-01 20:58:30 +00:00
|
|
|
<Container className='px-0'>
|
|
|
|
|
<Navbar className='pb-0 pb-md-2'>
|
2021-10-07 03:20:59 +00:00
|
|
|
<Nav
|
|
|
|
|
className={styles.navbarNav}
|
2022-08-23 22:34:51 +00:00
|
|
|
activeKey={topNavKey}
|
2021-10-07 03:20:59 +00:00
|
|
|
>
|
2023-05-01 20:58:30 +00:00
|
|
|
<div className='d-flex align-items-center'>
|
2022-02-17 17:23:43 +00:00
|
|
|
<Link href='/' passHref>
|
2023-05-01 20:58:30 +00:00
|
|
|
<Navbar.Brand className={`${styles.brand} d-flex`}>
|
2022-02-17 17:23:43 +00:00
|
|
|
SN
|
|
|
|
|
</Navbar.Brand>
|
|
|
|
|
</Link>
|
|
|
|
|
</div>
|
2023-05-01 20:58:30 +00:00
|
|
|
<NavItems className='d-none d-md-flex mx-2' />
|
|
|
|
|
<PostItem className='d-none d-md-flex mx-2' />
|
|
|
|
|
<Link href='/search' passHref>
|
2023-05-02 16:55:10 +00:00
|
|
|
<Nav.Link eventKey='search' className='position-relative d-none d-md-flex align-items-center pr-0 ml-2'>
|
2023-05-01 20:58:30 +00:00
|
|
|
<SearchIcon className='theme' width={22} height={22} />
|
|
|
|
|
</Nav.Link>
|
|
|
|
|
</Link>
|
2023-05-03 00:22:23 +00:00
|
|
|
<Nav.Item className={`${styles.price} ml-auto align-items-center ${me?.name.length > 10 ? 'd-none d-lg-flex' : ''}`}>
|
2023-05-01 20:58:30 +00:00
|
|
|
<Price className='nav-link text-monospace' />
|
2021-04-28 19:30:14 +00:00
|
|
|
</Nav.Item>
|
2021-11-28 17:29:17 +00:00
|
|
|
<Corner />
|
2021-04-14 00:57:32 +00:00
|
|
|
</Nav>
|
2021-11-09 22:43:56 +00:00
|
|
|
</Navbar>
|
2023-05-01 20:58:30 +00:00
|
|
|
<Navbar className='pt-0 pb-2 d-md-none'>
|
2022-03-08 20:51:06 +00:00
|
|
|
<Nav
|
2023-05-01 20:58:30 +00:00
|
|
|
className={`${styles.navbarNav}`}
|
2022-08-23 22:34:51 +00:00
|
|
|
activeKey={topNavKey}
|
2022-03-08 20:51:06 +00:00
|
|
|
>
|
2023-05-01 20:58:30 +00:00
|
|
|
<NavItems className='mr-1' />
|
|
|
|
|
<Link href='/search' passHref>
|
|
|
|
|
<Nav.Link eventKey='search' className='position-relative ml-auto d-flex mr-1'>
|
|
|
|
|
<SearchIcon className='theme' width={22} height={22} />
|
|
|
|
|
</Nav.Link>
|
|
|
|
|
</Link>
|
|
|
|
|
<PostItem className='mr-0 pr-0' />
|
2022-03-08 20:51:06 +00:00
|
|
|
</Nav>
|
|
|
|
|
</Navbar>
|
2021-04-28 16:30:02 +00:00
|
|
|
</Container>
|
2021-04-12 18:05:09 +00:00
|
|
|
</>
|
2021-03-25 19:29:24 +00:00
|
|
|
)
|
|
|
|
|
}
|
2022-05-18 20:55:06 +00:00
|
|
|
|
|
|
|
|
export function HeaderStatic () {
|
|
|
|
|
return (
|
|
|
|
|
<Container className='px-sm-0'>
|
|
|
|
|
<Navbar className='pb-0 pb-md-1'>
|
|
|
|
|
<Nav
|
|
|
|
|
className={styles.navbarNav}
|
|
|
|
|
>
|
2023-05-01 20:58:30 +00:00
|
|
|
<div className='d-flex align-items-center'>
|
2022-05-18 20:55:06 +00:00
|
|
|
<Link href='/' passHref>
|
2023-05-01 20:58:30 +00:00
|
|
|
<Navbar.Brand className={`${styles.brand}`}>
|
2022-05-18 20:55:06 +00:00
|
|
|
SN
|
|
|
|
|
</Navbar.Brand>
|
|
|
|
|
</Link>
|
2023-05-01 20:58:30 +00:00
|
|
|
|
|
|
|
|
<Link href='/search' passHref>
|
|
|
|
|
<Nav.Link eventKey='search' className='position-relative d-flex align-items-center mx-2'>
|
|
|
|
|
<SearchIcon className='theme' width={22} height={22} />
|
|
|
|
|
</Nav.Link>
|
|
|
|
|
</Link>
|
2022-05-18 20:55:06 +00:00
|
|
|
</div>
|
|
|
|
|
</Nav>
|
|
|
|
|
</Navbar>
|
|
|
|
|
</Container>
|
|
|
|
|
)
|
|
|
|
|
}
|
