From 8db5d5f87deb4ecc64cd08effa01c3910078a843 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Fri, 7 Apr 2023 09:16:31 +0700
Subject: [PATCH] updated chat list
---
src/components/chats/chatList.tsx | 39 ++++++++++++++++--
src/components/chats/chatListItem.tsx | 41 +++++++++++++++++++
src/components/chats/messageList.tsx | 4 +-
.../{message.tsx => messageListItem.tsx} | 6 ++-
src/pages/_app.tsx | 4 +-
5 files changed, 85 insertions(+), 9 deletions(-)
create mode 100644 src/components/chats/chatListItem.tsx
rename src/components/chats/{message.tsx => messageListItem.tsx} (91%)
diff --git a/src/components/chats/chatList.tsx b/src/components/chats/chatList.tsx
index d3b9c2f2..73096946 100644
--- a/src/components/chats/chatList.tsx
+++ b/src/components/chats/chatList.tsx
@@ -1,29 +1,57 @@
+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 openChats = () => {
- router.push({
+ 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 (
openChats()}
- className="inline-flex items-center gap-2 rounded-md px-2.5 py-2 hover:bg-zinc-900"
+ onClick={() => openSelfChat()}
+ className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
>
+ {[...list].map((item: string, index) => (
+
+ ))}
);
}
diff --git a/src/components/chats/chatListItem.tsx b/src/components/chats/chatListItem.tsx
new file mode 100644
index 00000000..074c4e75
--- /dev/null
+++ b/src/components/chats/chatListItem.tsx
@@ -0,0 +1,41 @@
+import { ImageWithFallback } from '@components/imageWithFallback';
+
+import { DEFAULT_AVATAR } from '@stores/constants';
+
+import { useMetadata } from '@utils/metadata';
+import { truncate } from '@utils/truncate';
+
+import { useRouter } from 'next/router';
+
+export const ChatListItem = ({ pubkey }: { pubkey: string }) => {
+ const router = useRouter();
+ const profile = useMetadata(pubkey);
+
+ const openChat = () => {
+ router.replace({
+ pathname: '/chats/[pubkey]',
+ query: { pubkey: pubkey },
+ });
+ };
+
+ return (
+ openChat()}
+ className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
+ >
+
+
+
+
+
+ {profile?.display_name || profile?.name || truncate(pubkey, 16, ' .... ')}
+
+
+
+ );
+};
diff --git a/src/components/chats/messageList.tsx b/src/components/chats/messageList.tsx
index 6ad400ad..fda01645 100644
--- a/src/components/chats/messageList.tsx
+++ b/src/components/chats/messageList.tsx
@@ -1,4 +1,4 @@
-import { Message } from '@components/chats/message';
+import MessageListItem from '@components/chats/messageListItem';
import { useCallback, useRef } from 'react';
import { Virtuoso } from 'react-virtuoso';
@@ -10,7 +10,7 @@ export const MessageList = ({ data }: { data: any }) => {
(index: string | number) => {
const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
return (
-
);
};
+
+export default memo(MessageListItem);
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 3af65f2f..c036df5f 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -2,6 +2,7 @@ import RelayProvider from '@components/relaysProvider';
import type { NextPage } from 'next';
import type { AppProps } from 'next/app';
+import { useRouter } from 'next/router';
import { ReactElement, ReactNode } from 'react';
import '../App.css';
@@ -16,8 +17,9 @@ type AppPropsWithLayout = AppProps & {
};
export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+ const router = useRouter();
// Use the layout defined at the page level, if available
const getLayout = Component.getLayout ?? ((page) => page);
- return {getLayout()};
+ return {getLayout()};
}