feat(wip): 聯絡人/群組對話框, 並打開對應的對話

client/ui/App.tsx

@@ -18,6 +18,8 @@ import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
 import ContactsList from "./main/ContactsList.tsx"
 import RecentsList from "./main/RecentsList.tsx"
 import useAsyncEffect from "./useAsyncEffect.ts"
+import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx";
+import Chat from "../api/client_data/Chat.ts";
 
 declare global {
     namespace React {
@@ -31,32 +33,7 @@ declare global {
 }
 
 export default function App() {
-    const [recentsList, setRecentsList] = React.useState([
+    const [recentsList, setRecentsList] = React.useState([] as RecentChat[])
-        {
-            id: '0',
-            avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
-            title: "麻油衣酱",
-            content: "成步堂君, 我又坐牢了（"
-        },
-        {
-            id: '1',
-            avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
-            title: "Maya Fey",
-            content: "我是绫里真宵, 是一名灵媒师~"
-        },
-    ] as RecentChat[])
-    const [contactsList, setContactsList] = React.useState([
-        {
-            id: '1',
-            avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
-            nickname: "麻油衣酱",
-        },
-        {
-            id: '0',
-            avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
-            nickname: "Maya Fey",
-        },
-    ] as User[])
 
     const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
 
@@ -80,7 +57,10 @@ export default function App() {
         userProfileDialogRef.current!.open = true
     })
 
-    const [myUserProfileCache, setMyUserProfileCache]: [User, React.Dispatch<React.SetStateAction<User>>] = React.useState(null as unknown as User)
+    const chatInfoDialogRef = React.useRef<Dialog>(null)
+    const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
+
+    const [myUserProfileCache, setMyUserProfileCache] = React.useState(null as unknown as User)
 
     const [isShowChatFragment, setIsShowChatFragment] = React.useState(false)
 
@@ -133,6 +113,14 @@ export default function App() {
                 userProfileDialogRef={userProfileDialogRef as any}
                 user={myUserProfileCache} />
 
+            <ChatInfoDialog
+                chatInfoDialogRef={chatInfoDialogRef as any}
+                openChatFragment={(id) => {
+                    setCurrentChatId(id)
+                    setIsShowChatFragment(true)
+                }}
+                chat={chatInfo} />
+
             <mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
                 <mdui-button-icon slot="top">
                     <Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyUserProfileDialogButtonRef} />
@@ -162,9 +150,8 @@ export default function App() {
                 {
                     // 联系人列表
                     <ContactsList
-                        openChatFragment={(id) => {
+                        setChatInfo={setChatInfo}
-                            setIsShowChatFragment(true)
+                        chatInfoDialogRef={chatInfoDialogRef as any}
-                        }}
                         display={navigationItemSelected == "Contacts"} />
                 }
             </div>

client/ui/dialog/ChatInfoDialog.tsx

@@ -4,20 +4,28 @@ import useAsyncEffect from "../useAsyncEffect.ts"
 import Client from "../../api/Client.ts"
 import data from "../../Data.ts"
 import { Dialog } from "mdui"
+import Avatar from "../Avatar.tsx";
+import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     chat: Chat
+    openChatFragment: (id: string) => void
     chatInfoDialogRef: React.MutableRefObject<Dialog>
 }
 
-export default function ChatInfoDialog({ chat, chatInfoDialogRef }: Args) {
+export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragment }: Args) {
-    const [isMySelf, setIsMySelf] = React.useState(false)
+    const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
+    const isMySelf = Client.myUserProfile?.id == chatInfo?.user_a_id && Client.myUserProfile?.id == chatInfo?.user_b_id
 
     useAsyncEffect(async () => {
+        if (chat == null) return
         const re = await Client.invoke("Chat.getInfo", {
             token: data.access_token,
             target: chat.id,
         })
+        if (re.code != 200)
+            return checkApiSuccessOrSncakbar(re, '獲取對話訊息失敗')
+        setChatInfo(re.data!.chat_info as Chat)
     })
 
     return (
@@ -26,14 +34,14 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef }: Args) {
                 display: 'flex',
                 alignItems: 'center',
             }}>
-                <Avatar src={chat?.avatar} text={chat?.nickname} style={{
+                <Avatar src={chat?.avatar as string} text={chat?.nickname as string} style={{
                     width: '50px',
                     height: '50px',
                 }} />
                 <span style={{
                     marginLeft: "15px",
                     fontSize: '16.5px',
-                }}>{user?.nickname}</span>
+                }}>{chat?.title}</span>
             </div>
             <mdui-divider style={{
                 marginTop: "10px",
@@ -41,14 +49,10 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef }: Args) {
             }}></mdui-divider>
 
             <mdui-list>
-                {!isMySelf && <mdui-list-item icon="edit" rounded>編輯聯絡人訊息</mdui-list-item>}
+                <mdui-list-item icon="chat" rounded onClick={() => {
-                {
+                    chatInfoDialogRef.current!.open = false
-                    isMySelf && <>
+                    openChatFragment(chat.id)
-                        <mdui-list-item icon="edit" rounded>編輯資料</mdui-list-item>
+                }}>對話</mdui-list-item>
-                        <mdui-list-item icon="settings" rounded>賬號設定</mdui-list-item>
-                        <mdui-list-item icon="lock" rounded>隱私設定</mdui-list-item>
-                    </>
-                }
             </mdui-list>
         </mdui-dialog>
     )