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' export default function UserHeader ({ user }) { const router = useRouter() 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 } } }) } } ) 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 HeaderHeader ({ user }) { const me = useMe() const showModal = useShowModal() const toaster = useToast() const isMe = me?.name === user.name const Satistics = () => (
{numWithUnits(user.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} longest cowboy streak: {user.maxStreak !== null ? user.maxStreak : 'none'} {user.isContributor && verified stacker.news contributor}
) }