fix(profile): rerender after profile link changes
All checks were successful
Release to Staging / build_and_release (push) Successful in 41s
All checks were successful
Release to Staging / build_and_release (push) Successful in 41s
Add useProfile hook, closes #99
This commit is contained in:
parent
9341cd6544
commit
3906c70bc9
@ -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
18
src/hooks/useProfile.tsx
Normal 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
|
||||
}
|
@ -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]'
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user