76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import { ChatListItem } from '@components/chats/chatListItem';
|
|
import { ImageWithFallback } from '@components/imageWithFallback';
|
|
import { RelayContext } from '@components/relaysProvider';
|
|
|
|
import { activeAccountAtom } from '@stores/account';
|
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
|
|
|
import { useAtomValue } from 'jotai';
|
|
import { useRouter } from 'next/router';
|
|
import { useContext, useEffect, useState } from 'react';
|
|
|
|
export default function ChatList() {
|
|
const [pool, relays]: any = useContext(RelayContext);
|
|
const router = useRouter();
|
|
|
|
const activeAccount: any = useAtomValue(activeAccountAtom);
|
|
const accountProfile = JSON.parse(activeAccount.metadata);
|
|
|
|
const [list, setList] = useState(new Set());
|
|
|
|
const openSelfChat = () => {
|
|
router.replace({
|
|
pathname: '/chats/[pubkey]',
|
|
query: { pubkey: activeAccount.pubkey },
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
const unsubscribe = pool.subscribe(
|
|
[
|
|
{
|
|
kinds: [4],
|
|
'#p': [activeAccount.pubkey],
|
|
since: 0,
|
|
},
|
|
],
|
|
relays,
|
|
(event: any) => {
|
|
if (event.pubkey !== activeAccount.pubkey) {
|
|
setList((list) => new Set(list).add(event.pubkey));
|
|
}
|
|
}
|
|
);
|
|
|
|
return () => {
|
|
unsubscribe;
|
|
};
|
|
}, [pool, relays, activeAccount.pubkey]);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-px">
|
|
<div
|
|
onClick={() => openSelfChat()}
|
|
className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
|
|
>
|
|
<div className="relative h-5 w-5 shrink overflow-hidden rounded bg-white">
|
|
<ImageWithFallback
|
|
src={accountProfile.picture || DEFAULT_AVATAR}
|
|
alt={activeAccount.pubkey}
|
|
fill={true}
|
|
className="rounded object-cover"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h5 className="text-sm font-medium text-zinc-400">
|
|
{accountProfile.display_name || accountProfile.name} <span className="text-zinc-500">(you)</span>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
{[...list].map((item: string, index) => (
|
|
<ChatListItem key={index} pubkey={item} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|