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

refactor useProfile and useChannelProfile hooks

Browse Source
This commit is contained in:
Ren Amamiya
2023-04-27 10:28:07 +07:00
parent 8cadb7467f
commit 6918660a5c
24 changed files with 137 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/appHeader.tsx
View File

@@ -45,8 +45,9 @@ export default function AppHeader({ collector }: { collector: boolean }) {
</button>
</div>
<div data-tauri-drag-region className="flex h-full w-full items-center justify-between">
<div className="flex h-full items-center divide-x divide-zinc-900 px-4 pt-px"></div>
<div>{collector && <EventCollector />}</div>
<div className="flex h-full items-center divide-x divide-zinc-900 px-4 pt-px">
{collector && <EventCollector />}
</div>
</div>
</div>
);

4
src/components/channels/channelProfile.tsx
View File

@@ -1,12 +1,12 @@
import { DEFAULT_AVATAR } from '@stores/constants';
import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
import { useChannelProfile } from '@utils/hooks/useChannelProfile';
import { Copy } from 'iconoir-react';
import { nip19 } from 'nostr-tools';
export const ChannelProfile = ({ id, pubkey }: { id: string; pubkey: string }) => {
const metadata = useChannelMetadata(id, pubkey);
const metadata = useChannelProfile(id, pubkey);
const noteID = id ? nip19.noteEncode(id) : null;
const copyNoteID = async () => {

4
src/components/chats/chatListItem.tsx
View File

@@ -1,13 +1,13 @@
import { DEFAULT_AVATAR } from '@stores/constants';
import { usePageContext } from '@utils/hooks/usePageContext';
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
import { twMerge } from 'tailwind-merge';
export const ChatListItem = ({ pubkey }: { pubkey: string }) => {
const profile = useProfileMetadata(pubkey);
const profile = useProfile(pubkey);
const pageContext = usePageContext();
const searchParams: any = pageContext.urlParsed.search;

4
src/components/chats/messageUser.tsx
View File

@@ -1,6 +1,6 @@
import { DEFAULT_AVATAR } from '@stores/constants';
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
import dayjs from 'dayjs';
@@ -9,7 +9,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
export const MessageUser = ({ pubkey, time }: { pubkey: string; time: number }) => {
const profile = useProfileMetadata(pubkey);
const profile = useProfile(pubkey);
return (
<div className="group flex items-start gap-3">

25
src/components/multiAccounts/index.tsx
View File

@@ -7,7 +7,7 @@ import { APP_VERSION } from '@stores/constants';
import LumeSymbol from '@assets/icons/Lume';
import { Plus } from 'iconoir-react';
import { useCallback, useContext } from 'react';
import { useContext } from 'react';
let accounts: any = [];
@@ -19,17 +19,6 @@ if (typeof window !== 'undefined') {
export default function MultiAccounts() {
const activeAccount: any = useContext(AccountContext);
const renderAccount = useCallback(
(account: { pubkey: string }) => {
if (account.pubkey === activeAccount.pubkey) {
return <ActiveAccount key={account.pubkey} user={account} />;
} else {
return <InactiveAccount key={account.pubkey} user={account} />;
}
},
[activeAccount.pubkey]
);
return (
<div className="flex h-full flex-col items-center justify-between px-2 pb-4 pt-3">
<div className="flex flex-col gap-3">
@@ -39,7 +28,13 @@ export default function MultiAccounts() {
>
<LumeSymbol className="h-6 w-auto text-zinc-400 group-hover:text-zinc-200" />
</a>
{accounts.map((account: { pubkey: string }) => renderAccount(account))}
{accounts.map((account: { pubkey: string }) => {
if (account.pubkey === activeAccount.pubkey) {
return <ActiveAccount key={account.pubkey} user={account} />;
} else {
return <InactiveAccount key={account.pubkey} user={account} />;
}
})}
<a
href="/onboarding"
className="group relative flex h-11 w-11 shrink cursor-pointer items-center justify-center rounded-lg border-2 border-dashed border-zinc-600 hover:border-zinc-400"
@@ -48,9 +43,7 @@ export default function MultiAccounts() {
</a>
</div>
<div className="flex flex-col gap-0.5 text-center">
<span className="animate-moveBg from-fuchsia-300 via-orange-100 to-amber-300 text-sm font-black uppercase leading-tight text-zinc-600 hover:bg-gradient-to-r hover:bg-clip-text hover:text-transparent">
Lume
</span>
<span className="text-sm font-black uppercase leading-tight text-zinc-600">Lume</span>
<span className="text-xs font-medium text-zinc-700">v{APP_VERSION}</span>
</div>
</div>

84
src/components/note/metadata.tsx
View File

@@ -1,83 +1,5 @@
import { AccountContext } from '@components/accountProvider';
import { NoteComment } from '@components/note/meta/comment';
import { NoteReaction } from '@components/note/meta/reaction';
import { RelayContext } from '@components/relaysProvider';
import { memo } from 'react';
import { READONLY_RELAYS } from '@stores/constants';
import { memo, useContext, useEffect, useState } from 'react';
export const NoteMetadata = memo(function NoteMetadata({
eventID,
eventPubkey,
eventContent,
eventTime,
}: {
eventID: string;
eventPubkey: string;
eventTime: any;
eventContent: any;
}) {
const pool: any = useContext(RelayContext);
const activeAccount: any = useContext(AccountContext);
const [liked, setLiked] = useState(false);
const [likeCount, setLikeCount] = useState(0);
const [comments, setComments] = useState(0);
useEffect(() => {
const unsubscribe = pool.subscribe(
[
{
'#e': [eventID],
since: parseInt(eventTime),
kinds: [1, 7],
},
],
READONLY_RELAYS,
(event: any) => {
switch (event.kind) {
case 1:
// update state
setComments((comments) => (comments += 1));
// save comment to database
// createCacheCommentNote(event, eventID);
break;
case 7:
if (event.pubkey === activeAccount.pubkey) {
setLiked(true);
}
if (event.content === '🤙' || event.content === '+') {
setLikeCount((likes) => (likes += 1));
}
break;
default:
break;
}
},
100,
undefined,
{
unsubscribeOnEose: true,
logAllEvents: false,
}
);
return () => {
unsubscribe();
};
}, [eventID, eventTime, pool, activeAccount.pubkey]);
return (
<div className="relative z-10 -ml-1 flex items-center gap-8">
<NoteComment
count={comments}
eventID={eventID}
eventPubkey={eventPubkey}
eventContent={eventContent}
eventTime={eventTime}
/>
<NoteReaction count={likeCount} liked={liked} eventID={eventID} eventPubkey={eventPubkey} />
</div>
);
export const NoteMetadata = memo(function NoteMetadata() {
return <div className="relative z-10 -ml-1 flex items-center gap-8"></div>;
});

9
src/components/note/preview/image.tsx
View File

@@ -1,7 +1,14 @@
export const ImagePreview = ({ url, size }: { url: string; size: string }) => {
return (
<div className={`relative h-full ${size === 'large' ? 'w-4/5' : 'w-1/2'} mt-2 rounded-lg border border-zinc-800`}>
<img src={url} alt={url} className="h-auto w-full rounded-lg object-cover" loading="lazy" />
<img
src={url}
alt={url}
className="h-auto w-full rounded-lg object-cover"
loading="lazy"
decoding="async"
style={{ contentVisibility: 'auto' }}
/>
</div>
);
};

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

@@ -1,12 +1,12 @@
import { DEFAULT_AVATAR } from '@stores/constants';
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
import { memo } from 'react';
export const UserBase = memo(function UserBase({ pubkey }: { pubkey: string }) {
const profile = useProfileMetadata(pubkey);
const profile = useProfile(pubkey);
return (
<div className="flex items-center gap-2">

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

@@ -1,6 +1,6 @@
import { DEFAULT_AVATAR } from '@stores/constants';
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
import dayjs from 'dayjs';
@@ -9,7 +9,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
export const UserExtend = ({ pubkey, time }: { pubkey: string; time: number }) => {
const profile = useProfileMetadata(pubkey);
const profile = useProfile(pubkey);
return (
<div className="group flex h-11 items-center gap-2">

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

@@ -1,10 +1,10 @@
import { DEFAULT_AVATAR } from '@stores/constants';
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
export const UserFollow = ({ pubkey }: { pubkey: string }) => {
const profile = useProfileMetadata(pubkey);
const profile = useProfile(pubkey);
return (
<div className="flex items-center gap-2">

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

@@ -1,6 +1,6 @@
import { DEFAULT_AVATAR } from '@stores/constants';
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
import dayjs from 'dayjs';
@@ -10,7 +10,7 @@ import { MoreHoriz } from 'iconoir-react';
dayjs.extend(relativeTime);
export const UserLarge = ({ pubkey, time }: { pubkey: string; time: number }) => {
const profile = useProfileMetadata(pubkey);
const profile = useProfile(pubkey);
return (
<div className="flex items-center gap-2">

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

@@ -1,8 +1,8 @@
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
export const UserMention = ({ pubkey }: { pubkey: string }) => {
const profile = useProfileMetadata(pubkey);
const profile = useProfile(pubkey);
return (
<span className="cursor-pointer text-fuchsia-500">@{profile?.name || profile?.username || shortenKey(pubkey)}</span>
);

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

@@ -1,10 +1,10 @@
import { DEFAULT_AVATAR } from '@stores/constants';
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
export const UserMini = ({ pubkey }: { pubkey: string }) => {
const profile = useProfileMetadata(pubkey);
const profile = useProfile(pubkey);
return (
<div className="group flex items-start gap-1">

4
src/components/user/muted.tsx
View File

@@ -1,12 +1,12 @@
import { DEFAULT_AVATAR } from '@stores/constants';
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
import { useState } from 'react';
export const UserMuted = ({ data }: { data: any }) => {
const profile = useProfileMetadata(data.content);
const profile = useProfile(data.content);
const [status, setStatus] = useState(data.status);
const unmute = async () => {

4
src/components/user/quoteRepost.tsx
View File

@@ -1,6 +1,6 @@
import { DEFAULT_AVATAR } from '@stores/constants';
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
import { useProfile } from '@utils/hooks/useProfile';
import { shortenKey } from '@utils/shortenKey';
import dayjs from 'dayjs';
@@ -9,7 +9,7 @@ import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
export const UserQuoteRepost = ({ pubkey, time }: { pubkey: string; time: number }) => {
const profile = useProfileMetadata(pubkey);
const profile = useProfile(pubkey);
return (
<div className="group flex items-center gap-2">