WIP profiles

This commit is contained in:
keyan 2022-04-27 14:04:00 -05:00
parent 9f48daecc3
commit 4ba1227605
3 changed files with 83 additions and 54 deletions

View File

@ -10,6 +10,9 @@ 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 Image from 'next/image'
import QRCode from 'qrcode.react'
import LightningIcon from '../svgs/bolt.svg'
export default function UserHeader ({ user }) {
const [editting, setEditting] = useState(false)
@ -19,7 +22,7 @@ export default function UserHeader ({ user }) {
const [setName] = useMutation(NAME_MUTATION)
const isMe = me?.name === user.name
const Satistics = () => <h1 className='mb-0'><small className='text-success'>{isMe ? `${user.sats} sats \\ ` : ''}{user.stacked} stacked</small></h1>
const Satistics = () => <div className={`mb-4 ${styles.username} text-success`}>{isMe ? `${user.sats} sats \\ ` : ''}{user.stacked} stacked</div>
const UserSchema = Yup.object({
name: Yup.string()
@ -39,64 +42,78 @@ export default function UserHeader ({ user }) {
return (
<>
<div>
{editting
? (
<Form
schema={UserSchema}
initial={{
name: user.name
}}
validateImmediately
onSubmit={async ({ name }) => {
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 }
})
<div className='d-flex align-items-center mt-2 flex-wrap'>
<Image
src='/dorian400.jpg' width='200' height='166' layout='fixed'
className={styles.userimg}
/>
<div className='ml-3'>
{editting
? (
<Form
schema={UserSchema}
initial={{
name: user.name
}}
validateImmediately
onSubmit={async ({ name }) => {
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`
client.writeFragment({
id: `User:${user.id}`,
fragment: gql`
fragment CurUser on User {
name
}
`,
data: {
name
}
})
data: {
name
}
})
setEditting(false)
}}
>
<div className='d-flex align-items-center'>
<Input
prepend=<InputGroup.Text>@</InputGroup.Text>
name='name'
autoFocus
groupClassName={`mb-0 ${styles.username}`}
showValid
/>
<SubmitButton variant='link' onClick={() => setEditting(true)}>save</SubmitButton>
setEditting(false)
}}
>
<div className='d-flex align-items-center mb-1'>
<Input
prepend=<InputGroup.Text>@</InputGroup.Text>
name='name'
autoFocus
groupClassName={styles.usernameForm}
showValid
/>
<SubmitButton variant='link' onClick={() => setEditting(true)}>save</SubmitButton>
</div>
</Form>
)
: (
<div className='d-flex align-items-center mb-1'>
<div className={styles.username}>@{user.name}</div>
{isMe &&
<Button className='py-0' variant='link' onClick={() => setEditting(true)}>edit nym</Button>}
</div>
</Form>
)
: (
<div className='d-flex align-items-center'>
<h2 className='mb-0'>@{user.name}</h2>
{isMe &&
<Button variant='link' onClick={() => setEditting(true)}>edit nym</Button>}
</div>
)}
<Satistics user={user} />
)}
<Satistics user={user} />
<Button className='font-weight-bold'>
<LightningIcon
width={20}
height={20}
className='mr-1'
/>{user.name}@stacker.news
</Button>
</div>
<QRCode className='ml-auto' value='fdsajfkldsajlkfjdlksajfkldjsalkjfdklsa' renderAs='svg' size={166} />
</div>
<Nav
className={styles.nav}

View File

@ -1,5 +1,6 @@
.username {
.usernameForm {
width: 300px;
margin-bottom: 0;
}
.nav {
@ -13,4 +14,15 @@
.nav div:last-child a {
padding-right: 0;
}
}
.userimg {
clip-path: polygon(0% 0%, 83% 0%, 100% 100%, 17% 100%);
object-fit: cover;
}
.username {
font-weight: bold;
font-size: 150%;
line-height: 1.25rem;
}

BIN
public/dorian400.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB