import { Button, InputGroup, Image } from 'react-bootstrap' 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 ModalButton from './modal-button' import { encodeLNUrl } from '../lib/lnurl' import Avatar from './avatar' import CowboyHat from './cowboy-hat' import { userSchema } from '../lib/validate' export default function UserHeader ({ user }) { const [editting, setEditting] = useState(false) const me = useMe() const router = useRouter() const client = useApolloClient() const schema = userSchema(client) const [setName] = useMutation(NAME_MUTATION) 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 isMe = me?.name === user.name const Satistics = () =>
{isMe ? `${user.sats} sats \\ ` : ''}{user.stacked} stacked
const lnurlp = encodeLNUrl(new URL(`https://stacker.news/.well-known/lnurlp/${user.name}`)) return ( <>
{isMe && { const { error } = await setPhoto({ variables: { photoId } }) if (error) { console.log(error) } }} />}
{editting ? (
{ if (name === user.name) { setEditting(false) return } const { error } = await setName({ variables: { name } }) if (error) { throw new Error({ message: error.toString() }) } const { nodata, ...query } = router.query router.replace({ pathname: router.pathname, query: { ...query, name } }) client.writeFragment({ id: `User:${user.id}`, fragment: gql` fragment CurUser on User { name } `, data: { name } }) setEditting(false) }} >
@ name='name' autoFocus groupClassName={styles.usernameForm} showValid /> setEditting(true)}>save
) : (
@{user.name}
{isMe && }
)} {user.name}@stacker.news } >
click or scan
stacking since: {user.since ? #{user.since} : never}
) }