fix(profile): rerender after profile link changes

Add useProfile hook, closes #99

src/components/ProfileSection.tsx

@@ -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
+          <Profile pubkey={pubkey} />
-            pubkey={pubkey}
-            displayName={displayName}
-            about={about}
-            image={profile?.image}
-            nip05={profile?.nip05}
-            lud16={profile?.lud16}
-          />
         </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 = ({
+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 handleCopy = async () => {
@@ -162,9 +140,7 @@ export const Profile = ({
                   <div
                     className='IBMSMSMSSS_Author_Top_PP'
                     style={{
-                      background: `url('${
+                      background: `url('${image}') center / cover no-repeat`
-                        image || FALLBACK_PROFILE_IMAGE
-                      }') center / cover no-repeat`
                     }}
                   ></div>
                 </div>

src/hooks/useProfile.tsx

@@ -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
+}

src/pages/profile.tsx

@@ -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 } =
+  const { ndk, publish, fetchEventFromUserRelays, fetchMods } = useNDKContext()
-    useNDKContext()
-  const [profile, setProfile] = useState<UserProfile>()
   const userState = useAppSelector((state) => state.user)
   const isOwnProfile =
     userState.auth && userState.user?.pubkey === profilePubkey
   const [isLoading, setIsLoading] = useState(false)
   const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
 
-  useDidMount(() => {
+  const profile = useProfile(profilePubkey)
-    if (profilePubkey) {
-      findMetadata(profilePubkey).then((res) => {
-        setProfile(res)
-      })
-    }
-  })
 
   const displayName =
     profile?.displayName || profile?.name || '[name not set up]'

src/pages/search.tsx

@@ -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
+                  <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>
               )
             }