mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
add user page
This commit is contained in:
Ren Amamiya
parent
9b84068e6d
commit
b1cecbbc07
@ -1,107 +0,0 @@
|
||||
import { ArrowLeftIcon } from "@shared/icons";
|
||||
import { Image } from "@shared/image";
|
||||
import { useActiveAccount } from "@stores/accounts";
|
||||
import { DEFAULT_AVATAR } from "@stores/constants";
|
||||
import { useProfile } from "@utils/hooks/useProfile";
|
||||
import { compactNumber } from "@utils/number";
|
||||
import { shortenKey } from "@utils/shortenKey";
|
||||
import useSWR from "swr";
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((r) => r.json());
|
||||
|
||||
export function ProfileBlock({ params }: { params: any }) {
|
||||
const removeBlock = useActiveAccount((state: any) => state.removeBlock);
|
||||
|
||||
const close = () => {
|
||||
removeBlock(params.id, true);
|
||||
};
|
||||
|
||||
const { user } = useProfile(params.pubkey);
|
||||
const { data: userStats } = useSWR(
|
||||
user ? `https://api.nostr.band/v0/stats/profile/${params.pubkey}` : null,
|
||||
fetcher,
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="shrink-0 w-[360px] flex-col flex border-r border-zinc-900">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="h-11 w-full flex items-center justify-center px-3"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => close()}
|
||||
className="inline-flex h-7 w-7 shrink items-center justify-center rounded bg-zinc-900 hover:bg-zinc-800"
|
||||
>
|
||||
<ArrowLeftIcon width={14} height={14} className="text-zinc-500" />
|
||||
</button>
|
||||
<h3 className="font-semibold text-zinc-100">{params.title}</h3>
|
||||
<div className="w-9 h-6" />
|
||||
</div>
|
||||
<div className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 pb-20 overflow-y-auto">
|
||||
<div className="px-3">
|
||||
<div className="w-full h-max rounded-lg bg-zinc-900">
|
||||
<div className="bg-zinc-800 w-full h-44 rounded-t-lg" />
|
||||
<div className="-mt-7 px-5">
|
||||
<Image
|
||||
src={user?.image || DEFAULT_AVATAR}
|
||||
alt={params.pubkey}
|
||||
className="w-14 h-14 ring-1 ring-black rounded-md"
|
||||
/>
|
||||
<div className="mt-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h3 className="leading-none font-semibold text-zinc-100">
|
||||
{user?.display_name || user?.name || "Anon"}
|
||||
</h3>
|
||||
<h5 className="leading-none text-zinc-500">
|
||||
{user?.nip05 || shortenKey(params.pubkey)}
|
||||
</h5>
|
||||
<p className="mt-1 select-text break-words text-base text-zinc-100">
|
||||
{user?.bio || user.about}
|
||||
</p>
|
||||
</div>
|
||||
{!userStats ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<div className="mt-8 pb-5 w-full flex items-center gap-8">
|
||||
<div className="inline-flex flex-col gap-1">
|
||||
<span className="leading-none font-semibold text-zinc-100">
|
||||
{userStats.stats[params.pubkey]
|
||||
.followers_pubkey_count ?? 0}
|
||||
</span>
|
||||
<span className="leading-none text-sm text-zinc-400">
|
||||
Followers
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex flex-col gap-1">
|
||||
<span className="leading-none font-semibold text-zinc-100">
|
||||
{userStats.stats[params.pubkey]
|
||||
.pub_following_pubkey_count ?? 0}
|
||||
</span>
|
||||
<span className="leading-none text-sm text-zinc-400">
|
||||
Following
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex flex-col gap-1">
|
||||
<span className="leading-none font-semibold text-zinc-100">
|
||||
{userStats.stats[params.pubkey].zaps_received
|
||||
? compactNumber.format(
|
||||
userStats.stats[params.pubkey].zaps_received
|
||||
.msats / 1000,
|
||||
)
|
||||
: 0}
|
||||
</span>
|
||||
<span className="leading-none text-sm text-zinc-400">
|
||||
Zaps received
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -46,7 +46,7 @@ export function Profile({ data }: { data: any }) {
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-8">
|
||||
{error && <p>Failed to fetch</p>}
|
||||
{error && <p>Failed to fetch user stats</p>}
|
||||
{!userStats ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
|
||||
1
src/app/user/_default.page.tsx
Normal file
1
src/app/user/_default.page.tsx
Normal file
@ -0,0 +1 @@
|
||||
export { LayoutUser as Layout } from "./layout";
|
||||
14
src/app/user/layout.tsx
Normal file
14
src/app/user/layout.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { MultiAccounts } from "@shared/multiAccounts";
|
||||
import { Navigation } from "@shared/navigation";
|
||||
|
||||
export function LayoutUser({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex w-screen h-screen">
|
||||
<div className="relative flex flex-row shrink-0">
|
||||
<MultiAccounts />
|
||||
<Navigation />
|
||||
</div>
|
||||
<div className="w-full h-full">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
192
src/app/user/pages/index.page.tsx
Normal file
192
src/app/user/pages/index.page.tsx
Normal file
@ -0,0 +1,192 @@
|
||||
import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
|
||||
import { Image } from "@shared/image";
|
||||
import { RelayContext } from "@shared/relayProvider";
|
||||
import { useActiveAccount } from "@stores/accounts";
|
||||
import { DEFAULT_AVATAR } from "@stores/constants";
|
||||
import { dateToUnix } from "@utils/date";
|
||||
import { usePageContext } from "@utils/hooks/usePageContext";
|
||||
import { useProfile } from "@utils/hooks/useProfile";
|
||||
import { compactNumber } from "@utils/number";
|
||||
import { shortenKey } from "@utils/shortenKey";
|
||||
import { useContext } from "react";
|
||||
import useSWR from "swr";
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((r) => r.json());
|
||||
|
||||
export function Page() {
|
||||
const ndk = useContext(RelayContext);
|
||||
const pageContext = usePageContext();
|
||||
const searchParams: any = pageContext.urlParsed.search;
|
||||
const pubkey = searchParams.pubkey;
|
||||
|
||||
const { user } = useProfile(pubkey);
|
||||
const { data: userStats, error } = useSWR(
|
||||
`https://api.nostr.band/v0/stats/profile/${pubkey}`,
|
||||
fetcher,
|
||||
);
|
||||
|
||||
const account = useActiveAccount((state: any) => state.account);
|
||||
const follows = account ? JSON.parse(account.follows) : [];
|
||||
|
||||
const follow = (pubkey: string) => {
|
||||
try {
|
||||
const followsAsSet = new Set(follows);
|
||||
followsAsSet.add(pubkey);
|
||||
|
||||
const signer = new NDKPrivateKeySigner(account.privkey);
|
||||
ndk.signer = signer;
|
||||
|
||||
const tags = [];
|
||||
followsAsSet.forEach((item) => {
|
||||
tags.push(["p", item]);
|
||||
});
|
||||
|
||||
const event = new NDKEvent(ndk);
|
||||
event.content = "";
|
||||
event.created_at = dateToUnix();
|
||||
event.pubkey = pubkey;
|
||||
event.kind = 3;
|
||||
event.tags = tags;
|
||||
// publish event
|
||||
event.publish();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const unfollow = (pubkey: string) => {
|
||||
try {
|
||||
const followsAsSet = new Set(follows);
|
||||
followsAsSet.delete(pubkey);
|
||||
|
||||
const signer = new NDKPrivateKeySigner(account.privkey);
|
||||
ndk.signer = signer;
|
||||
|
||||
const tags = [];
|
||||
followsAsSet.forEach((item) => {
|
||||
tags.push(["p", item]);
|
||||
});
|
||||
|
||||
const event = new NDKEvent(ndk);
|
||||
event.content = "";
|
||||
event.created_at = dateToUnix();
|
||||
event.pubkey = pubkey;
|
||||
event.kind = 3;
|
||||
event.tags = tags;
|
||||
// publish event
|
||||
event.publish();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<div
|
||||
data-tauri-drag-region
|
||||
className="h-11 w-full flex items-center px-3 border-b border-zinc-900"
|
||||
/>
|
||||
<div className="w-full h-56 bg-zinc-100">
|
||||
<Image
|
||||
src={user?.banner || "https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"}
|
||||
alt={"banner"}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full px-5 -mt-7">
|
||||
<div>
|
||||
<Image
|
||||
src={user?.image || DEFAULT_AVATAR}
|
||||
alt={pubkey}
|
||||
className="w-14 h-14 rounded-md ring-2 ring-black"
|
||||
/>
|
||||
<div className="flex-1 flex flex-col gap-2 mt-4">
|
||||
<h5 className="font-semibold leading-none">
|
||||
{user?.displayName || user?.name || "No name"}
|
||||
</h5>
|
||||
<span className="max-w-[15rem] text-sm truncate leading-none text-zinc-500">
|
||||
{user?.nip05 || shortenKey(pubkey)}
|
||||
</span>
|
||||
<p className="mt-1 line-clamp-3 break-words leading-tight text-zinc-100">
|
||||
{user?.about}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8">
|
||||
{error && <p>Failed to fetch user stats</p>}
|
||||
{!userStats ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<div className="w-full flex items-center gap-10">
|
||||
<div className="inline-flex flex-col gap-1">
|
||||
<span className="leading-none font-semibold text-zinc-100">
|
||||
{userStats.stats[pubkey].followers_pubkey_count ?? 0}
|
||||
</span>
|
||||
<span className="leading-none text-sm text-zinc-400">
|
||||
Followers
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex flex-col gap-1">
|
||||
<span className="leading-none font-semibold text-zinc-100">
|
||||
{userStats.stats[pubkey].pub_following_pubkey_count ?? 0}
|
||||
</span>
|
||||
<span className="leading-none text-sm text-zinc-400">
|
||||
Following
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex flex-col gap-1">
|
||||
<span className="leading-none font-semibold text-zinc-100">
|
||||
{userStats.stats[pubkey].zaps_received
|
||||
? compactNumber.format(
|
||||
userStats.stats[pubkey].zaps_received.msats / 1000,
|
||||
)
|
||||
: 0}
|
||||
</span>
|
||||
<span className="leading-none text-sm text-zinc-400">
|
||||
Zaps received
|
||||
</span>
|
||||
</div>
|
||||
<div className="inline-flex flex-col gap-1">
|
||||
<span className="leading-none font-semibold text-zinc-100">
|
||||
{userStats.stats[pubkey].zaps_sent
|
||||
? compactNumber.format(
|
||||
userStats.stats[pubkey].zaps_sent.msats / 1000,
|
||||
)
|
||||
: 0}
|
||||
</span>
|
||||
<span className="leading-none text-sm text-zinc-400">
|
||||
Zaps sent
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-6 flex items-center gap-2">
|
||||
{follows.includes(pubkey) ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => unfollow(pubkey)}
|
||||
className="inline-flex w-44 h-10 items-center justify-center rounded-md bg-zinc-900 hover:bg-fuchsia-500 text-sm font-medium"
|
||||
>
|
||||
Unfollow
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => follow(pubkey)}
|
||||
className="inline-flex w-44 h-10 items-center justify-center rounded-md bg-zinc-900 hover:bg-fuchsia-500 text-sm font-medium"
|
||||
>
|
||||
Follow
|
||||
</button>
|
||||
)}
|
||||
<a
|
||||
href={`/app/chat?pubkey=${pubkey}`}
|
||||
className="inline-flex w-44 h-10 items-center justify-center rounded-md bg-zinc-900 hover:bg-fuchsia-500 text-sm font-medium"
|
||||
>
|
||||
Message
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -24,7 +24,7 @@ export function ActiveAccount({ data }: { data: any }) {
|
||||
// subscribe to channel
|
||||
const sub = ndk.subscribe(
|
||||
{
|
||||
kinds: [4, 42],
|
||||
kinds: [1, 4, 42],
|
||||
"#p": [data.pubkey],
|
||||
since: since,
|
||||
},
|
||||
@ -35,6 +35,10 @@ export function ActiveAccount({ data }: { data: any }) {
|
||||
|
||||
sub.addListener("event", (event) => {
|
||||
switch (event.kind) {
|
||||
case 1:
|
||||
// send native notifiation
|
||||
sendNativeNotification("Someone mention you");
|
||||
break;
|
||||
case 4:
|
||||
// save
|
||||
saveChat(data.pubkey, event);
|
||||
|
||||
@ -66,7 +66,7 @@ export function User({
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute left-0 top-10 z-50 mt-3">
|
||||
<div className="w-full max-w-xs overflow-hidden rounded-md border border-zinc-800/50 bg-zinc-900/80 backdrop-blur-md">
|
||||
<div className="w-full max-w-xs overflow-hidden rounded-md border border-zinc-800/50 bg-zinc-900/90 backdrop-blur-lg">
|
||||
<div className="flex gap-2.5 border-b border-zinc-800 px-3 py-3">
|
||||
<Image
|
||||
src={user?.image || DEFAULT_AVATAR}
|
||||
@ -94,13 +94,13 @@ export function User({
|
||||
<div className="flex items-center gap-2 px-3 py-3">
|
||||
<a
|
||||
href={`/app/user?pubkey=${pubkey}`}
|
||||
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 hover:bg-fuchsia-500 text-sm font-medium"
|
||||
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-700 hover:bg-fuchsia-500 text-sm font-medium"
|
||||
>
|
||||
View profile
|
||||
</a>
|
||||
<a
|
||||
href={`/app/chat?pubkey=${pubkey}`}
|
||||
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-800 hover:bg-fuchsia-500 text-sm font-medium"
|
||||
className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-700 hover:bg-fuchsia-500 text-sm font-medium"
|
||||
>
|
||||
Message
|
||||
</a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user