reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added useMetadata and refactor user component

Browse Source
This commit is contained in:
Ren Amamiya
2023-04-06 09:25:18 +07:00
parent 3c63dece46
commit 5437ec5c92
17 changed files with 161 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/multiAccounts/activeAccount.tsx
View File

@@ -33,9 +33,13 @@ export const ActiveAccount = memo(function ActiveAccount({ user }: { user: any }
for (const tag of tags) {
const metadata: any = await fetchMetadata(tag[1], pool, relays);
createPleb({ pubkey: tag[1], kind: 0, metadata: metadata.content, account_id: activeAccount.id }).catch(
console.error
);
createPleb({
pleb_id: tag[1] + '-lume' + activeAccount.id.toString(),
pubkey: tag[1],
kind: 0,
metadata: metadata.content,
account_id: activeAccount.id,
}).catch(console.error);
}
},
[pool, relays]

9
src/components/note/base.tsx
View File

@@ -71,6 +71,11 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
return;
}, [event.content, event.eventId, event.parent_id]);
const openUserPage = (e) => {
e.stopPropagation();
router.push(`/users/${event.pubkey}`);
};
const openThread = (e) => {
const selection = window.getSelection();
if (selection.toString().length === 0) {
@@ -87,7 +92,9 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
>
<>{getParent}</>
<div className="relative z-10 flex flex-col">
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
<div onClick={(e) => openUserPage(e)}>
<UserExtend pubkey={event.pubkey} time={event.createdAt || event.created_at} />
</div>
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">

14
src/components/user/base.tsx
View File

@@ -1,22 +1,14 @@
import { ImageWithFallback } from '@components/imageWithFallback';
import { RelayContext } from '@components/relaysProvider';
import { DEFAULT_AVATAR } from '@stores/constants';
import { useMetadata } from '@utils/metadata';
import { truncate } from '@utils/truncate';
import { Author } from 'nostr-relaypool';
import { memo, useContext, useEffect, useState } from 'react';
import { memo } from 'react';
export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
const [pool, relays]: any = useContext(RelayContext);
const [profile, setProfile] = useState(null);
useEffect(() => {
const user = new Author(pool, relays, pubkey);
user.metaData((res) => setProfile(JSON.parse(res.content)), 0);
}, [pool, relays, pubkey]);
const profile = useMetadata(pubkey);
return (
<div className="flex items-center gap-2">

50
src/components/user/extend.tsx
View File

@@ -2,63 +2,21 @@ import { ImageWithFallback } from '@components/imageWithFallback';
import { DEFAULT_AVATAR } from '@stores/constants';
import { useMetadata } from '@utils/metadata';
import { truncate } from '@utils/truncate';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import { fetch } from '@tauri-apps/api/http';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { useRouter } from 'next/router';
import { useCallback, useEffect, useState } from 'react';
dayjs.extend(relativeTime);
export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) => {
const router = useRouter();
const [profile, setProfile] = useState(null);
const openUserPage = (e) => {
e.stopPropagation();
router.push(`/users/${pubkey}`);
};
const fetchMetadata = useCallback(async (pubkey: string) => {
const res = await fetch(`https://rbr.bio/${pubkey}/metadata.json`, {
method: 'GET',
timeout: 5,
});
return res.data;
}, []);
const getCachedMetadata = useCallback(async () => {
const { getPlebByPubkey } = await import('@utils/bindings');
getPlebByPubkey({ pubkey: pubkey })
.then((res) => {
if (res) {
const metadata = JSON.parse(res.metadata);
setProfile(metadata);
} else {
fetchMetadata(pubkey).then((res: any) => {
if (res.content) {
const metadata = JSON.parse(res.content);
setProfile(metadata);
}
});
}
})
.catch(console.error);
}, [fetchMetadata, pubkey]);
useEffect(() => {
getCachedMetadata().catch(console.error);
}, [getCachedMetadata]);
const profile = useMetadata(pubkey);
return (
<div className="group flex items-start gap-2">
<div
onClick={(e) => openUserPage(e)}
className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900 ring-fuchsia-500 ring-offset-1 ring-offset-zinc-900 group-hover:ring-1"
>
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900 ring-fuchsia-500 ring-offset-1 ring-offset-zinc-900 group-hover:ring-1">
<ImageWithFallback
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
@@ -69,7 +27,7 @@ export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) =
<div className="flex w-full flex-1 items-start justify-between">
<div className="flex w-full justify-between">
<div className="flex items-baseline gap-2 text-sm">
<span onClick={(e) => openUserPage(e)} className="font-bold leading-tight group-hover:underline">
<span className="font-bold leading-tight group-hover:underline">
{profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
</span>
<span className="leading-tight text-zinc-500">·</span>

21
src/components/user/follow.tsx
View File

@@ -2,28 +2,11 @@ import { ImageWithFallback } from '@components/imageWithFallback';
import { DEFAULT_AVATAR } from '@stores/constants';
import { useMetadata } from '@utils/metadata';
import { truncate } from '@utils/truncate';
import { useCallback, useEffect, useState } from 'react';
export const UserFollow = ({ pubkey }: { pubkey: string }) => {
const [profile, setProfile] = useState(null);
const getCachedMetadata = useCallback(async () => {
const { getPlebByPubkey } = await import('@utils/bindings');
getPlebByPubkey({ pubkey: pubkey })
.then((res) => {
if (res) {
const metadata = JSON.parse(res.metadata);
setProfile(metadata);
}
})
.catch(console.error);
}, [pubkey]);
useEffect(() => {
getCachedMetadata().catch(console.error);
}, [getCachedMetadata]);
const profile = useMetadata(pubkey);
return (
<div className="flex items-center gap-2">

20
src/components/user/large.tsx
View File

@@ -2,33 +2,17 @@ import { ImageWithFallback } from '@components/imageWithFallback';
import { DEFAULT_AVATAR } from '@stores/constants';
import { useMetadata } from '@utils/metadata';
import { truncate } from '@utils/truncate';
import { DotsHorizontalIcon } from '@radix-ui/react-icons';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { useCallback, useEffect, useState } from 'react';
dayjs.extend(relativeTime);
export const UserLarge = ({ pubkey, time }: { pubkey: string; time: number }) => {
const [profile, setProfile] = useState(null);
const getCachedMetadata = useCallback(async () => {
const { getPlebByPubkey } = await import('@utils/bindings');
getPlebByPubkey({ pubkey: pubkey })
.then((res) => {
if (res) {
const metadata = JSON.parse(res.metadata);
setProfile(metadata);
}
})
.catch(console.error);
}, [pubkey]);
useEffect(() => {
getCachedMetadata().catch(console.error);
}, [getCachedMetadata]);
const profile = useMetadata(pubkey);
return (
<div className="flex items-center gap-2">

37
src/components/user/mention.tsx
View File

@@ -1,41 +1,10 @@
import { useMetadata } from '@utils/metadata';
import { truncate } from '@utils/truncate';
import { fetch } from '@tauri-apps/api/http';
import { memo, useCallback, useEffect, useState } from 'react';
import { memo } from 'react';
export const UserMention = memo(function UserMention({ pubkey }: { pubkey: string }) {
const [profile, setProfile] = useState(null);
const fetchMetadata = useCallback(async (pubkey: string) => {
const res = await fetch(`https://rbr.bio/${pubkey}/metadata.json`, {
method: 'GET',
timeout: 5,
});
return res.data;
}, []);
const getCachedMetadata = useCallback(async () => {
const { getPlebByPubkey } = await import('@utils/bindings');
getPlebByPubkey({ pubkey: pubkey })
.then((res) => {
if (res) {
const metadata = JSON.parse(res.metadata);
setProfile(metadata);
} else {
fetchMetadata(pubkey).then((res: any) => {
if (res.content) {
const metadata = JSON.parse(res.content);
setProfile(metadata);
}
});
}
})
.catch(console.error);
}, [fetchMetadata, pubkey]);
useEffect(() => {
getCachedMetadata().catch(console.error);
}, [getCachedMetadata]);
const profile = useMetadata(pubkey);
return <span className="cursor-pointer text-fuchsia-500">@{profile?.name || truncate(pubkey, 16, ' .... ')}</span>;
});

57
src/components/user/mini.tsx
View File

@@ -2,48 +2,27 @@ import { ImageWithFallback } from '@components/imageWithFallback';
import { DEFAULT_AVATAR } from '@stores/constants';
import { useMetadata } from '@utils/metadata';
import { truncate } from '@utils/truncate';
import { useCallback, useEffect, useState } from 'react';
export const UserMini = ({ pubkey }: { pubkey: string }) => {
const [profile, setProfile] = useState(null);
const profile = useMetadata(pubkey);
const getCachedMetadata = useCallback(async () => {
const { getPlebByPubkey } = await import('@utils/bindings');
getPlebByPubkey({ pubkey: pubkey })
.then((res) => {
if (res) {
const metadata = JSON.parse(res.metadata);
setProfile(metadata);
}
})
.catch(console.error);
}, [pubkey]);
useEffect(() => {
getCachedMetadata().catch(console.error);
}, [getCachedMetadata]);
if (profile) {
return (
<div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
<div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
<ImageWithFallback
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
fill={true}
className="rounded object-cover"
/>
</div>
<div className="inline-flex w-full flex-1 flex-col overflow-hidden">
<p className="truncate leading-tight text-zinc-300">
{profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
</p>
</div>
return (
<div className="flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-medium hover:bg-zinc-900">
<div className="relative h-5 w-5 shrink-0 overflow-hidden rounded">
<ImageWithFallback
src={profile?.picture || DEFAULT_AVATAR}
alt={pubkey}
fill={true}
className="rounded object-cover"
/>
</div>
);
} else {
return <></>;
}
<div className="inline-flex w-full flex-1 flex-col overflow-hidden">
<p className="truncate leading-tight text-zinc-300">
{profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
</p>
</div>
</div>
);
};