chore: refactore profile section component
This commit is contained in:
daniyal
parent
9730fec14f
commit
a90e932ed6
@ -14,9 +14,11 @@ import '../styles/author.css'
|
|||||||
import '../styles/innerPage.css'
|
import '../styles/innerPage.css'
|
||||||
import '../styles/socialPosts.css'
|
import '../styles/socialPosts.css'
|
||||||
import { UserProfile } from '../types'
|
import { UserProfile } from '../types'
|
||||||
import { copyTextToClipboard, log, LogType, now } from '../utils'
|
import { copyTextToClipboard, log, LogType, now, npubToHex } from '../utils'
|
||||||
import { LoadingSpinner } from './LoadingSpinner'
|
import { LoadingSpinner } from './LoadingSpinner'
|
||||||
import { ZapPopUp } from './Zap'
|
import { ZapPopUp } from './Zap'
|
||||||
|
import { NDKUserProfile } from '@nostr-dev-kit/ndk'
|
||||||
|
import _ from 'lodash'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
pubkey: string
|
pubkey: string
|
||||||
@ -32,106 +34,13 @@ export const ProfileSection = ({ pubkey }: Props) => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleCopy = async () => {
|
|
||||||
copyTextToClipboard(profile?.npub as string).then((isCopied) => {
|
|
||||||
if (isCopied) {
|
|
||||||
toast.success('Npub copied to clipboard!')
|
|
||||||
} else {
|
|
||||||
toast.error(
|
|
||||||
'Failed to copy, look into console for more details on error!'
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!profile) return null
|
if (!profile) return null
|
||||||
|
|
||||||
const profileRoute = getProfilePageRoute(
|
|
||||||
nip19.nprofileEncode({
|
|
||||||
pubkey
|
|
||||||
})
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='IBMSMSplitMainSmallSide'>
|
<div className='IBMSMSplitMainSmallSide'>
|
||||||
<div className='IBMSMSplitMainSmallSideSecWrapper'>
|
<div className='IBMSMSplitMainSmallSideSecWrapper'>
|
||||||
<div className='IBMSMSplitMainSmallSideSec'>
|
<div className='IBMSMSplitMainSmallSideSec'>
|
||||||
<div className='IBMSMSMSSS_Author'>
|
<Profile profile={profile} />
|
||||||
<div className='IBMSMSMSSS_Author_Top'>
|
|
||||||
<div className='IBMSMSMSSS_Author_Top_Left'>
|
|
||||||
<Link
|
|
||||||
className='IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper'
|
|
||||||
to={profileRoute}
|
|
||||||
>
|
|
||||||
<div className='IBMSMSMSSS_Author_Top_Left_Inside'>
|
|
||||||
<div className='IBMSMSMSSS_Author_Top_Left_InsidePic'>
|
|
||||||
<div className='IBMSMSMSSS_Author_Top_PPWrapper'>
|
|
||||||
<div
|
|
||||||
className='IBMSMSMSSS_Author_Top_PP'
|
|
||||||
style={{
|
|
||||||
background: `url('${
|
|
||||||
profile.image || ''
|
|
||||||
}') center / cover no-repeat`
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMSSS_Author_Top_Left_InsideDetails'>
|
|
||||||
<div className='IBMSMSMSSS_Author_TopWrapper'>
|
|
||||||
<p className='IBMSMSMSSS_Author_Top_Name'>
|
|
||||||
{profile.displayName || profile.name || ''}
|
|
||||||
</p>
|
|
||||||
<p className='IBMSMSMSSS_Author_Top_Handle'>
|
|
||||||
{profile.nip05 || ''}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
<div className='IBMSMSMSSS_Author_Top_AddressWrapper'>
|
|
||||||
<div className='IBMSMSMSSS_Author_Top_AddressWrapped'>
|
|
||||||
<p
|
|
||||||
id='SiteOwnerAddress'
|
|
||||||
className='IBMSMSMSSS_Author_Top_Address'
|
|
||||||
>
|
|
||||||
{profile.npub}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMSSS_Author_Top_IconWrapper'>
|
|
||||||
<div
|
|
||||||
id='copySiteOwnerAddress'
|
|
||||||
className='IBMSMSMSSS_Author_Top_IconWrapped'
|
|
||||||
onClick={handleCopy}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
|
||||||
viewBox='0 0 512 512'
|
|
||||||
width='1em'
|
|
||||||
height='1em'
|
|
||||||
fill='currentColor'
|
|
||||||
className='IBMSMSMSSS_Author_Top_Icon'
|
|
||||||
>
|
|
||||||
<path d='M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z'></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<QRButtonWithPopUp pubkey={profile.pubkey as string} />
|
|
||||||
<ZapButtonWithPopUp pubkey={profile.pubkey as string} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMSSS_Author_Top_Details'>
|
|
||||||
<p className='IBMSMSMSSS_Author_Top_Bio'>
|
|
||||||
{profile.bio || profile.about}
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
id='OwnerFollowLogin'
|
|
||||||
className='IBMSMSMSSS_Author_Top_NostrLinks'
|
|
||||||
style={{ display: 'flex' }}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<FollowButton pubkey={pubkey} />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className='IBMSMSplitMainSmallSideSec'>
|
<div className='IBMSMSplitMainSmallSideSec'>
|
||||||
<div className='IBMSMSMSSS_ShortPosts'>
|
<div className='IBMSMSMSSS_ShortPosts'>
|
||||||
@ -181,6 +90,117 @@ export const ProfileSection = ({ pubkey }: Props) => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type ProfileProps = {
|
||||||
|
profile: NDKUserProfile
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Profile = ({ profile }: ProfileProps) => {
|
||||||
|
const handleCopy = async () => {
|
||||||
|
copyTextToClipboard(profile.npub as string).then((isCopied) => {
|
||||||
|
if (isCopied) {
|
||||||
|
toast.success('Npub copied to clipboard!')
|
||||||
|
} else {
|
||||||
|
toast.error(
|
||||||
|
'Failed to copy, look into console for more details on error!'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const hexPubkey = npubToHex(profile.pubkey as string)
|
||||||
|
|
||||||
|
if (!hexPubkey) return null
|
||||||
|
|
||||||
|
const profileRoute = getProfilePageRoute(
|
||||||
|
nip19.nprofileEncode({
|
||||||
|
pubkey: hexPubkey
|
||||||
|
})
|
||||||
|
)
|
||||||
|
|
||||||
|
const npub = (profile.npub as string) || ''
|
||||||
|
const displayName =
|
||||||
|
profile.displayName ||
|
||||||
|
profile.name ||
|
||||||
|
_.truncate(npub, {
|
||||||
|
length: 16
|
||||||
|
})
|
||||||
|
const nip05 = profile.nip05 || ''
|
||||||
|
const about = profile.bio || profile.about || ''
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='IBMSMSMSSS_Author'>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top'>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_Left'>
|
||||||
|
<Link
|
||||||
|
className='IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper'
|
||||||
|
to={profileRoute}
|
||||||
|
>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_Left_Inside'>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_Left_InsidePic'>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_PPWrapper'>
|
||||||
|
<div
|
||||||
|
className='IBMSMSMSSS_Author_Top_PP'
|
||||||
|
style={{
|
||||||
|
background: `url('${
|
||||||
|
profile.image || ''
|
||||||
|
}') center / cover no-repeat`
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_Left_InsideDetails'>
|
||||||
|
<div className='IBMSMSMSSS_Author_TopWrapper'>
|
||||||
|
<p className='IBMSMSMSSS_Author_Top_Name'>{displayName}</p>
|
||||||
|
<p className='IBMSMSMSSS_Author_Top_Handle'>{nip05}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_AddressWrapper'>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_AddressWrapped'>
|
||||||
|
<p
|
||||||
|
id='SiteOwnerAddress'
|
||||||
|
className='IBMSMSMSSS_Author_Top_Address'
|
||||||
|
>
|
||||||
|
{npub}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_IconWrapper'>
|
||||||
|
<div
|
||||||
|
id='copySiteOwnerAddress'
|
||||||
|
className='IBMSMSMSSS_Author_Top_IconWrapped'
|
||||||
|
onClick={handleCopy}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='0 0 512 512'
|
||||||
|
width='1em'
|
||||||
|
height='1em'
|
||||||
|
fill='currentColor'
|
||||||
|
className='IBMSMSMSSS_Author_Top_Icon'
|
||||||
|
>
|
||||||
|
<path d='M384 96L384 0h-112c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48H464c26.51 0 48-21.49 48-48V128h-95.1C398.4 128 384 113.6 384 96zM416 0v96h96L416 0zM192 352V128h-144c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h192c26.51 0 48-21.49 48-48L288 416h-32C220.7 416 192 387.3 192 352z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<QRButtonWithPopUp pubkey={hexPubkey} />
|
||||||
|
<ZapButtonWithPopUp pubkey={hexPubkey} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMSSS_Author_Top_Details'>
|
||||||
|
<p className='IBMSMSMSSS_Author_Top_Bio'>{about}</p>
|
||||||
|
<div
|
||||||
|
id='OwnerFollowLogin'
|
||||||
|
className='IBMSMSMSSS_Author_Top_NostrLinks'
|
||||||
|
style={{ display: 'flex' }}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<FollowButton pubkey={hexPubkey} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
interface Post {
|
interface Post {
|
||||||
name: string
|
name: string
|
||||||
link: string
|
link: string
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user