codytseng
7 months ago
10 changed files with 257 additions and 187 deletions
@ -0,0 +1,191 @@ |
|||||||
|
import Collapsible from '@/components/Collapsible' |
||||||
|
import FollowButton from '@/components/FollowButton' |
||||||
|
import Nip05 from '@/components/Nip05' |
||||||
|
import NpubQrCode from '@/components/NpubQrCode' |
||||||
|
import ProfileAbout from '@/components/ProfileAbout' |
||||||
|
import ProfileBanner from '@/components/ProfileBanner' |
||||||
|
import ProfileOptions from '@/components/ProfileOptions' |
||||||
|
import ProfileZapButton from '@/components/ProfileZapButton' |
||||||
|
import PubkeyCopy from '@/components/PubkeyCopy' |
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' |
||||||
|
import { Button } from '@/components/ui/button' |
||||||
|
import { Skeleton } from '@/components/ui/skeleton' |
||||||
|
import { useFetchFollowings, useFetchProfile } from '@/hooks' |
||||||
|
import { toMuteList, toProfileEditor } from '@/lib/link' |
||||||
|
import { generateImageByPubkey } from '@/lib/pubkey' |
||||||
|
import { SecondaryPageLink, useSecondaryPage } from '@/PageManager' |
||||||
|
import { useMuteList } from '@/providers/MuteListProvider' |
||||||
|
import { useNostr } from '@/providers/NostrProvider' |
||||||
|
import client from '@/services/client.service' |
||||||
|
import { Link, Zap } from 'lucide-react' |
||||||
|
import { useCallback, useEffect, useMemo, useState } from 'react' |
||||||
|
import { useTranslation } from 'react-i18next' |
||||||
|
import FollowedBy from './FollowedBy' |
||||||
|
import Followings from './Followings' |
||||||
|
import ProfileFeed from './ProfileFeed' |
||||||
|
import Relays from './Relays' |
||||||
|
|
||||||
|
export default function Profile({ id }: { id?: string }) { |
||||||
|
const { t } = useTranslation() |
||||||
|
const { push } = useSecondaryPage() |
||||||
|
const { profile, isFetching } = useFetchProfile(id) |
||||||
|
const { pubkey: accountPubkey } = useNostr() |
||||||
|
const { mutePubkeys } = useMuteList() |
||||||
|
const { followings } = useFetchFollowings(profile?.pubkey) |
||||||
|
const isFollowingYou = useMemo(() => { |
||||||
|
return ( |
||||||
|
!!accountPubkey && accountPubkey !== profile?.pubkey && followings.includes(accountPubkey) |
||||||
|
) |
||||||
|
}, [followings, profile, accountPubkey]) |
||||||
|
const defaultImage = useMemo( |
||||||
|
() => (profile?.pubkey ? generateImageByPubkey(profile?.pubkey) : ''), |
||||||
|
[profile] |
||||||
|
) |
||||||
|
const [topContainerHeight, setTopContainerHeight] = useState(0) |
||||||
|
const isSelf = accountPubkey === profile?.pubkey |
||||||
|
const [topContainer, setTopContainer] = useState<HTMLDivElement | null>(null) |
||||||
|
const topContainerRef = useCallback((node: HTMLDivElement | null) => { |
||||||
|
if (node) { |
||||||
|
setTopContainer(node) |
||||||
|
} |
||||||
|
}, []) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!profile?.pubkey) return |
||||||
|
|
||||||
|
const forceUpdateCache = async () => { |
||||||
|
await Promise.all([ |
||||||
|
client.forceUpdateRelayListEvent(profile.pubkey), |
||||||
|
client.fetchProfile(profile.pubkey, true) |
||||||
|
]) |
||||||
|
} |
||||||
|
forceUpdateCache() |
||||||
|
}, [profile?.pubkey]) |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!topContainer) return |
||||||
|
|
||||||
|
const checkHeight = () => { |
||||||
|
setTopContainerHeight(topContainer.scrollHeight) |
||||||
|
} |
||||||
|
|
||||||
|
checkHeight() |
||||||
|
|
||||||
|
const observer = new ResizeObserver(() => { |
||||||
|
checkHeight() |
||||||
|
}) |
||||||
|
|
||||||
|
observer.observe(topContainer) |
||||||
|
|
||||||
|
return () => { |
||||||
|
observer.disconnect() |
||||||
|
} |
||||||
|
}, [topContainer]) |
||||||
|
|
||||||
|
if (!profile && isFetching) { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div> |
||||||
|
<div className="relative bg-cover bg-center mb-2"> |
||||||
|
<Skeleton className="w-full aspect-[3/1] rounded-none" /> |
||||||
|
<Skeleton className="w-24 h-24 absolute bottom-0 left-3 translate-y-1/2 border-4 border-background rounded-full" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="px-4"> |
||||||
|
<Skeleton className="h-5 w-28 mt-14 mb-1" /> |
||||||
|
<Skeleton className="h-5 w-56 mt-2 my-1 rounded-full" /> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
if (!profile) return null |
||||||
|
|
||||||
|
const { banner, username, about, avatar, pubkey, website, lightningAddress } = profile |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div ref={topContainerRef}> |
||||||
|
<div className="relative bg-cover bg-center mb-2"> |
||||||
|
<ProfileBanner banner={banner} pubkey={pubkey} className="w-full aspect-[3/1]" /> |
||||||
|
<Avatar className="w-24 h-24 absolute left-3 bottom-0 translate-y-1/2 border-4 border-background"> |
||||||
|
<AvatarImage src={avatar} className="object-cover object-center" /> |
||||||
|
<AvatarFallback> |
||||||
|
<img src={defaultImage} /> |
||||||
|
</AvatarFallback> |
||||||
|
</Avatar> |
||||||
|
</div> |
||||||
|
<div className="px-4"> |
||||||
|
<div className="flex justify-end h-8 gap-2 items-center"> |
||||||
|
<ProfileOptions pubkey={pubkey} /> |
||||||
|
{isSelf ? ( |
||||||
|
<Button |
||||||
|
className="w-20 min-w-20 rounded-full" |
||||||
|
variant="secondary" |
||||||
|
onClick={() => push(toProfileEditor())} |
||||||
|
> |
||||||
|
{t('Edit')} |
||||||
|
</Button> |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
{!!lightningAddress && <ProfileZapButton pubkey={pubkey} />} |
||||||
|
<FollowButton pubkey={pubkey} /> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<div className="pt-2"> |
||||||
|
<div className="flex gap-2 items-center"> |
||||||
|
<div className="text-xl font-semibold truncate select-text">{username}</div> |
||||||
|
{isFollowingYou && ( |
||||||
|
<div className="text-muted-foreground rounded-full bg-muted text-xs h-fit px-2 shrink-0"> |
||||||
|
{t('Follows you')} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<Nip05 pubkey={pubkey} /> |
||||||
|
{lightningAddress && ( |
||||||
|
<div className="text-sm text-yellow-400 flex gap-1 items-center select-text"> |
||||||
|
<Zap className="size-4 shrink-0" /> |
||||||
|
<div className="flex-1 max-w-fit w-0 truncate">{lightningAddress}</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<div className="flex gap-1 mt-1"> |
||||||
|
<PubkeyCopy pubkey={pubkey} /> |
||||||
|
<NpubQrCode pubkey={pubkey} /> |
||||||
|
</div> |
||||||
|
<Collapsible> |
||||||
|
<ProfileAbout |
||||||
|
about={about} |
||||||
|
className="text-wrap break-words whitespace-pre-wrap mt-2 select-text" |
||||||
|
/> |
||||||
|
</Collapsible> |
||||||
|
{website && ( |
||||||
|
<div className="flex gap-1 items-center text-primary mt-2 truncate select-text"> |
||||||
|
<Link size={14} className="shrink-0" /> |
||||||
|
<a |
||||||
|
href={website} |
||||||
|
target="_blank" |
||||||
|
className="hover:underline truncate flex-1 max-w-fit w-0" |
||||||
|
> |
||||||
|
{website} |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<div className="flex justify-between items-center mt-2 text-sm"> |
||||||
|
<div className="flex gap-4 items-center"> |
||||||
|
<Followings pubkey={pubkey} /> |
||||||
|
<Relays pubkey={pubkey} /> |
||||||
|
{isSelf && ( |
||||||
|
<SecondaryPageLink to={toMuteList()} className="flex gap-1 hover:underline w-fit"> |
||||||
|
{mutePubkeys.length} |
||||||
|
<div className="text-muted-foreground">{t('Muted')}</div> |
||||||
|
</SecondaryPageLink> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{!isSelf && <FollowedBy pubkey={pubkey} />} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<ProfileFeed pubkey={pubkey} topSpace={topContainerHeight + 100} /> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
import { usePrimaryPage } from '@/PageManager' |
||||||
|
import { useNostr } from '@/providers/NostrProvider' |
||||||
|
import { UserRound } from 'lucide-react' |
||||||
|
import SidebarItem from './SidebarItem' |
||||||
|
|
||||||
|
export default function ProfileButton() { |
||||||
|
const { navigate, current } = usePrimaryPage() |
||||||
|
const { checkLogin } = useNostr() |
||||||
|
|
||||||
|
return ( |
||||||
|
<SidebarItem |
||||||
|
title="Profile" |
||||||
|
onClick={() => checkLogin(() => navigate('profile'))} |
||||||
|
active={current === 'profile'} |
||||||
|
> |
||||||
|
<UserRound strokeWidth={3} /> |
||||||
|
</SidebarItem> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
import Profile from '@/components/Profile' |
||||||
|
import PrimaryPageLayout from '@/layouts/PrimaryPageLayout' |
||||||
|
import { useNostr } from '@/providers/NostrProvider' |
||||||
|
import { UserRound } from 'lucide-react' |
||||||
|
import { forwardRef } from 'react' |
||||||
|
import { useTranslation } from 'react-i18next' |
||||||
|
|
||||||
|
const ProfilePage = forwardRef((_, ref) => { |
||||||
|
const { pubkey } = useNostr() |
||||||
|
|
||||||
|
return ( |
||||||
|
<PrimaryPageLayout |
||||||
|
pageName="profile" |
||||||
|
titlebar={<ProfilePageTitlebar />} |
||||||
|
displayScrollToTopButton |
||||||
|
ref={ref} |
||||||
|
> |
||||||
|
<Profile id={pubkey ?? undefined} /> |
||||||
|
</PrimaryPageLayout> |
||||||
|
) |
||||||
|
}) |
||||||
|
ProfilePage.displayName = 'ProfilePage' |
||||||
|
export default ProfilePage |
||||||
|
|
||||||
|
function ProfilePageTitlebar() { |
||||||
|
const { t } = useTranslation() |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex gap-2 items-center h-full pl-3"> |
||||||
|
<UserRound /> |
||||||
|
<div className="text-lg font-semibold">{t('Profile')}</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
Loading…
Reference in new issue