fix(profile): rerender after profile link changes
All checks were successful
Release to Staging / build_and_release (push) Successful in 41s

Add useProfile hook, closes #99
This commit is contained in:
enes 2024-10-28 12:43:26 +01:00
parent 9341cd6544
commit 3906c70bc9
4 changed files with 36 additions and 62 deletions

View File

@ -14,7 +14,7 @@ import { appRoutes, getProfilePageRoute } from '../routes'
import '../styles/author.css'
import '../styles/innerPage.css'
import '../styles/socialPosts.css'
import { UserProfile, UserRelaysType } from '../types'
import { UserRelaysType } from '../types'
import {
copyTextToClipboard,
hexToNpub,
@ -27,37 +27,18 @@ import { LoadingSpinner } from './LoadingSpinner'
import { ZapPopUp } from './Zap'
import placeholder from '../assets/img/DEGMods Placeholder Img.png'
import { NDKEvent } from '@nostr-dev-kit/ndk'
import { useProfile } from 'hooks/useProfile'
type Props = {
pubkey: string
}
export const ProfileSection = ({ pubkey }: Props) => {
const { findMetadata } = useNDKContext()
const [profile, setProfile] = useState<UserProfile>()
useDidMount(() => {
findMetadata(pubkey).then((res) => {
setProfile(res)
})
})
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
pubkey={pubkey}
displayName={displayName}
about={about}
image={profile?.image}
nip05={profile?.nip05}
lud16={profile?.lud16}
/>
<Profile pubkey={pubkey} />
</div>
<div className='IBMSMSplitMainSmallSideSec'>
<div className='IBMSMSMSSS_ShortPosts'>
@ -109,21 +90,18 @@ export const ProfileSection = ({ pubkey }: Props) => {
type ProfileProps = {
pubkey: string
displayName: string
about: string
image?: string
nip05?: string
lud16?: string
}
export const Profile = ({
pubkey,
displayName,
about,
image,
nip05,
lud16
}: ProfileProps) => {
export const Profile = ({ pubkey }: ProfileProps) => {
const profile = useProfile(pubkey)
const displayName =
profile?.displayName || profile?.name || '[name not set up]'
const about = profile?.bio || profile?.about || '[bio not set up]'
const image = profile?.image || FALLBACK_PROFILE_IMAGE
const nip05 = profile?.nip05
const lud16 = profile?.lud16
const npub = hexToNpub(pubkey)
const handleCopy = async () => {
@ -162,9 +140,7 @@ export const Profile = ({
<div
className='IBMSMSMSSS_Author_Top_PP'
style={{
background: `url('${
image || FALLBACK_PROFILE_IMAGE
}') center / cover no-repeat`
background: `url('${image}') center / cover no-repeat`
}}
></div>
</div>

18
src/hooks/useProfile.tsx Normal file
View File

@ -0,0 +1,18 @@
import { useNDKContext } from 'hooks'
import { useState, useEffect } from 'react'
import { UserProfile } from 'types'
export const useProfile = (pubkey?: string) => {
const { findMetadata } = useNDKContext()
const [profile, setProfile] = useState<UserProfile>()
useEffect(() => {
if (pubkey) {
findMetadata(pubkey).then((res) => {
setProfile(res)
})
}
}, [findMetadata, pubkey])
return profile
}

View File

@ -8,7 +8,6 @@ import { Tabs } from 'components/Tabs'
import { MOD_FILTER_LIMIT } from '../constants'
import {
useAppSelector,
useDidMount,
useFilteredMods,
useMuteLists,
useNDKContext,
@ -25,7 +24,6 @@ import {
ModeratedFilter,
NSFWFilter,
SortBy,
UserProfile,
UserRelaysType
} from 'types'
import {
@ -37,6 +35,7 @@ import {
signAndPublish
} from 'utils'
import { CheckboxField } from 'components/Inputs'
import { useProfile } from 'hooks/useProfile'
export const ProfilePage = () => {
// Try to decode nprofile parameter
@ -53,22 +52,14 @@ export const ProfilePage = () => {
}
const scrollTargetRef = useRef<HTMLDivElement>(null)
const { ndk, publish, findMetadata, fetchEventFromUserRelays, fetchMods } =
useNDKContext()
const [profile, setProfile] = useState<UserProfile>()
const { ndk, publish, fetchEventFromUserRelays, fetchMods } = useNDKContext()
const userState = useAppSelector((state) => state.user)
const isOwnProfile =
userState.auth && userState.user?.pubkey === profilePubkey
const [isLoading, setIsLoading] = useState(false)
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
useDidMount(() => {
if (profilePubkey) {
findMetadata(profilePubkey).then((res) => {
setProfile(res)
})
}
})
const profile = useProfile(profilePubkey)
const displayName =
profile?.displayName || profile?.name || '[name not set up]'

View File

@ -455,20 +455,9 @@ 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
pubkey={profile.pubkey as string}
displayName={displayName}
about={about}
image={profile?.image}
nip05={profile?.nip05}
lud16={profile?.lud16}
/>
<Profile pubkey={profile.pubkey as string} />
</ErrorBoundary>
)
}