changed to group chat

ShuaJJ · Oct 21, 2023 · d874827 · d874827
1 parent 89e6cfe
commit d874827
Show file tree

Hide file tree

Showing 14 changed files with 5,870 additions and 1,304 deletions.
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
@@ -28,7 +28,7 @@ export default function Home() {
                 <PostButton { ...accessTokens } />
               </WhiteBox>
               <WhiteBox>
-                <ChatList {...accessTokens} />
+                <ChatList />
               </WhiteBox>
             </div>
         </div>

diff --git a/frontend/components/post/NewPost.tsx b/frontend/components/post/NewPost.tsx
@@ -29,7 +29,7 @@ export default function NewPost({
 
     const selectType = (selected: PostType) => {
         setType(selected);
-        if (selected !== 'post' && (isVerified as number) < 2) {
+        if ((isVerified as number) < 2) {
             setNeedVerify(true)
         }
     }
@@ -60,7 +60,7 @@ export default function NewPost({
     }
 
     const userProps = { ...props, contract: userContract, refetch };
-    const postProps = { ...props, contract: postContract, type: type ?? 'post', refetch: refetchPosts };
+    const postProps = { ...props, contract: postContract, type: type ?? 'announcement', refetch: refetchPosts };
 
     const modalBody = () => {
         if (needVerify && isVerified == 0) {

diff --git a/frontend/components/post/RandomAvatar.tsx b/frontend/components/post/RandomAvatar.tsx
@@ -1,10 +1,11 @@
 import { useUserInfo } from "@/hooks/useUserInfo";
 import getPostContent from "@/utils/getPostContent";
-import { PostContent, PostItem } from "@/utils/types";
+import { PostItem, UserInfo } from "@/utils/types";
 import { useEffect, useState } from "react";
 import UserModal from "../user/UserModal";
 import { sendTx } from "@/utils/sendTx";
 import { toast } from "react-hot-toast";
+import Skeleton from "./Skeleton";
 
 export default function RandomAvatar({
     author,
@@ -20,7 +21,7 @@ export default function RandomAvatar({
     const index = Math.floor(Math.random() * 6);
     const { data: cid } = useUserInfo(author);
     const [showUserModal, setShowUserModal] = useState(false);
-    const [authorInfo, setAuthorInfo] = useState<PostContent|null>(null);
+    const [authorInfo, setAuthorInfo] = useState<UserInfo|null>(null);
 
     useEffect(() => {
         if (cid) {
@@ -57,6 +58,12 @@ export default function RandomAvatar({
 
     }
 
+    if (!authorInfo) {
+        return <Skeleton />
+    }
+
+    const { description, token, chatId, website } = authorInfo;
+
     return (
         <>
             <div 
@@ -79,15 +86,15 @@ export default function RandomAvatar({
                         <div className="text-xs text-gray-400 text-ellipsis overflow-hidden whitespace-nowrap w-96">{authorInfo.description}</div>
                     )}
                 </div>
-                <div className="flex-none">
-                    { authorInfo?.type }
-                </div>
             </div>
             {showUserModal && (
                 <UserModal 
                     logo={avatar} 
                     name={username} 
-                    description={authorInfo?.description ?? ''} 
+                    description={description}
+                    token={token} 
+                    chatId={chatId}
+                    website={website}
                     author={author}
                     myAddress={account}
                     walletClient={walletClient}

diff --git a/frontend/components/post/TypeSelect.tsx b/frontend/components/post/TypeSelect.tsx
@@ -8,29 +8,17 @@ export default function TypeSelect({
 }) {
 
     return (
-        <div className="flex justify-between items-center gap-12">
-            <div className="flex flex-col min-h-[200px] gap-5">
-                <div className="text-purple-dark font-semibold text-lg">
-                    Project Owner
-                </div>
-                {POST_TYPES.map((pt) => (
-                    <TypeChoice 
-                        key={pt}
-                        type={pt} 
-                        onSelect={onSelect} 
-                    />
-                ))}
+        <div className="flex flex-col min-h-[200px] gap-5">
+            <div className="text-purple-dark font-semibold text-lg">
+                Project Owner
             </div>
-            <div className="bg-purple-dark h-12 w-[1px]" />
-            <div className="flex flex-col min-h-[200px] gap-5">
-                <div className="text-purple-dark font-semibold text-lg">
-                    Web3er
-                </div>
+            {POST_TYPES.map((pt) => (
                 <TypeChoice 
-                    type="post" 
+                    key={pt}
+                    type={pt} 
                     onSelect={onSelect} 
                 />
-            </div>
+            ))}
         </div>
     )
 }

diff --git a/frontend/components/push/ChatList.tsx b/frontend/components/push/ChatList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 'use client'
 
 import { IFeeds, PushAPI, viemSignerType } from "@pushprotocol/restapi";
@@ -6,16 +7,15 @@ import { useEffect, useState } from "react";
 import { useWalletClient } from "wagmi";
 import MainButton from "../button/MainButton";
 import EmptyText from "../EmptyText";
-import { useUserInfo } from "@/hooks/useUserInfo";
-import { AccessTokenProps, PostContent } from "@/utils/types";
-import getPostContent from "@/utils/getPostContent";
+import ChatModal from "./ChatModal";
 
-export default function ChatList({web3StorageAccessToken} : AccessTokenProps) {
+export default function ChatList() {
 
     const { data: walletClient } = useWalletClient();
     const [chats, setChats] = useState<IFeeds[]>([]);
     const [showChat, setShowChat] = useState(false);
     const [loading, setLoading] = useState(false);
+    const [chatId, setChatId] = useState('')
 
     useEffect(() => {
         async function getChats() {
@@ -34,50 +34,52 @@ export default function ChatList({web3StorageAccessToken} : AccessTokenProps) {
         return <EmptyText text="You have no messages yet" />
     }
 
-    return (
-        <>
-            { showChat ? (
+    return <>
+            { showChat && !loading ? (
                 <div>
-                    {chats.map((c) => <div key={c.chatId}>{c.chatId}</div>)}
+                    <div className="font-semibold mb-6 ">My Messages</div>
+                    {chats.map((c) => (
+                        <div onClick={() => { setChatId(c.chatId ?? '') }} key={c.chatId}>
+                            <Chat 
+                                chat={c}
+                            />
+                        </div>
+                    ))}
                 </div>
             ) : (
                 <MainButton
                     secondary
+                    loading={loading}
                     onClick={() => {
                         setShowChat(true)
                     }}
                 >
                     Show My Chats
                 </MainButton>
             )}
-        </>
-    )
+            { chatId && <ChatModal chatId={chatId} close={() => { setChatId('') }} walletClient={walletClient!} />}
+    </>
 }
 
 function Chat({ 
     chat, 
-    myAddress, 
-    web3StorageAccessToken 
 }: { 
     chat: any, 
-    myAddress: string,
-    web3StorageAccessToken: string
 }) {
-    const from = chat.fromDID;
-    const to = chat.toDID;
-    const target = (myAddress === from ? to : from).replace('eip155:', '');
-    const { data: cid } = useUserInfo(target);
-    const [loading, setLoading] = useState(false);
-    const [authorInfo, setAuthorInfo] = useState<PostContent|null>(null);
 
-    useEffect(() => {
-        async function getUserInfo() {
-            const res = await getPostContent(web3StorageAccessToken, cid as string);
-            setAuthorInfo(res)
-        }
-        if (cid) {
-            getUserInfo()
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [cid])
+    return (
+        <div 
+            className="flex items-center gap-3 cursor-pointer"
+        >
+            <img 
+                src={chat.groupImage} 
+                alt="logo" 
+                className="block rounded-full w-12 h-12"
+            />
+            <div className="flex flex-col">
+                <div className="text-sm font-semibold">{chat.groupName}</div>
+                <div className="text-sm text-gray-600">{chat.msg.messageContent}</div>
+            </div>
+        </div>
+    )
 }
diff --git a/frontend/components/push/ChatModal.tsx b/frontend/components/push/ChatModal.tsx
@@ -0,0 +1,32 @@
+import Image from "next/image";
+import { ChatUIProvider, ChatViewComponent } from "@pushprotocol/uiweb";
+import closeIcon from "@/public/close.png";
+import { WalletClient } from "viem";
+import { viemSignerType } from "@pushprotocol/restapi";
+
+export default function ChatModal({
+    chatId,
+    walletClient,
+    close,
+} : {
+    chatId: string,
+    walletClient: WalletClient
+    close: () => void,
+}) {
+    return (
+        <ChatUIProvider signer={walletClient as viemSignerType}>
+            <div className="fixed left-0 right-0 top-0 bottom-0 backdrop-blur-sm bg-white/60 flex items-center justify-center p-16">
+                <ChatViewComponent
+                    chatId={chatId}
+                    limit={24}
+                />
+                <div 
+                    className="absolute right-3 top-3 inline-block p-2 cursor-pointer"
+                    onClick={close}
+                >
+                    <Image src={closeIcon} alt="close" width={24} height={24} />
+                </div>
+            </div>
+        </ChatUIProvider>
+    )
+}
diff --git a/frontend/components/push/sendNewChat.ts b/frontend/components/push/sendNewChat.ts