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 * as Yup from 'yup' import { gql, useApolloClient, useMutation } from '@apollo/client' import styles from './user-header.module.css' import { useMe } from './me' import { NAME_MUTATION, NAME_QUERY } 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' export default function UserHeader ({ user }) { const [editting, setEditting] = useState(false) const me = useMe() const router = useRouter() const client = useApolloClient() 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 UserSchema = Yup.object({ name: Yup.string() .required('required') .matches(/^[\w_]+$/, 'only letters, numbers, and _') .max(32, 'too long') .test({ name: 'name', test: async name => { if (!name || !name.length) return false const { data } = await client.query({ query: NAME_QUERY, variables: { name }, fetchPolicy: 'network-only' }) return data.nameAvailable }, message: 'taken' }) }) 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() }) } router.replace({ pathname: router.pathname, query: { ...router.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
) }