import { Button } from 'react-bootstrap' import { useSession } from 'next-auth/client' 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 InputGroup from 'react-bootstrap/InputGroup' import * as Yup from 'yup' import { gql, useApolloClient, useMutation } from '@apollo/client' import styles from './user-header.module.css' const NAME_QUERY = gql` query nameAvailable($name: String!) { nameAvailable(name: $name) } ` const NAME_MUTATION = gql` mutation setName($name: String!) { setName(name: $name) } ` export default function UserHeader ({ user }) { const [editting, setEditting] = useState(false) const [session] = useSession() const router = useRouter() const client = useApolloClient() const [setName] = useMutation(NAME_MUTATION) const Satistics = () =>

{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 } }) return data.nameAvailable }, message: 'taken' }) }) return ( <> {editting ? (
{ if (name === user.name) { setEditting(false) return } const { error } = await setName({ variables: { name } }) if (error) { throw new Error({ message: error.toString() }) } window.location = `/${name}` }} > @ name='name' autoFocus groupClassName={`mb-0 ${styles.username}`} showValid /> setEditting(true)}>save ) : (

@{user.name}

{session && session.user && session.user.name === user.name && }
)} ) }