chore: refactore profile section component

src/components/ProfileSection.tsx

@@ -14,9 +14,11 @@ import '../styles/author.css'
 import '../styles/innerPage.css'
 import '../styles/socialPosts.css'
 import { UserProfile } from '../types'
-import { copyTextToClipboard, log, LogType, now } from '../utils'
+import { copyTextToClipboard, 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
@@ -32,106 +34,13 @@ export const ProfileSection = ({ pubkey }: Props) => {
     })
   })
 
-  const handleCopy = async () => {
-    copyTextToClipboard(profile?.npub as string).then((isCopied) => {
-      if (isCopied) {
-        toast.success('Npub copied to clipboard!')
-      } else {
-        toast.error(
-          'Failed to copy, look into console for more details on error!'
-        )
-      }
-    })
-  }
-
   if (!profile) return null
 
-  const profileRoute = getProfilePageRoute(
-    nip19.nprofileEncode({
-      pubkey
-    })
-  )
-
   return (
     <div className='IBMSMSplitMainSmallSide'>
       <div className='IBMSMSplitMainSmallSideSecWrapper'>
         <div className='IBMSMSplitMainSmallSideSec'>
-          <div className='IBMSMSMSSS_Author'>
-            <div className='IBMSMSMSSS_Author_Top'>
-              <div className='IBMSMSMSSS_Author_Top_Left'>
-                <Link
-                  className='IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper'
-                  to={profileRoute}
-                >
-                  <div className='IBMSMSMSSS_Author_Top_Left_Inside'>
-                    <div className='IBMSMSMSSS_Author_Top_Left_InsidePic'>
-                      <div className='IBMSMSMSSS_Author_Top_PPWrapper'>
-                        <div
-                          className='IBMSMSMSSS_Author_Top_PP'
-                          style={{
-                            background: `url('${
-                              profile.image || ''
-                            }') center / cover no-repeat`
-                          }}
-                        ></div>
-                      </div>
-                    </div>
-                    <div className='IBMSMSMSSS_Author_Top_Left_InsideDetails'>
-                      <div className='IBMSMSMSSS_Author_TopWrapper'>
-                        <p className='IBMSMSMSSS_Author_Top_Name'>
-                          {profile.displayName || profile.name || ''}
-                        </p>
-                        <p className='IBMSMSMSSS_Author_Top_Handle'>
-                          {profile.nip05 || ''}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </Link>
-                <div className='IBMSMSMSSS_Author_Top_AddressWrapper'>
-                  <div className='IBMSMSMSSS_Author_Top_AddressWrapped'>
-                    <p
-                      id='SiteOwnerAddress'
-                      className='IBMSMSMSSS_Author_Top_Address'
-                    >
-                      {profile.npub}
-                    </p>
-                  </div>
-                  <div className='IBMSMSMSSS_Author_Top_IconWrapper'>
-                    <div
-                      id='copySiteOwnerAddress'
-                      className='IBMSMSMSSS_Author_Top_IconWrapped'
-                      onClick={handleCopy}
-                    >
-                      <svg
-                        xmlns='http://www.w3.org/2000/svg'
-                        viewBox='0 0 512 512'
-                        width='1em'
-                        height='1em'
-                        fill='currentColor'
-                        className='IBMSMSMSSS_Author_Top_Icon'
-                      >
-                        <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>
-                    <QRButtonWithPopUp pubkey={profile.pubkey as string} />
-                    <ZapButtonWithPopUp pubkey={profile.pubkey as string} />
-                  </div>
-                </div>
-              </div>
-              <div className='IBMSMSMSSS_Author_Top_Details'>
-                <p className='IBMSMSMSSS_Author_Top_Bio'>
-                  {profile.bio || profile.about}
-                </p>
-                <div
-                  id='OwnerFollowLogin'
-                  className='IBMSMSMSSS_Author_Top_NostrLinks'
-                  style={{ display: 'flex' }}
-                ></div>
-              </div>
-            </div>
-            <FollowButton pubkey={pubkey} />
-          </div>
+          <Profile profile={profile} />
         </div>
         <div className='IBMSMSplitMainSmallSideSec'>
           <div className='IBMSMSMSSS_ShortPosts'>
@@ -181,6 +90,117 @@ export const ProfileSection = ({ pubkey }: Props) => {
   )
 }
 
+type ProfileProps = {
+  profile: NDKUserProfile
+}
+
+export const Profile = ({ profile }: ProfileProps) => {
+  const handleCopy = async () => {
+    copyTextToClipboard(profile.npub as string).then((isCopied) => {
+      if (isCopied) {
+        toast.success('Npub copied to clipboard!')
+      } else {
+        toast.error(
+          'Failed to copy, look into console for more details on error!'
+        )
+      }
+    })
+  }
+
+  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 || ''
+
+  return (
+    <div className='IBMSMSMSSS_Author'>
+      <div className='IBMSMSMSSS_Author_Top'>
+        <div className='IBMSMSMSSS_Author_Top_Left'>
+          <Link
+            className='IBMSMSMSSS_Author_Top_Left_InsideLinkWrapper'
+            to={profileRoute}
+          >
+            <div className='IBMSMSMSSS_Author_Top_Left_Inside'>
+              <div className='IBMSMSMSSS_Author_Top_Left_InsidePic'>
+                <div className='IBMSMSMSSS_Author_Top_PPWrapper'>
+                  <div
+                    className='IBMSMSMSSS_Author_Top_PP'
+                    style={{
+                      background: `url('${
+                        profile.image || ''
+                      }') center / cover no-repeat`
+                    }}
+                  ></div>
+                </div>
+              </div>
+              <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>
+                </div>
+              </div>
+            </div>
+          </Link>
+          <div className='IBMSMSMSSS_Author_Top_AddressWrapper'>
+            <div className='IBMSMSMSSS_Author_Top_AddressWrapped'>
+              <p
+                id='SiteOwnerAddress'
+                className='IBMSMSMSSS_Author_Top_Address'
+              >
+                {npub}
+              </p>
+            </div>
+            <div className='IBMSMSMSSS_Author_Top_IconWrapper'>
+              <div
+                id='copySiteOwnerAddress'
+                className='IBMSMSMSSS_Author_Top_IconWrapped'
+                onClick={handleCopy}
+              >
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='0 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                  className='IBMSMSMSSS_Author_Top_Icon'
+                >
+                  <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>
+              <QRButtonWithPopUp pubkey={hexPubkey} />
+              <ZapButtonWithPopUp pubkey={hexPubkey} />
+            </div>
+          </div>
+        </div>
+        <div className='IBMSMSMSSS_Author_Top_Details'>
+          <p className='IBMSMSMSSS_Author_Top_Bio'>{about}</p>
+          <div
+            id='OwnerFollowLogin'
+            className='IBMSMSMSSS_Author_Top_NostrLinks'
+            style={{ display: 'flex' }}
+          ></div>
+        </div>
+      </div>
+      <FollowButton pubkey={hexPubkey} />
+    </div>
+  )
+}
+
 interface Post {
   name: string
   link: string