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 } from 'next-auth/client'
import { useLightning } from './lightning'
import { useEffect, useState } from 'react'
import { randInRange } from '../lib/rand'
import { formatSats } from '../lib/format'
import NoteIcon from '../svgs/notification-4-fill.svg'
import { useQuery, gql } from '@apollo/client'

function WalletSummary ({ me }) {
  if (!me) return null

  return `${formatSats(me.sats)}`
}

export default function Header ({ sub }) {
  const router = useRouter()
  const path = router.asPath.split('?')[0]
  const [fired, setFired] = useState()
  const me = useMe()
  const prefix = sub ? `/~${sub}` : ''
  const { data: subLatestPost } = useQuery(gql`
    query subLatestPost($name: ID!) {
      subLatestPost(name: $name)
    }
  `, { variables: { name: 'jobs' }, pollInterval: 600000, fetchPolicy: 'network-only' })

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

  const Corner = () => {
    if (me) {
      return (
        <div className='d-flex align-items-center'>
          <Head>
            <link rel='shortcut icon' href={me?.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} />
          </Head>
          <Link href='/notifications' passHref>
            <Nav.Link className='pl-0 position-relative'>
              <NoteIcon />
              {me?.hasNewNotes &&
                <span className={styles.notification}>
                  <span className='invisible'>{' '}</span>
                </span>}
            </Nav.Link>
          </Link>
          <div className='position-relative'>
            <NavDropdown
              className={styles.dropdown} title={
                <Link href={`/${me?.name}`} passHref>
                  <Nav.Link className='p-0' onClick={e => e.preventDefault()}>{`@${me?.name}`}</Nav.Link>
                </Link>
              } alignRight
            >
              <Link href={'/' + me?.name} passHref>
                <NavDropdown.Item>
                  profile
                  {me && !me.bioId &&
                    <div className='p-1 d-inline-block bg-secondary ml-1'>
                      <span className='invisible'>{' '}</span>
                    </div>}
                </NavDropdown.Item>
              </Link>
              <Link href='/wallet' passHref>
                <NavDropdown.Item>wallet</NavDropdown.Item>
              </Link>
              <Link href='/satistics?inc=invoice,withdrawal,stacked,spent' passHref>
                <NavDropdown.Item>satistics</NavDropdown.Item>
              </Link>
              <NavDropdown.Divider />
              <Link href='/invites' passHref>
                <NavDropdown.Item>invites
                  {me && !me.hasInvites &&
                    <div className='p-1 d-inline-block bg-success ml-1'>
                      <span className='invisible'>{' '}</span>
                    </div>}
                </NavDropdown.Item>
              </Link>
              <NavDropdown.Divider />
              <div className='d-flex align-items-center'>
                <Link href='/settings' passHref>
                  <NavDropdown.Item>settings</NavDropdown.Item>
                </Link>
              </div>
              <NavDropdown.Divider />
              <NavDropdown.Item onClick={() => signOut({ callbackUrl: '/' })}>logout</NavDropdown.Item>
            </NavDropdown>
            {me && !me.bioId &&
              <span className='position-absolute p-1 bg-secondary' style={{ top: '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 {
      if (!fired) {
        const strike = useLightning()
        useEffect(() => {
          setTimeout(strike, randInRange(3000, 10000))
          setFired(true)
        }, [router.asPath])
      }
      return path !== '/login' && !path.startsWith('/invites') && <Button id='login' onClick={signIn}>login</Button>
    }
  }

  const NavItems = ({ className }) => {
    return (
      <>
        <Nav.Item className={className}>
          <Link href={prefix + '/recent'} passHref>
            <Nav.Link className={styles.navLink}>recent</Nav.Link>
          </Link>
        </Nav.Item>
        {!prefix &&
          <Nav.Item className={className}>
            <Link href='/top/posts/week' passHref>
              <Nav.Link className={styles.navLink}>top</Nav.Link>
            </Link>
          </Nav.Item>}
        <Nav.Item className={className}>
          <div className='position-relative'>
            <Link href='/~jobs' passHref>
              <Nav.Link active={sub === 'jobs'} className={styles.navLink}>
                jobs
              </Nav.Link>
            </Link>
            {sub !== 'jobs' && (!me || me.noteJobIndicator) && (!lastCheckedJobs || lastCheckedJobs < subLatestPost?.subLatestPost) &&
              <span className={styles.jobIndicator}>
                <span className='invisible'>{' '}</span>
              </span>}
          </div>
        </Nav.Item>
        {me &&
          <Nav.Item className={className}>
            <Link href={prefix + '/post'} passHref>
              <Nav.Link className={styles.navLinkButton}>post</Nav.Link>
            </Link>
          </Nav.Item>}
      </>
    )
  }

  return (
    <>
      <Container className='px-sm-0'>
        <Navbar className='pb-0 pb-md-1'>
          <Nav
            className={styles.navbarNav}
            activeKey={path}
          >
            <div className='d-flex'>
              <Link href='/' passHref>
                <Navbar.Brand className={`${styles.brand} d-none d-md-block`}>
                  STACKER NEWS
                </Navbar.Brand>
              </Link>
              <Link href='/' passHref>
                <Navbar.Brand className={`${styles.brand} d-block d-md-none`}>
                  SN
                </Navbar.Brand>
              </Link>
            </div>
            <NavItems className='d-none d-md-flex' />
            <Nav.Item className={`text-monospace nav-link px-0 ${me?.name.length > 6 ? 'd-none d-lg-flex' : ''}`}>
              <Price />
            </Nav.Item>
            <Corner />
          </Nav>
        </Navbar>
        <Navbar className='pt-0 pb-1 d-md-none'>
          <Nav
            className={`${styles.navbarNav} justify-content-around`}
            activeKey={path}
          >
            <NavItems />
          </Nav>
        </Navbar>
      </Container>
    </>
  )
}

const NavItemsStatic = ({ className }) => {
  return (
    <>
      <Nav.Item className={className}>
        <Link href='/recent' passHref>
          <Nav.Link className={styles.navLink}>recent</Nav.Link>
        </Link>
      </Nav.Item>
      <Nav.Item className={className}>
        <Link href='/top/posts/week' passHref>
          <Nav.Link className={styles.navLink}>top</Nav.Link>
        </Link>
      </Nav.Item>
      <Nav.Item className={className}>
        <div className='position-relative'>
          <Link href='/~jobs' passHref>
            <Nav.Link className={styles.navLink}>
              jobs
            </Nav.Link>
          </Link>
        </div>
      </Nav.Item>
    </>
  )
}

export function HeaderStatic () {
  return (
    <Container className='px-sm-0'>
      <Navbar className='pb-0 pb-md-1'>
        <Nav
          className={styles.navbarNav}
        >
          <div className='d-flex'>
            <Link href='/' passHref>
              <Navbar.Brand className={`${styles.brand} d-none d-md-block`}>
                STACKER NEWS
              </Navbar.Brand>
            </Link>
            <Link href='/' passHref>
              <Navbar.Brand className={`${styles.brand} d-block d-md-none`}>
                SN
              </Navbar.Brand>
            </Link>
          </div>
          <NavItemsStatic className='d-none d-md-flex' />
          <Nav.Item className='text-monospace nav-link px-0'>
            <Price />
          </Nav.Item>
        </Nav>
      </Navbar>
      <Navbar className='pt-0 pb-1 d-md-none'>
        <Nav
          className={`${styles.navbarNav} justify-content-around`}
        >
          <NavItemsStatic />
        </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'`
new bolt 2021-12-05 17:37:55 +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'`
ssr me and price 2021-11-28 17:29:17 +00:00			`import { signOut, signIn } from 'next-auth/client'`
use rand lightning animation when not logged in 2021-07-16 16:47:18 +00:00			`import { useLightning } from './lightning'`
sort by top posts 2021-10-21 22:05:06 +00:00			`import { useEffect, useState } from 'react'`
use rand lightning animation when not logged in 2021-07-16 16:47:18 +00:00			`import { randInRange } from '../lib/rand'`
jobs w/o payments yet 2022-02-17 17:23:43 +00:00			`import { formatSats } from '../lib/format'`
move notifications to icon 2022-04-19 21:37:05 +00:00			`import NoteIcon from '../svgs/notification-4-fill.svg'`
indicate to user when there are new jobs 2022-05-09 17:30:27 +00:00			`import { useQuery, gql } from '@apollo/client'`
many small design enhancements 2021-11-12 22:39:52 +00:00
notifications done 2021-06-24 23:56:01 +00:00			`function WalletSummary ({ me }) {`
many small design enhancements 2021-11-12 22:39:52 +00:00			`if (!me) return null`

move notifications to icon 2022-04-19 21:37:05 +00:00			return `${formatSats(me.sats)}`
invoiced ... WIP transactions 2021-05-11 15:52:50 +00:00			`}`
begin working on db schema 2021-03-25 19:29:24 +00:00
jobs w/o payments yet 2022-02-17 17:23:43 +00:00			`export default function Header ({ sub }) {`
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]`
limit bolt for logged out to one per nav 2021-12-06 16:32:58 +00:00			`const [fired, setFired] = useState()`
notifications done 2021-06-24 23:56:01 +00:00			`const me = useMe()`
jobs w/o payments yet 2022-02-17 17:23:43 +00:00			const prefix = sub ? `/~${sub}` : ''
indicate to user when there are new jobs 2022-05-09 17:30:27 +00:00			const { data: subLatestPost } = useQuery(gql`
			`query subLatestPost($name: ID!) {`
			`subLatestPost(name: $name)`
			`}`
			`, { variables: { name: 'jobs' }, pollInterval: 600000, fetchPolicy: 'network-only' })

			`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'))`
			`}`
			`})`
sort by top posts 2021-10-21 22:05:06 +00:00
a bunch of increments 2021-04-12 18:05:09 +00:00			`const Corner = () => {`
fix lightning when loading session 2021-09-24 23:51:07 +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>`
move notifications to icon 2022-04-19 21:37:05 +00:00			`<Link href='/notifications' passHref>`
			`<Nav.Link className='pl-0 position-relative'>`
refine reply-only notifications 2022-04-21 17:48:27 +00:00			`<NoteIcon />`
move notifications to icon 2022-04-19 21:37:05 +00:00			`{me?.hasNewNotes &&`
			`<span className={styles.notification}>`
			`<span className='invisible'>{' '}</span>`
			`</span>}`
			`</Nav.Link>`
			`</Link>`
many small design enhancements 2021-11-12 22:39:52 +00:00			`<div className='position-relative'>`
allow lightning address send callback to have query params 2022-05-24 21:15:51 +00:00			`<NavDropdown`
			`className={styles.dropdown} title={`
			<Link href={`/${me?.name}`} passHref>
			<Nav.Link className='p-0' onClick={e => e.preventDefault()}>{`@${me?.name}`}</Nav.Link>
			`</Link>`
			`} alignRight`
			`>`
add boost back to posts & fix header problem 2021-09-24 23:43:30 +00:00			`<Link href={'/' + me?.name} passHref>`
add indicator for user bio being empty 2021-09-24 21:56:51 +00:00			`<NavDropdown.Item>`
			`profile`
a few perf enhancements + gql slowlogs 2022-04-28 18:11:05 +00:00			`{me && !me.bioId &&`
add indicator for user bio being empty 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>`
notifications done 2021-06-24 23:56:01 +00:00			`</Link>`
			`<Link href='/wallet' passHref>`
			`<NavDropdown.Item>wallet</NavDropdown.Item>`
			`</Link>`
move notifications to icon 2022-04-19 21:37:05 +00:00			`<Link href='/satistics?inc=invoice,withdrawal,stacked,spent' passHref>`
			`<NavDropdown.Item>satistics</NavDropdown.Item>`
			`</Link>`
invites page 2021-10-14 21:05:37 +00:00			`<NavDropdown.Divider />`
			`<Link href='/invites' passHref>`
finish up invites 2021-10-15 23:07:51 +00:00			`<NavDropdown.Item>invites`
			`{me && !me.hasInvites &&`
			`<div className='p-1 d-inline-block bg-success ml-1'>`
			`<span className='invisible'>{' '}</span>`
			`</div>}`
			`</NavDropdown.Item>`
invites page 2021-10-14 21:05:37 +00:00			`</Link>`
ready for invoices 2021-05-06 21:15:22 +00:00			`<NavDropdown.Divider />`
dark mode without ability to switch 2021-11-04 18:22:03 +00:00			`<div className='d-flex align-items-center'>`
			`<Link href='/settings' passHref>`
			`<NavDropdown.Item>settings</NavDropdown.Item>`
			`</Link>`
			`</div>`
add settings page 2021-10-30 16:20:11 +00:00			`<NavDropdown.Divider />`
fix logout redirection issue 2021-12-20 22:34:26 +00:00			`<NavDropdown.Item onClick={() => signOut({ callbackUrl: '/' })}>logout</NavDropdown.Item>`
notifications done 2021-06-24 23:56:01 +00:00			`</NavDropdown>`
a few perf enhancements + gql slowlogs 2022-04-28 18:11:05 +00:00			`{me && !me.bioId &&`
move notifications to icon 2022-04-19 21:37:05 +00:00			`<span className='position-absolute p-1 bg-secondary' style={{ top: '5px', right: '0px' }}>`
add indicator for user bio being empty 2021-09-24 21:56:51 +00:00			`<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 {`
limit bolt for logged out to one per nav 2021-12-06 16:32:58 +00:00			`if (!fired) {`
			`const strike = useLightning()`
			`useEffect(() => {`
			`setTimeout(strike, randInRange(3000, 10000))`
add job queue 2022-01-05 20:37:34 +00:00			`setFired(true)`
limit bolt for logged out to one per nav 2021-12-06 16:32:58 +00:00			`}, [router.asPath])`
			`}`
more invite work 2021-10-15 18:05:34 +00:00			`return path !== '/login' && !path.startsWith('/invites') && <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			`}`

indicate to user when there are new jobs 2022-05-09 17:30:27 +00:00			`const NavItems = ({ className }) => {`
			`return (`
			`<>`
			`<Nav.Item className={className}>`
			`<Link href={prefix + '/recent'} passHref>`
			`<Nav.Link className={styles.navLink}>recent</Nav.Link>`
			`</Link>`
			`</Nav.Item>`
			`{!prefix &&`
			`<Nav.Item className={className}>`
			`<Link href='/top/posts/week' passHref>`
			`<Nav.Link className={styles.navLink}>top</Nav.Link>`
			`</Link>`
			`</Nav.Item>}`
			`<Nav.Item className={className}>`
			`<div className='position-relative'>`
			`<Link href='/~jobs' passHref>`
			`<Nav.Link active={sub === 'jobs'} className={styles.navLink}>`
			`jobs`
			`</Nav.Link>`
			`</Link>`
			`{sub !== 'jobs' && (!me \|\| me.noteJobIndicator) && (!lastCheckedJobs \|\| lastCheckedJobs < subLatestPost?.subLatestPost) &&`
			`<span className={styles.jobIndicator}>`
			`<span className='invisible'>{' '}</span>`
			`</span>}`
			`</div>`
			`</Nav.Item>`
			`{me &&`
			`<Nav.Item className={className}>`
			`<Link href={prefix + '/post'} passHref>`
			`<Nav.Link className={styles.navLinkButton}>post</Nav.Link>`
			`</Link>`
			`</Nav.Item>}`
			`</>`
			`)`
			`}`

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'>`
improve navbar on mobile 2022-03-08 20:51:06 +00:00			`<Navbar className='pb-0 pb-md-1'>`
speed hack notification query 2021-10-07 03:20:59 +00:00			`<Nav`
			`className={styles.navbarNav}`
			`activeKey={path}`
			`>`
jobs w/o payments yet 2022-02-17 17:23:43 +00:00			`<div className='d-flex'>`
			`<Link href='/' passHref>`
improve navbar on mobile 2022-03-08 20:51:06 +00:00			<Navbar.Brand className={`${styles.brand} d-none d-md-block`}>
make ~jobs header more consistent with main 2022-03-07 18:11:58 +00:00			`STACKER NEWS`
jobs w/o payments yet 2022-02-17 17:23:43 +00:00			`</Navbar.Brand>`
new bolt 2021-12-05 17:37:55 +00:00			`</Link>`
jobs w/o payments yet 2022-02-17 17:23:43 +00:00			`<Link href='/' passHref>`
improve navbar on mobile 2022-03-08 20:51:06 +00:00			<Navbar.Brand className={`${styles.brand} d-block d-md-none`}>
jobs w/o payments yet 2022-02-17 17:23:43 +00:00			`SN`
			`</Navbar.Brand>`
			`</Link>`
			`</div>`
indicate to user when there are new jobs 2022-05-09 17:30:27 +00:00			`<NavItems className='d-none d-md-flex' />`
improve navbar on mobile 2022-03-08 20:51:06 +00:00			<Nav.Item className={`text-monospace nav-link px-0 ${me?.name.length > 6 ? 'd-none d-lg-flex' : ''}`}>
ssr me and price 2021-11-28 17:29:17 +00:00			`<Price />`
a number of style updates 2021-04-28 19:30:14 +00:00			`</Nav.Item>`
ssr me and price 2021-11-28 17:29:17 +00:00			`<Corner />`
tables 2021-04-14 00:57:32 +00:00			`</Nav>`
dark mode with css variables instead 2021-11-09 22:43:56 +00:00			`</Navbar>`
improve navbar on mobile 2022-03-08 20:51:06 +00:00			`<Navbar className='pt-0 pb-1 d-md-none'>`
			`<Nav`
make sub-header more differentiated 2022-03-10 18:38:48 +00:00			className={`${styles.navbarNav} justify-content-around`}
improve navbar on mobile 2022-03-08 20:51:06 +00:00			`activeKey={path}`
			`>`
indicate to user when there are new jobs 2022-05-09 17:30:27 +00:00			`<NavItems />`
improve navbar on mobile 2022-03-08 20:51:06 +00:00			`</Nav>`
			`</Navbar>`
navbar layout 2021-04-28 16:30:02 +00:00			`</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			`)`
			`}`
improve error pages 2022-05-18 20:55:06 +00:00
			`const NavItemsStatic = ({ className }) => {`
			`return (`
			`<>`
			`<Nav.Item className={className}>`
			`<Link href='/recent' passHref>`
			`<Nav.Link className={styles.navLink}>recent</Nav.Link>`
			`</Link>`
			`</Nav.Item>`
			`<Nav.Item className={className}>`
			`<Link href='/top/posts/week' passHref>`
			`<Nav.Link className={styles.navLink}>top</Nav.Link>`
			`</Link>`
			`</Nav.Item>`
			`<Nav.Item className={className}>`
			`<div className='position-relative'>`
			`<Link href='/~jobs' passHref>`
			`<Nav.Link className={styles.navLink}>`
			`jobs`
			`</Nav.Link>`
			`</Link>`
			`</div>`
			`</Nav.Item>`
			`</>`
			`)`
			`}`

			`export function HeaderStatic () {`
			`return (`
			`<Container className='px-sm-0'>`
			`<Navbar className='pb-0 pb-md-1'>`
			`<Nav`
			`className={styles.navbarNav}`
			`>`
			`<div className='d-flex'>`
			`<Link href='/' passHref>`
			<Navbar.Brand className={`${styles.brand} d-none d-md-block`}>
			`STACKER NEWS`
			`</Navbar.Brand>`
			`</Link>`
			`<Link href='/' passHref>`
			<Navbar.Brand className={`${styles.brand} d-block d-md-none`}>
			`SN`
			`</Navbar.Brand>`
			`</Link>`
			`</div>`
			`<NavItemsStatic className='d-none d-md-flex' />`
			`<Nav.Item className='text-monospace nav-link px-0'>`
			`<Price />`
			`</Nav.Item>`
			`</Nav>`
			`</Navbar>`
			`<Navbar className='pt-0 pb-1 d-md-none'>`
			`<Nav`
			className={`${styles.navbarNav} justify-content-around`}
			`>`
			`<NavItemsStatic />`
			`</Nav>`
			`</Navbar>`
			`</Container>`
			`)`
			`}`