import Button from 'react-bootstrap/Button' import InputGroup from 'react-bootstrap/InputGroup' import Image from 'react-bootstrap/Image' import Link from 'next/link' import { useRouter } from 'next/router' import Nav from 'react-bootstrap/Nav' import { useState } from 'react' import { Form, Input, SubmitButton } from './form' import { gql, useApolloClient, useMutation } from '@apollo/client' import styles from './user-header.module.css' import { useMe } from './me' import { NAME_MUTATION } from '../fragments/users' import QRCode from 'qrcode.react' import LightningIcon from '../svgs/bolt.svg' import { encodeLNUrl } from '../lib/lnurl' import Avatar from './avatar' import { userSchema } from '../lib/validate' import { useShowModal } from './modal' import { numWithUnits } from '../lib/format' import Hat from './hat' import SubscribeUserDropdownItem from './subscribeUser' import ActionDropdown from './action-dropdown' import CodeIcon from '../svgs/terminal-box-fill.svg' import MuteDropdownItem from './mute' import copy from 'clipboard-copy' import { useToast } from './toast' import { hexToBech32 } from '../lib/nostr' import NostrIcon from '../svgs/nostr.svg' import GithubIcon from '../svgs/github-fill.svg' import TwitterIcon from '../svgs/twitter-fill.svg' export default function UserHeader ({ user }) { const router = useRouter() const pathParts = router.asPath.split('/') const activeKey = pathParts[2] === 'territories' ? 'territories' : pathParts.length === 2 ? 'bio' : 'items' const showTerritoriesTab = activeKey === 'territories' || user.nterritories > 0 return ( <> ) } function HeaderPhoto ({ user, isMe }) { const [setPhoto] = useMutation( gql` mutation setPhoto($photoId: ID!) { setPhoto(photoId: $photoId) }`, { update (cache, { data: { setPhoto } }) { cache.modify({ id: `User:${user.id}`, fields: { photoId () { return setPhoto } } }) } } ) const src = user.photoId ? `https://${process.env.NEXT_PUBLIC_MEDIA_DOMAIN}/${user.photoId}` : '/dorian400.jpg' return (
{isMe && { const { error } = await setPhoto({ variables: { photoId } }) if (error) { console.log(error) } }} />}
) } function NymEdit ({ user, setEditting }) { const router = useRouter() const [setName] = useMutation(NAME_MUTATION, { update (cache, { data: { setName } }) { cache.modify({ id: `User:${user.id}`, fields: { name () { return setName } } }) } }) const client = useApolloClient() const schema = userSchema({ client }) return (
{ if (name === user.name) { setEditting(false) return } const { error } = await setName({ variables: { name } }) if (error) { throw new Error({ message: error.toString() }) } setEditting(false) // navigate to new name const { nodata, ...query } = router.query router.replace({ pathname: router.pathname, query: { ...query, name } }, undefined, { shallow: true }) }} >
@ name='name' autoFocus groupClassName={styles.usernameForm} showValid debounce={500} /> setEditting(true)}>save
) } function NymView ({ user, isMe, setEditting }) { const me = useMe() return (
@{user.name}
{isMe && } {!isMe && me &&
}
) } function HeaderNym ({ user, isMe }) { const [editting, setEditting] = useState(false) return editting ? : } function SocialLink ({ name, id }) { const className = `${styles.social} text-reset` if (name === 'Nostr') { const npub = hexToBech32(id) return ( {npub.slice(0, 10)}...{npub.slice(-10)} ) } else if (name === 'Github') { return ( {id} ) } else if (name === 'Twitter') { return ( @{id} ) } } function HeaderHeader ({ user }) { const me = useMe() const showModal = useShowModal() const toaster = useToast() const isMe = me?.name === user.name const Satistics = () => ( user.optional.stacked !== null &&
{numWithUnits(user.optional.stacked, { abbreviate: false, format: true })} stacked
) const lnurlp = encodeLNUrl(new URL(`https://stacker.news/.well-known/lnurlp/${user.name}`)) return (
stacking since: {user.since ? #{user.since} : never} {user.optional.maxStreak !== null && longest cowboy streak: {user.optional.maxStreak}} {user.optional.isContributor && verified stacker.news contributor } {user.optional.nostrAuthPubkey && } {user.optional.githubId && } {user.optional.twitterId && }
) }