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/author.css'
|
||||||
import '../styles/innerPage.css'
|
import '../styles/innerPage.css'
|
||||||
import '../styles/socialPosts.css'
|
import '../styles/socialPosts.css'
|
||||||
import { UserProfile, UserRelaysType } from '../types'
|
import { UserRelaysType } from '../types'
|
||||||
import {
|
import {
|
||||||
copyTextToClipboard,
|
copyTextToClipboard,
|
||||||
hexToNpub,
|
hexToNpub,
|
||||||
@ -27,37 +27,18 @@ import { LoadingSpinner } from './LoadingSpinner'
|
|||||||
import { ZapPopUp } from './Zap'
|
import { ZapPopUp } from './Zap'
|
||||||
import placeholder from '../assets/img/DEGMods Placeholder Img.png'
|
import placeholder from '../assets/img/DEGMods Placeholder Img.png'
|
||||||
import { NDKEvent } from '@nostr-dev-kit/ndk'
|
import { NDKEvent } from '@nostr-dev-kit/ndk'
|
||||||
|
import { useProfile } from 'hooks/useProfile'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
pubkey: string
|
pubkey: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export const ProfileSection = ({ pubkey }: Props) => {
|
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 (
|
return (
|
||||||
<div className='IBMSMSplitMainSmallSide'>
|
<div className='IBMSMSplitMainSmallSide'>
|
||||||
<div className='IBMSMSplitMainSmallSideSecWrapper'>
|
<div className='IBMSMSplitMainSmallSideSecWrapper'>
|
||||||
<div className='IBMSMSplitMainSmallSideSec'>
|
<div className='IBMSMSplitMainSmallSideSec'>
|
||||||
<Profile
|
<Profile pubkey={pubkey} />
|
||||||
pubkey={pubkey}
|
|
||||||
displayName={displayName}
|
|
||||||
about={about}
|
|
||||||
image={profile?.image}
|
|
||||||
nip05={profile?.nip05}
|
|
||||||
lud16={profile?.lud16}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div className='IBMSMSplitMainSmallSideSec'>
|
<div className='IBMSMSplitMainSmallSideSec'>
|
||||||
<div className='IBMSMSMSSS_ShortPosts'>
|
<div className='IBMSMSMSSS_ShortPosts'>
|
||||||
@ -109,21 +90,18 @@ export const ProfileSection = ({ pubkey }: Props) => {
|
|||||||
|
|
||||||
type ProfileProps = {
|
type ProfileProps = {
|
||||||
pubkey: string
|
pubkey: string
|
||||||
displayName: string
|
|
||||||
about: string
|
|
||||||
image?: string
|
|
||||||
nip05?: string
|
|
||||||
lud16?: string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Profile = ({
|
export const Profile = ({ pubkey }: ProfileProps) => {
|
||||||
pubkey,
|
const profile = useProfile(pubkey)
|
||||||
displayName,
|
|
||||||
about,
|
const displayName =
|
||||||
image,
|
profile?.displayName || profile?.name || '[name not set up]'
|
||||||
nip05,
|
const about = profile?.bio || profile?.about || '[bio not set up]'
|
||||||
lud16
|
const image = profile?.image || FALLBACK_PROFILE_IMAGE
|
||||||
}: ProfileProps) => {
|
const nip05 = profile?.nip05
|
||||||
|
const lud16 = profile?.lud16
|
||||||
|
|
||||||
const npub = hexToNpub(pubkey)
|
const npub = hexToNpub(pubkey)
|
||||||
|
|
||||||
const handleCopy = async () => {
|
const handleCopy = async () => {
|
||||||
@ -162,9 +140,7 @@ export const Profile = ({
|
|||||||
<div
|
<div
|
||||||
className='IBMSMSMSSS_Author_Top_PP'
|
className='IBMSMSMSSS_Author_Top_PP'
|
||||||
style={{
|
style={{
|
||||||
background: `url('${
|
background: `url('${image}') center / cover no-repeat`
|
||||||
image || FALLBACK_PROFILE_IMAGE
|
|
||||||
}') center / cover no-repeat`
|
|
||||||
}}
|
}}
|
||||||
></div>
|
></div>
|
||||||
</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 { MOD_FILTER_LIMIT } from '../constants'
|
||||||
import {
|
import {
|
||||||
useAppSelector,
|
useAppSelector,
|
||||||
useDidMount,
|
|
||||||
useFilteredMods,
|
useFilteredMods,
|
||||||
useMuteLists,
|
useMuteLists,
|
||||||
useNDKContext,
|
useNDKContext,
|
||||||
@ -25,7 +24,6 @@ import {
|
|||||||
ModeratedFilter,
|
ModeratedFilter,
|
||||||
NSFWFilter,
|
NSFWFilter,
|
||||||
SortBy,
|
SortBy,
|
||||||
UserProfile,
|
|
||||||
UserRelaysType
|
UserRelaysType
|
||||||
} from 'types'
|
} from 'types'
|
||||||
import {
|
import {
|
||||||
@ -37,6 +35,7 @@ import {
|
|||||||
signAndPublish
|
signAndPublish
|
||||||
} from 'utils'
|
} from 'utils'
|
||||||
import { CheckboxField } from 'components/Inputs'
|
import { CheckboxField } from 'components/Inputs'
|
||||||
|
import { useProfile } from 'hooks/useProfile'
|
||||||
|
|
||||||
export const ProfilePage = () => {
|
export const ProfilePage = () => {
|
||||||
// Try to decode nprofile parameter
|
// Try to decode nprofile parameter
|
||||||
@ -53,22 +52,14 @@ export const ProfilePage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const scrollTargetRef = useRef<HTMLDivElement>(null)
|
const scrollTargetRef = useRef<HTMLDivElement>(null)
|
||||||
const { ndk, publish, findMetadata, fetchEventFromUserRelays, fetchMods } =
|
const { ndk, publish, fetchEventFromUserRelays, fetchMods } = useNDKContext()
|
||||||
useNDKContext()
|
|
||||||
const [profile, setProfile] = useState<UserProfile>()
|
|
||||||
const userState = useAppSelector((state) => state.user)
|
const userState = useAppSelector((state) => state.user)
|
||||||
const isOwnProfile =
|
const isOwnProfile =
|
||||||
userState.auth && userState.user?.pubkey === profilePubkey
|
userState.auth && userState.user?.pubkey === profilePubkey
|
||||||
const [isLoading, setIsLoading] = useState(false)
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
||||||
|
|
||||||
useDidMount(() => {
|
const profile = useProfile(profilePubkey)
|
||||||
if (profilePubkey) {
|
|
||||||
findMetadata(profilePubkey).then((res) => {
|
|
||||||
setProfile(res)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const displayName =
|
const displayName =
|
||||||
profile?.displayName || profile?.name || '[name not set up]'
|
profile?.displayName || profile?.name || '[name not set up]'
|
||||||
|
@ -455,20 +455,9 @@ const UsersResult = ({
|
|||||||
<div className='IBMSMList'>
|
<div className='IBMSMList'>
|
||||||
{filteredProfiles.map((profile) => {
|
{filteredProfiles.map((profile) => {
|
||||||
if (profile.pubkey) {
|
if (profile.pubkey) {
|
||||||
const displayName =
|
|
||||||
profile?.displayName || profile?.name || '[name not set up]'
|
|
||||||
const about = profile?.bio || profile?.about || '[bio not set up]'
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ErrorBoundary key={profile.pubkey}>
|
<ErrorBoundary key={profile.pubkey}>
|
||||||
<Profile
|
<Profile pubkey={profile.pubkey as string} />
|
||||||
pubkey={profile.pubkey as string}
|
|
||||||
displayName={displayName}
|
|
||||||
about={about}
|
|
||||||
image={profile?.image}
|
|
||||||
nip05={profile?.nip05}
|
|
||||||
lud16={profile?.lud16}
|
|
||||||
/>
|
|
||||||
</ErrorBoundary>
|
</ErrorBoundary>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user