degmods/degmods.com
5
0
Fork 0
Code Issues 14 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: display profile box even if user does not have metadata
All checks were successful
Release to Staging / build_and_release (push) Successful in 46s
Details

Browse Source
This commit is contained in:
daniyal 2024-09-25 20:55:48 +05:00
parent 37457128c5
commit 8608765e79
3 changed files with 71 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/ProfileSection.tsx
View File

@ -1,3 +1,4 @@
import { FALLBACK_PROFILE_IMAGE } from 'constants.ts'
import { Event, Filter, kinds, nip19, UnsignedEvent } from 'nostr-tools'
import { QRCodeSVG } from 'qrcode.react'
import { useState } from 'react'
@ -9,16 +10,21 @@ import {
UserRelaysType
} from '../controllers'
import { useAppSelector, useDidMount } from '../hooks'
import { getProfilePageRoute } from '../routes'
import { appRoutes, getProfilePageRoute } from '../routes'
import '../styles/author.css'
import '../styles/innerPage.css'
import '../styles/socialPosts.css'
import { UserProfile } from '../types'
import { copyTextToClipboard, log, LogType, now, npubToHex } from '../utils'
import {
copyTextToClipboard,
hexToNpub,
log,
LogType,
now,
npubToHex
} from '../utils'
import { LoadingSpinner } from './LoadingSpinner'
import { ZapPopUp } from './Zap'
import { NDKUserProfile } from '@nostr-dev-kit/ndk'
import _ from 'lodash'
type Props = {
pubkey: string
@ -34,13 +40,22 @@ export const ProfileSection = ({ pubkey }: Props) => {
})
})
if (!profile) return null
const displayName =
profile?.displayName || profile?.name || '[name not set up]'
const about = profile?.bio || profile?.about || '[bio not set up]'
return (
<div className='IBMSMSplitMainSmallSide'>
<div className='IBMSMSplitMainSmallSideSecWrapper'>
<div className='IBMSMSplitMainSmallSideSec'>
<Profile profile={profile} />
<Profile
pubkey={pubkey}
displayName={displayName}
about={about}
image={profile?.image}
nip05={profile?.nip05}
lud16={profile?.lud16}
/>
</div>
<div className='IBMSMSplitMainSmallSideSec'>
<div className='IBMSMSMSSS_ShortPosts'>
@ -91,12 +106,26 @@ export const ProfileSection = ({ pubkey }: Props) => {
}
type ProfileProps = {
profile: NDKUserProfile
pubkey: string
displayName: string
about: string
image?: string
nip05?: string
lud16?: string
}
export const Profile = ({ profile }: ProfileProps) => {
export const Profile = ({
pubkey,
displayName,
about,
image,
nip05,
lud16
}: ProfileProps) => {
const npub = hexToNpub(pubkey)
const handleCopy = async () => {
copyTextToClipboard(profile.npub as string).then((isCopied) => {
copyTextToClipboard(npub).then((isCopied) => {
if (isCopied) {
toast.success('Npub copied to clipboard!')
} else {
@ -107,25 +136,15 @@ export const Profile = ({ profile }: ProfileProps) => {
})
}
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 || ''
let profileRoute = appRoutes.home
const hexPubkey = npubToHex(pubkey)
if (hexPubkey) {
profileRoute = getProfilePageRoute(
nip19.nprofileEncode({
pubkey: hexPubkey
})
)
}
return (
<div className='IBMSMSMSSS_Author'>
@ -142,7 +161,7 @@ export const Profile = ({ profile }: ProfileProps) => {
className='IBMSMSMSSS_Author_Top_PP'
style={{
background: `url('${
profile.image || ''
image || FALLBACK_PROFILE_IMAGE
}') center / cover no-repeat`
}}
></div>
@ -151,7 +170,9 @@ export const Profile = ({ profile }: ProfileProps) => {
<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>
{nip05 && (
<p className='IBMSMSMSSS_Author_Top_Handle'>{nip05}</p>
)}
</div>
</div>
</div>
@ -182,8 +203,8 @@ export const Profile = ({ profile }: ProfileProps) => {
<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>
<ProfileQRButtonWithPopUp pubkey={hexPubkey} />
<ZapButtonWithPopUp pubkey={hexPubkey} />
<ProfileQRButtonWithPopUp pubkey={pubkey} />
{lud16 && <ZapButtonWithPopUp pubkey={pubkey} />}
</div>
</div>
</div>
@ -196,7 +217,7 @@ export const Profile = ({ profile }: ProfileProps) => {
></div>
</div>
</div>
<FollowButton pubkey={hexPubkey} />
<FollowButton pubkey={pubkey} />
</div>
)
}

6
src/constants.ts
View File

@ -15,7 +15,7 @@ export const LANDING_PAGE_DATA = {
],
featuredGames: [
'Persona 3 Reload',
'Baldur\'s Gate 3',
"Baldur's Gate 3",
'Cyberpunk 2077',
'ELDEN RING',
'FINAL FANTASY VII REMAKE INTERGRADE'
@ -119,3 +119,7 @@ export const GAME_FILES = [
export const MAX_MODS_PER_PAGE = 10
export const MAX_GAMES_PER_PAGE = 10
// todo: add game and mod fallback image here
export const FALLBACK_PROFILE_IMAGE =
'https://image.nostr.build/a305f4b43f74af3c6dcda42e6a798105a56ac1e3e7b74d7bef171896b3ba7520.png'

13
src/pages/search.tsx
View File

@ -552,9 +552,20 @@ const UsersResult = ({
<div className='IBMSMList'>
{filteredProfiles.map((profile) => {
if (profile.pubkey) {
const displayName =
profile?.displayName || profile?.name || '[name not set up]'
const about = profile?.bio || profile?.about || '[bio not set up]'
return (
<ErrorBoundary key={profile.pubkey}>
<Profile profile={profile} />
<Profile
pubkey={profile.pubkey as string}
displayName={displayName}
about={about}
image={profile?.image}
nip05={profile?.nip05}
lud16={profile?.lud16}
/>
</ErrorBoundary>
)
}