stacker.news/components/header.js

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, Container, NavDropdown } from 'react-bootstrap'
import Price from './price'
import { useMe } from './me'
import Head from 'next/head'
import { signOut, signIn, useSession } from 'next-auth/client'
import { useLightning } from './lightning'
import { useEffect } from 'react'
import { randInRange } from '../lib/rand'

function WalletSummary ({ me }) {
  return `${me.sats} \\ ${me.stacked}`
}

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>
  )
}

export default function Header () {
  const router = useRouter()
  const path = router.asPath.split('?')[0]
  const me = useMe()
  const [, loading] = useSession()

  const Corner = () => {
    if (loading && !me) {
      return null
    }

    if (me) {
      return (
        <div className='d-flex align-items-center'>
          <Head>
            <link rel='shortcut icon' href={me?.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} />
          </Head>
          <div className='position-relative mr-1'>
            <NavDropdown className='px-0' title={`@${me.name}`} alignRight>
              <Link href={'/' + me.name} passHref>
                <NavDropdown.Item>
                  profile
                  {me && !me.bio &&
                    <div className='p-1 d-inline-block bg-secondary ml-1'>
                      <span className='invisible'>{' '}</span>
                    </div>}
                </NavDropdown.Item>
              </Link>
              <RefreshableLink href='/notifications' passHref>
                <NavDropdown.Item>
                  notifications
                  {me?.hasNewNotes &&
                    <div className='p-1 d-inline-block bg-danger ml-1'>
                      <span className='invisible'>{' '}</span>
                    </div>}
                </NavDropdown.Item>
              </RefreshableLink>
              <Link href='/wallet' passHref>
                <NavDropdown.Item>wallet</NavDropdown.Item>
              </Link>
              <div>
                <NavDropdown.Divider />
                <RefreshableLink href='/recent' passHref>
                  <NavDropdown.Item>recent</NavDropdown.Item>
                </RefreshableLink>
                {me
                  ? (
                    <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>
              <NavDropdown.Divider />
              <NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>
            </NavDropdown>
            {me?.hasNewNotes &&
              <span className='position-absolute p-1 bg-danger' style={{ top: '5px', right: '0px' }}>
                <span className='invisible'>{' '}</span>
              </span>}
            {me && !me.bio &&
              <span className='position-absolute p-1 bg-secondary' style={{ bottom: '5px', right: '0px' }}>
                <span className='invisible'>{' '}</span>
              </span>}
          </div>
          {me &&
            <Nav.Item>
              <Link href='/wallet' passHref>
                <Nav.Link className='text-success px-0 text-nowrap'><WalletSummary me={me} /></Nav.Link>
              </Link>
            </Nav.Item>}
        </div>
      )
    } else {
      const strike = useLightning()
      useEffect(() => {
        setTimeout(strike, randInRange(3000, 10000))
      }, [router.asPath])
      return path !== '/login' && <Button id='login' onClick={signIn}>login</Button>
    }
  }

  return (
    <>
      <Container className='px-sm-0'>
        <Navbar className={styles.navbar}>
          <Nav className='w-100 justify-content-between flex-wrap align-items-center' activeKey={path}>
            <RefreshableLink href='/' passHref>
              <Navbar.Brand className={`${styles.brand} d-none d-sm-block`}>STACKER NEWS</Navbar.Brand>
            </RefreshableLink>
            <RefreshableLink href='/' passHref>
              <Navbar.Brand className={`${styles.brand} d-block d-sm-none`}>SN</Navbar.Brand>
            </RefreshableLink>
            <Nav.Item className='d-md-flex d-none'>
              <RefreshableLink href='/recent' passHref>
                <Nav.Link className={styles.navLink}>recent</Nav.Link>
              </RefreshableLink>
            </Nav.Item>
            <Nav.Item className='d-md-flex d-none'>
              {me
                ? (
                  <Link href='/post' passHref>
                    <Nav.Link className={styles.navLink}>post</Nav.Link>
                  </Link>
                  )
                : <Nav.Link className={styles.navLink} onClick={signIn}>post</Nav.Link>}
            </Nav.Item>
            <Nav.Item className='d-md-flex d-none'>
              <Nav.Link href='https://bitcoinerjobs.co' target='_blank' className={styles.navLink}>jobs</Nav.Link>
            </Nav.Item>
            <Nav.Item className='text-monospace' style={{ opacity: '.5' }}>
              <Price />
            </Nav.Item>
            <Corner />
          </Nav>
        </Navbar>
      </Container>
    </>
  )
}

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>
            <Nav.Item className='text-monospace' style={{ opacity: '.5' }}>
              <Price />
            </Nav.Item>
          </Nav>
        </Navbar>
      </Container>
    </>
  )
}
a bunch of increments 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'`
small ui stuff 2021-05-05 18:13:14 +00:00			`import { Button, Container, NavDropdown } from 'react-bootstrap'`
a number of style updates 2021-04-28 19:30:14 +00:00			`import Price from './price'`
finish mvp 2021-05-25 00:08:56 +00:00			`import { useMe } from './me'`
change favicon when there are notifications and make notification icon square 2021-07-08 19:52:11 +00:00			`import Head from 'next/head'`
remove use of session where inapproriate 2021-09-24 23:04:59 +00:00			`import { signOut, signIn, useSession } from 'next-auth/client'`
use rand lightning animation when not logged in 2021-07-16 16:47:18 +00:00			`import { useLightning } from './lightning'`
			`import { useEffect } from 'react'`
			`import { randInRange } from '../lib/rand'`
invoiced ... WIP transactions 2021-05-11 15:52:50 +00:00
notifications done 2021-06-24 23:56:01 +00:00			`function WalletSummary ({ me }) {`
improve sat/stacked display 2021-08-18 13:52:45 +00:00			return `${me.sats} \\ ${me.stacked}`
invoiced ... WIP transactions 2021-05-11 15:52:50 +00:00			`}`
begin working on db schema 2021-03-25 19:29:24 +00:00
cache magic - use cache and network except when a result of popstate 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>`
			`)`
			`}`

begin working on db schema 2021-03-25 19:29:24 +00:00			`export default function Header () {`
a bunch of increments 2021-04-12 18:05:09 +00:00			`const router = useRouter()`
small ui stuff 2021-05-05 18:13:14 +00:00			`const path = router.asPath.split('?')[0]`
notifications done 2021-06-24 23:56:01 +00:00			`const me = useMe()`
remove use of session where inapproriate 2021-09-24 23:04:59 +00:00			`const [, loading] = useSession()`
begin working on db schema 2021-03-25 19:29:24 +00:00
a bunch of increments 2021-04-12 18:05:09 +00:00			`const Corner = () => {`
remove use of session where inapproriate 2021-09-24 23:04:59 +00:00			`if (loading && !me) {`
			`return null`
			`}`

add indicator for user bio being empty 2021-09-24 21:56:51 +00:00			`if (me) {`
a bunch of increments 2021-04-12 18:05:09 +00:00			`return (`
small ui stuff 2021-05-05 18:13:14 +00:00			`<div className='d-flex align-items-center'>`
continued notification work 2021-08-17 23:59:22 +00:00			`<Head>`
add indicator for user bio being empty 2021-09-24 21:56:51 +00:00			`<link rel='shortcut icon' href={me?.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} />`
continued notification work 2021-08-17 23:59:22 +00:00			`</Head>`
fix notifcation square positioning 2021-08-18 16:49:59 +00:00			`<div className='position-relative mr-1'>`
add indicator for user bio being empty 2021-09-24 21:56:51 +00:00			<NavDropdown className='px-0' title={`@${me.name}`} alignRight>
			`<Link href={'/' + me.name} passHref>`
			`<NavDropdown.Item>`
			`profile`
			`{me && !me.bio &&`
			`<div className='p-1 d-inline-block bg-secondary ml-1'>`
			`<span className='invisible'>{' '}</span>`
			`</div>}`
			`</NavDropdown.Item>`
notifications done 2021-06-24 23:56:01 +00:00			`</Link>`
cache magic - use cache and network except when a result of popstate 2021-09-06 22:36:08 +00:00			`<RefreshableLink href='/notifications' passHref>`
			`<NavDropdown.Item>`
notifications done 2021-06-24 23:56:01 +00:00			`notifications`
add indicator for user bio being empty 2021-09-24 21:56:51 +00:00			`{me?.hasNewNotes &&`
change favicon when there are notifications and make notification icon square 2021-07-08 19:52:11 +00:00			`<div className='p-1 d-inline-block bg-danger ml-1'>`
notifications done 2021-06-24 23:56:01 +00:00			`<span className='invisible'>{' '}</span>`
			`</div>}`
			`</NavDropdown.Item>`
cache magic - use cache and network except when a result of popstate 2021-09-06 22:36:08 +00:00			`</RefreshableLink>`
notifications done 2021-06-24 23:56:01 +00:00			`<Link href='/wallet' passHref>`
			`<NavDropdown.Item>wallet</NavDropdown.Item>`
			`</Link>`
			`<div>`
			`<NavDropdown.Divider />`
cache magic - use cache and network except when a result of popstate 2021-09-06 22:36:08 +00:00			`<RefreshableLink href='/recent' passHref>`
notifications done 2021-06-24 23:56:01 +00:00			`<NavDropdown.Item>recent</NavDropdown.Item>`
cache magic - use cache and network except when a result of popstate 2021-09-06 22:36:08 +00:00			`</RefreshableLink>`
add indicator for user bio being empty 2021-09-24 21:56:51 +00:00			`{me`
notifications done 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>`
ready for invoices 2021-05-06 21:15:22 +00:00			`<NavDropdown.Divider />`
notifications done 2021-06-24 23:56:01 +00:00			`<NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>`
			`</NavDropdown>`
add indicator for user bio being empty 2021-09-24 21:56:51 +00:00			`{me?.hasNewNotes &&`
change favicon when there are notifications and make notification icon square 2021-07-08 19:52:11 +00:00			`<span className='position-absolute p-1 bg-danger' style={{ top: '5px', right: '0px' }}>`
notifications done 2021-06-24 23:56:01 +00:00			`<span className='invisible'>{' '}</span>`
			`</span>}`
add indicator for user bio being empty 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>}`
notifications done 2021-06-24 23:56:01 +00:00			`</div>`
			`{me &&`
			`<Nav.Item>`
			`<Link href='/wallet' passHref>`
try to fix 'stacked' wrapping 2021-08-19 20:34:33 +00:00			`<Nav.Link className='text-success px-0 text-nowrap'><WalletSummary me={me} /></Nav.Link>`
ready for invoices 2021-05-06 21:15:22 +00:00			`</Link>`
notifications done 2021-06-24 23:56:01 +00:00			`</Nav.Item>}`
small ui stuff 2021-05-05 18:13:14 +00:00			`</div>`
a bunch of increments 2021-04-12 18:05:09 +00:00			`)`
			`} else {`
use rand lightning animation when not logged in 2021-07-16 16:47:18 +00:00			`const strike = useLightning()`
			`useEffect(() => {`
			`setTimeout(strike, randInRange(3000, 10000))`
auto grow textareas 2021-07-16 17:32:54 +00:00			`}, [router.asPath])`
remove href on button doh 2021-07-16 07:23:29 +00:00			`return path !== '/login' && <Button id='login' onClick={signIn}>login</Button>`
a bunch of increments 2021-04-12 18:05:09 +00:00			`}`
begin working on db schema 2021-03-25 19:29:24 +00:00			`}`

			`return (`
a bunch of increments 2021-04-12 18:05:09 +00:00			`<>`
navbar layout 2021-04-28 16:30:02 +00:00			`<Container className='px-sm-0'>`
			`<Navbar className={styles.navbar}>`
small ui stuff 2021-05-05 18:13:14 +00:00			`<Nav className='w-100 justify-content-between flex-wrap align-items-center' activeKey={path}>`
cache magic - use cache and network except when a result of popstate 2021-09-06 22:36:08 +00:00			`<RefreshableLink href='/' passHref>`
ready for invoices 2021-05-06 21:15:22 +00:00			<Navbar.Brand className={`${styles.brand} d-none d-sm-block`}>STACKER NEWS</Navbar.Brand>
cache magic - use cache and network except when a result of popstate 2021-09-06 22:36:08 +00:00			`</RefreshableLink>`
			`<RefreshableLink href='/' passHref>`
ready for invoices 2021-05-06 21:15:22 +00:00			<Navbar.Brand className={`${styles.brand} d-block d-sm-none`}>SN</Navbar.Brand>
cache magic - use cache and network except when a result of popstate 2021-09-06 22:36:08 +00:00			`</RefreshableLink>`
ready for invoices 2021-05-06 21:15:22 +00:00			`<Nav.Item className='d-md-flex d-none'>`
cache magic - use cache and network except when a result of popstate 2021-09-06 22:36:08 +00:00			`<RefreshableLink href='/recent' passHref>`
navbar layout 2021-04-28 16:30:02 +00:00			`<Nav.Link className={styles.navLink}>recent</Nav.Link>`
cache magic - use cache and network except when a result of popstate 2021-09-06 22:36:08 +00:00			`</RefreshableLink>`
tables 2021-04-14 00:57:32 +00:00			`</Nav.Item>`
ready for invoices 2021-05-06 21:15:22 +00:00			`<Nav.Item className='d-md-flex d-none'>`
add indicator for user bio being empty 2021-09-24 21:56:51 +00:00			`{me`
direct user to login on certain actions 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>}`
tables 2021-04-14 00:57:32 +00:00			`</Nav.Item>`
ready for invoices 2021-05-06 21:15:22 +00:00			`<Nav.Item className='d-md-flex d-none'>`
navbar layout 2021-04-28 16:30:02 +00:00			`<Nav.Link href='https://bitcoinerjobs.co' target='_blank' className={styles.navLink}>jobs</Nav.Link>`
attempts at voting before running into cache issues 2021-04-26 21:55:15 +00:00			`</Nav.Item>`
half done with wallets 2021-05-12 23:04:19 +00:00			`<Nav.Item className='text-monospace' style={{ opacity: '.5' }}>`
a number of style updates 2021-04-28 19:30:14 +00:00			`<Price />`
			`</Nav.Item>`
tables 2021-04-14 00:57:32 +00:00			`<Corner />`
			`</Nav>`
navbar layout 2021-04-28 16:30:02 +00:00			`</Navbar>`
			`</Container>`
a bunch of increments 2021-04-12 18:05:09 +00:00			`</>`
begin working on db schema 2021-03-25 19:29:24 +00:00			`)`
			`}`
ssr preview info 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>`
working previews 2021-07-08 00:15:27 +00:00			`<Nav.Item className='text-monospace' style={{ opacity: '.5' }}>`
			`<Price />`
			`</Nav.Item>`
ssr preview info 2021-07-07 18:34:21 +00:00			`</Nav>`
			`</Navbar>`
			`</Container>`
			`</>`
			`)`
			`}`