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 } from 'next-auth/client' import { useLightning } from './lightning' import { useEffect, useState } from 'react' import { randInRange } from '../lib/rand' import { abbrNum } from '../lib/format' import NoteIcon from '../svgs/notification-4-fill.svg' import { useQuery, gql } from '@apollo/client' import LightningIcon from '../svgs/bolt.svg' import CowboyHat from './cowboy-hat' import { Form, Select } from './form' import SearchIcon from '../svgs/search-line.svg' import BackArrow from '../svgs/arrow-left-line.svg' import { useNotification } from './notifications' function WalletSummary ({ me }) { if (!me) return null return `${abbrNum(me.sats)}` } function Back () { const router = useRouter() if (typeof window !== 'undefined' && (typeof window.navigation === 'undefined' || window.navigation.canGoBack === undefined || window?.navigation.canGoBack)) { return router.back()} /> } return null } export default function Header ({ sub }) { const router = useRouter() const [fired, setFired] = useState() const [topNavKey, setTopNavKey] = useState('') const [dropNavKey, setDropNavKey] = useState('') const [prefix, setPrefix] = useState('') const [path, setPath] = useState('') const me = useMe() const notification = useNotification() 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' }) const { data: hasNewNotes } = useQuery(gql` { hasNewNotes } `, { pollInterval: 30000, fetchPolicy: 'cache-and-network', // Trigger onComplete after every poll // See https://github.com/apollographql/apollo-client/issues/5531#issuecomment-568235629 notifyOnNetworkStatusChange: true, onCompleted: (data) => { const notified = JSON.parse(localStorage.getItem('notified')) || false if (!notified && data.hasNewNotes) { notification.show('you have Stacker News notifications') } localStorage.setItem('notified', data.hasNewNotes) } }) // 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]) const Corner = () => { if (me) { return (

{hasNewNotes?.hasNewNotes && {' '} }

e.preventDefault()}> {`@${me?.name}`} } alignRight > profile {me && !me.bioId &&

{' '}

} bookmarks wallet satistics referrals

settings

signOut({ callbackUrl: '/' })}>logout {me && !me.bioId && {' '} }

{me && }

) } else { if (!fired) { const strike = useLightning() useEffect(() => { let isMounted = true if (!localStorage.getItem('striked')) { setTimeout(() => { if (isMounted) { strike() localStorage.setItem('striked', 'yep') setFired(true) } }, randInRange(3000, 10000)) } return () => { isMounted = false } }, []) } return path !== '/login' && path !== '/signup' && !path.startsWith('/invites') &&

} } // const showJobIndicator = sub !== 'jobs' && (!me || me.noteJobIndicator) && // (!lastCheckedJobs || lastCheckedJobs < subLatestPost?.subLatestPost) const NavItems = ({ className }) => { return ( <>