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-05-05 18:13:14 +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'
|
2021-09-24 23:04:59 +00:00
|
|
|
import { signOut, signIn, useSession } from 'next-auth/client'
|
2021-07-16 16:47:18 +00:00
|
|
|
import { useLightning } from './lightning'
|
|
|
|
import { useEffect } from 'react'
|
|
|
|
import { randInRange } from '../lib/rand'
|
2021-05-11 15:52:50 +00:00
|
|
|
|
2021-06-24 23:56:01 +00:00
|
|
|
function WalletSummary ({ me }) {
|
2021-09-24 23:43:30 +00:00
|
|
|
return `${me?.sats} \\ ${me?.stacked}`
|
2021-05-11 15:52:50 +00:00
|
|
|
}
|
2021-03-25 19:29:24 +00:00
|
|
|
|
2021-09-06 22:36:08 +00:00
|
|
|
function RefreshableLink ({ href, children, ...props }) {
|
|
|
|
const router = useRouter()
|
|
|
|
const same = router.asPath === href
|
|
|
|
return (
|
|
|
|
<Link href={same ? `${href}?key=${Math.random()}` : href} as={href} {...props}>
|
|
|
|
{children}
|
|
|
|
</Link>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2021-03-25 19:29:24 +00:00
|
|
|
export default function Header () {
|
2021-04-12 18:05:09 +00:00
|
|
|
const router = useRouter()
|
2021-05-05 18:13:14 +00:00
|
|
|
const path = router.asPath.split('?')[0]
|
2021-06-24 23:56:01 +00:00
|
|
|
const me = useMe()
|
2021-09-24 23:14:35 +00:00
|
|
|
const [session, loading] = useSession()
|
2021-03-25 19:29:24 +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 (
|
2021-05-05 18:13:14 +00:00
|
|
|
<div className='d-flex align-items-center'>
|
2021-08-17 23:59:22 +00:00
|
|
|
<Head>
|
2021-09-24 21:56:51 +00:00
|
|
|
<link rel='shortcut icon' href={me?.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} />
|
2021-08-17 23:59:22 +00:00
|
|
|
</Head>
|
2021-08-18 16:49:59 +00:00
|
|
|
<div className='position-relative mr-1'>
|
2021-09-24 23:43:30 +00:00
|
|
|
<NavDropdown className='px-0' title={`@${me?.name}`} alignRight>
|
|
|
|
<Link href={'/' + me?.name} passHref>
|
2021-09-24 21:56:51 +00:00
|
|
|
<NavDropdown.Item>
|
|
|
|
profile
|
|
|
|
{me && !me.bio &&
|
|
|
|
<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>
|
2021-09-06 22:36:08 +00:00
|
|
|
<RefreshableLink href='/notifications' passHref>
|
|
|
|
<NavDropdown.Item>
|
2021-06-24 23:56:01 +00:00
|
|
|
notifications
|
2021-09-24 21:56:51 +00:00
|
|
|
{me?.hasNewNotes &&
|
2021-07-08 19:52:11 +00:00
|
|
|
<div className='p-1 d-inline-block bg-danger ml-1'>
|
2021-06-24 23:56:01 +00:00
|
|
|
<span className='invisible'>{' '}</span>
|
|
|
|
</div>}
|
|
|
|
</NavDropdown.Item>
|
2021-09-06 22:36:08 +00:00
|
|
|
</RefreshableLink>
|
2021-06-24 23:56:01 +00:00
|
|
|
<Link href='/wallet' passHref>
|
|
|
|
<NavDropdown.Item>wallet</NavDropdown.Item>
|
|
|
|
</Link>
|
|
|
|
<div>
|
|
|
|
<NavDropdown.Divider />
|
2021-09-06 22:36:08 +00:00
|
|
|
<RefreshableLink href='/recent' passHref>
|
2021-06-24 23:56:01 +00:00
|
|
|
<NavDropdown.Item>recent</NavDropdown.Item>
|
2021-09-06 22:36:08 +00:00
|
|
|
</RefreshableLink>
|
2021-09-24 21:56:51 +00:00
|
|
|
{me
|
2021-06-24 23:56:01 +00:00
|
|
|
? (
|
|
|
|
<Link href='/post' passHref>
|
|
|
|
<NavDropdown.Item>post</NavDropdown.Item>
|
|
|
|
</Link>
|
|
|
|
)
|
|
|
|
: <NavDropdown.Item onClick={signIn}>post</NavDropdown.Item>}
|
|
|
|
<NavDropdown.Item href='https://bitcoinerjobs.co' target='_blank'>jobs</NavDropdown.Item>
|
|
|
|
</div>
|
2021-05-06 21:15:22 +00:00
|
|
|
<NavDropdown.Divider />
|
2021-06-24 23:56:01 +00:00
|
|
|
<NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>
|
|
|
|
</NavDropdown>
|
2021-09-24 21:56:51 +00:00
|
|
|
{me?.hasNewNotes &&
|
2021-07-08 19:52:11 +00:00
|
|
|
<span className='position-absolute p-1 bg-danger' style={{ top: '5px', right: '0px' }}>
|
2021-06-24 23:56:01 +00:00
|
|
|
<span className='invisible'>{' '}</span>
|
|
|
|
</span>}
|
2021-09-24 21:56:51 +00:00
|
|
|
{me && !me.bio &&
|
|
|
|
<span className='position-absolute p-1 bg-secondary' style={{ bottom: '5px', right: '0px' }}>
|
|
|
|
<span className='invisible'>{' '}</span>
|
|
|
|
</span>}
|
2021-06-24 23:56:01 +00:00
|
|
|
</div>
|
|
|
|
{me &&
|
|
|
|
<Nav.Item>
|
|
|
|
<Link href='/wallet' passHref>
|
2021-08-19 20:34:33 +00:00
|
|
|
<Nav.Link 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-09-24 23:51:07 +00:00
|
|
|
if (loading || session) {
|
|
|
|
return null
|
|
|
|
}
|
2021-07-16 16:47:18 +00:00
|
|
|
const strike = useLightning()
|
|
|
|
useEffect(() => {
|
|
|
|
setTimeout(strike, randInRange(3000, 10000))
|
2021-07-16 17:32:54 +00:00
|
|
|
}, [router.asPath])
|
2021-07-16 07:23:29 +00:00
|
|
|
return path !== '/login' && <Button id='login' onClick={signIn}>login</Button>
|
2021-04-12 18:05:09 +00:00
|
|
|
}
|
2021-03-25 19:29:24 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2021-04-12 18:05:09 +00:00
|
|
|
<>
|
2021-04-28 16:30:02 +00:00
|
|
|
<Container className='px-sm-0'>
|
|
|
|
<Navbar className={styles.navbar}>
|
2021-10-07 03:20:59 +00:00
|
|
|
<Nav
|
|
|
|
className={styles.navbarNav}
|
|
|
|
activeKey={path}
|
|
|
|
>
|
2021-09-06 22:36:08 +00:00
|
|
|
<RefreshableLink href='/' passHref>
|
2021-05-06 21:15:22 +00:00
|
|
|
<Navbar.Brand className={`${styles.brand} d-none d-sm-block`}>STACKER NEWS</Navbar.Brand>
|
2021-09-06 22:36:08 +00:00
|
|
|
</RefreshableLink>
|
|
|
|
<RefreshableLink href='/' passHref>
|
2021-05-06 21:15:22 +00:00
|
|
|
<Navbar.Brand className={`${styles.brand} d-block d-sm-none`}>SN</Navbar.Brand>
|
2021-09-06 22:36:08 +00:00
|
|
|
</RefreshableLink>
|
2021-05-06 21:15:22 +00:00
|
|
|
<Nav.Item className='d-md-flex d-none'>
|
2021-09-06 22:36:08 +00:00
|
|
|
<RefreshableLink href='/recent' passHref>
|
2021-04-28 16:30:02 +00:00
|
|
|
<Nav.Link className={styles.navLink}>recent</Nav.Link>
|
2021-09-06 22:36:08 +00:00
|
|
|
</RefreshableLink>
|
2021-04-14 00:57:32 +00:00
|
|
|
</Nav.Item>
|
2021-05-06 21:15:22 +00:00
|
|
|
<Nav.Item className='d-md-flex d-none'>
|
2021-09-24 21:56:51 +00:00
|
|
|
{me
|
2021-05-20 19:41:21 +00:00
|
|
|
? (
|
|
|
|
<Link href='/post' passHref>
|
|
|
|
<Nav.Link className={styles.navLink}>post</Nav.Link>
|
|
|
|
</Link>
|
|
|
|
)
|
|
|
|
: <Nav.Link className={styles.navLink} onClick={signIn}>post</Nav.Link>}
|
2021-04-14 00:57:32 +00:00
|
|
|
</Nav.Item>
|
2021-05-06 21:15:22 +00:00
|
|
|
<Nav.Item className='d-md-flex d-none'>
|
2021-04-28 16:30:02 +00:00
|
|
|
<Nav.Link href='https://bitcoinerjobs.co' target='_blank' className={styles.navLink}>jobs</Nav.Link>
|
2021-04-26 21:55:15 +00:00
|
|
|
</Nav.Item>
|
2021-05-12 23:04:19 +00:00
|
|
|
<Nav.Item className='text-monospace' style={{ opacity: '.5' }}>
|
2021-04-28 19:30:14 +00:00
|
|
|
<Price />
|
|
|
|
</Nav.Item>
|
2021-04-14 00:57:32 +00:00
|
|
|
<Corner />
|
|
|
|
</Nav>
|
2021-04-28 16:30:02 +00:00
|
|
|
</Navbar>
|
|
|
|
</Container>
|
2021-04-12 18:05:09 +00:00
|
|
|
</>
|
2021-03-25 19:29:24 +00:00
|
|
|
)
|
|
|
|
}
|
2021-07-07 18:34:21 +00:00
|
|
|
|
|
|
|
export function HeaderPreview () {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Container className='px-sm-0'>
|
|
|
|
<Navbar className={styles.navbar}>
|
|
|
|
<Nav className='w-100 justify-content-between flex-wrap align-items-center'>
|
|
|
|
<Link href='/' passHref>
|
|
|
|
<Navbar.Brand className={`${styles.brand} d-none d-sm-block`}>STACKER NEWS</Navbar.Brand>
|
|
|
|
</Link>
|
2021-07-08 00:15:27 +00:00
|
|
|
<Nav.Item className='text-monospace' style={{ opacity: '.5' }}>
|
|
|
|
<Price />
|
|
|
|
</Nav.Item>
|
2021-07-07 18:34:21 +00:00
|
|
|
</Nav>
|
|
|
|
</Navbar>
|
|
|
|
</Container>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|