ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add indicator for user bio being empty

Browse Source
This commit is contained in:
keyan 2021-09-24 16:56:51 -05:00
parent a339516a54
commit d4f014aef2
2 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/header.js
View File

@ -7,7 +7,7 @@ import { Button, Container, NavDropdown } from 'react-bootstrap'
import Price from './price' import Price from './price'
import { useMe } from './me' import { useMe } from './me'
import Head from 'next/head' import Head from 'next/head'
import { signOut, signIn, useSession } from 'next-auth/client' import { signOut, signIn } from 'next-auth/client'
import { useLightning } from './lightning' import { useLightning } from './lightning'
import { useEffect } from 'react' import { useEffect } from 'react'
import { randInRange } from '../lib/rand' import { randInRange } from '../lib/rand'
@ -27,31 +27,32 @@ function RefreshableLink ({ href, children, ...props }) {
} }
export default function Header () { export default function Header () {
const [session, loading] = useSession()
const router = useRouter() const router = useRouter()
const path = router.asPath.split('?')[0] const path = router.asPath.split('?')[0]
const me = useMe() const me = useMe()
const Corner = () => { const Corner = () => {
if (loading) { if (me) {
return null
}
if (session) {
return ( return (
<div className='d-flex align-items-center'> <div className='d-flex align-items-center'>
<Head> <Head>
<link rel='shortcut icon' href={me && me.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} /> <link rel='shortcut icon' href={me?.hasNewNotes ? '/favicon-notify.png' : '/favicon.png'} />
</Head> </Head>
<div className='position-relative mr-1'> <div className='position-relative mr-1'>
<NavDropdown className='px-0' title={`@${session.user.name}`} alignRight> <NavDropdown className='px-0' title={`@${me.name}`} alignRight>
<Link href={'/' + session.user.name} passHref> <Link href={'/' + me.name} passHref>
<NavDropdown.Item>profile</NavDropdown.Item> <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> </Link>
<RefreshableLink href='/notifications' passHref> <RefreshableLink href='/notifications' passHref>
<NavDropdown.Item> <NavDropdown.Item>
notifications notifications
{me && me.hasNewNotes && {me?.hasNewNotes &&
<div className='p-1 d-inline-block bg-danger ml-1'> <div className='p-1 d-inline-block bg-danger ml-1'>
<span className='invisible'>{' '}</span> <span className='invisible'>{' '}</span>
</div>} </div>}
@ -65,7 +66,7 @@ export default function Header () {
<RefreshableLink href='/recent' passHref> <RefreshableLink href='/recent' passHref>
<NavDropdown.Item>recent</NavDropdown.Item> <NavDropdown.Item>recent</NavDropdown.Item>
</RefreshableLink> </RefreshableLink>
{session {me
? ( ? (
<Link href='/post' passHref> <Link href='/post' passHref>
<NavDropdown.Item>post</NavDropdown.Item> <NavDropdown.Item>post</NavDropdown.Item>
@ -77,10 +78,14 @@ export default function Header () {
<NavDropdown.Divider /> <NavDropdown.Divider />
<NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item> <NavDropdown.Item onClick={signOut}>logout</NavDropdown.Item>
</NavDropdown> </NavDropdown>
{me && me.hasNewNotes && {me?.hasNewNotes &&
<span className='position-absolute p-1 bg-danger' style={{ top: '5px', right: '0px' }}> <span className='position-absolute p-1 bg-danger' style={{ top: '5px', right: '0px' }}>
<span className='invisible'>{' '}</span> <span className='invisible'>{' '}</span>
</span>} </span>}
{me && !me.bio &&
<span className='position-absolute p-1 bg-secondary' style={{ bottom: '5px', right: '0px' }}>
<span className='invisible'>{' '}</span>
</span>}
</div> </div>
{me && {me &&
<Nav.Item> <Nav.Item>
@ -116,7 +121,7 @@ export default function Header () {
</RefreshableLink> </RefreshableLink>
</Nav.Item> </Nav.Item>
<Nav.Item className='d-md-flex d-none'> <Nav.Item className='d-md-flex d-none'>
{session {me
? ( ? (
<Link href='/post' passHref> <Link href='/post' passHref>
<Nav.Link className={styles.navLink}>post</Nav.Link> <Nav.Link className={styles.navLink}>post</Nav.Link>

3
components/me.js
View File

@ -17,6 +17,9 @@ export function MeProvider ({ children }) {
freeComments freeComments
hasNewNotes hasNewNotes
tipDefault tipDefault
bio {
id
}
} }
}` }`
const { data } = useQuery(query, { pollInterval: 1000 }) const { data } = useQuery(query, { pollInterval: 1000 })