feat: 添加對話

client/ui/App.tsx

@@ -18,8 +18,9 @@ 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";
+import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx"
+import Chat from "../api/client_data/Chat.ts"
+import AddContactDialog from './dialog/AddContactDialog.tsx'
 
 declare global {
     namespace React {
@@ -56,6 +57,8 @@ export default function App() {
     useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
         userProfileDialogRef.current!.open = true
     })
+    
+    const addContactDialogRef = React.useRef<Dialog>(null)
 
     const chatInfoDialogRef = React.useRef<Dialog>(null)
     const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
@@ -120,6 +123,9 @@ export default function App() {
                     setIsShowChatFragment(true)
                 }}
                 chat={chatInfo} />
+            
+            <AddContactDialog
+                addContactDialogRef={addContactDialogRef} />
 
             <mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
                 <mdui-button-icon slot="top">
@@ -151,6 +157,7 @@ export default function App() {
                     // 對話列表
                     <ContactsList
                         setChatInfo={setChatInfo}
+                        addContactDialogRef={addContactDialogRef as any}
                         chatInfoDialogRef={chatInfoDialogRef as any}
                         display={navigationItemSelected == "Contacts"} />
                 }

client/ui/AppMobile.tsx

@@ -19,6 +19,7 @@ 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"
+import AddContactDialog from './dialog/AddContactDialog.tsx'
 
 declare global {
     namespace React {
@@ -55,6 +56,8 @@ export default function AppMobile() {
     useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
         userProfileDialogRef.current!.open = true
     })
+    
+    const addContactDialogRef = React.useRef<Dialog>(null)
 
     const chatInfoDialogRef = React.useRef<Dialog>(null)
     const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
@@ -139,6 +142,9 @@ export default function AppMobile() {
                     setIsShowChatFragment(true)
                 }}
                 chat={chatInfo} />
+                
+            <AddContactDialog
+                addContactDialogRef={addContactDialogRef} />
 
             <mdui-top-app-bar style={{
                 position: 'sticky',
@@ -150,7 +156,7 @@ export default function AppMobile() {
                 <mdui-top-app-bar-title>{
                     ({
                         Recents: "最近對話",
-                        Contacts: "對話"
+                        Contacts: "所有對話"
                     })[navigationItemSelected]
                 }</mdui-top-app-bar-title>
                 <div style={{
@@ -185,6 +191,7 @@ export default function AppMobile() {
                     // 對話列表
                     <ContactsList
                         setChatInfo={setChatInfo}
+                        addContactDialogRef={addContactDialogRef as any}
                         chatInfoDialogRef={chatInfoDialogRef as any}
                         display={navigationItemSelected == "Contacts"} />
                 }

client/ui/dialog/AddContactDialog.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react'
 import { Button, Dialog, TextField } from "mdui"
 import useEventListener from "../useEventListener.ts"
-import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
+import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
 import Client from "../../api/Client.ts"
 
 import * as CryptoJS from 'crypto-js'
 import data from "../../Data.ts"
+import EventBus from "../../EventBus.ts"
 
 interface Refs {
     addContactDialogRef: React.MutableRefObject<Dialog | null>
@@ -14,35 +15,27 @@ interface Refs {
 export default function AddContactDialog({
     addContactDialogRef,
 }: Refs) {
-    const loginButtonRef = React.useRef<Button>(null)
-    const registerButtonRef = React.useRef<Button>(null)
-    useEventListener(registerButtonRef, 'click', () => registerDialogRef.current!.open = true)
-    useEventListener(loginButtonRef, 'click', async () => {
-        const account = loginInputAccountRef.current!.value
-        const password = loginInputPasswordRef.current!.value
-
-        const re = await Client.invoke("User.login", {
-            account: account,
-            password: CryptoJS.SHA256(password).toString(CryptoJS.enc.Hex),
-        })
-
-        if (checkApiSuccessOrSncakbar(re, "登錄失敗")) return
-
-        data.access_token = re.data!.access_token as string
-        data.apply()
-        location.reload()
-    })
+    const inputUserAccountRef = React.useRef<TextField>(null)
     return (
         <mdui-dialog headline="添加對話" ref={addContactDialogRef}>
-
-            <mdui-text-field label="用戶 ID / 用戶名" ref={loginInputAccountRef as any}></mdui-text-field>
-            <div style={{
-                height: "10px",
-            }}></div>
-            <mdui-text-field label="密碼" type="password" toggle-password ref={loginInputPasswordRef as any}></mdui-text-field>
-
+            現階段只支持添加用戶, 對話敬請期待...
+            <mdui-text-field style={{ marginTop: "10px", }} label="對方的 用戶 ID / 用戶名" ref={inputUserAccountRef as any}></mdui-text-field>
             <mdui-button slot="action" variant="text" onClick={() => addContactDialogRef.current!.open = false}>取消</mdui-button>
-            <mdui-button slot="action" variant="text">添加</mdui-button>
+            <mdui-button slot="action" variant="text" onClick={async () => {
+                const re = await Client.invoke("User.addContact", {
+                    account: inputUserAccountRef.current!.value,
+                    token: data.access_token,
+                })
+        
+                if (checkApiSuccessOrSncakbar(re, "添加失敗")) return
+                snackbar({
+                    message: "添加成功!",
+                    placement: "top",
+                })
+                EventBus.emit('ContactsList.updateContacts')
+                
+                addContactDialogRef.current!.open = false
+            }}>添加</mdui-button>
         </mdui-dialog>
     )
 }

server/api/UserApi.ts

@@ -226,7 +226,7 @@ export default class UserApi extends BaseApi {
         })
         // 添加聯絡人
         this.registerEvent("User.addContact", (args, { deviceId }) => {
-            if (this.checkArgsMissing(args, ['token', 'contact_chat_id'])) return {
+            if (this.checkArgsMissing(args, ['token']) || (args.chat_id == null && args.account == null)) return {
                 msg: "參數缺失",
                 code: 400,
             }
@@ -238,7 +238,19 @@ export default class UserApi extends BaseApi {
             }
 
             const user = User.findById(token.author)
-            user!.addContact(args.contact_chat_id as string)
+            if (args.chat_id)
+                user!.addContact(args.chat_id as string)
+            else if (args.account) {
+                const targetUser = User.findByAccount(args.account as string) as User
+                if (targetUser == null) {
+                    return {
+                        msg: "找不到用戶",
+                        code: 404,
+                    }
+                }
+                const chat = ChatPrivate.findOrCreateForPrivate(user, targetUser)
+                user!.addContact(chat.bean.id)
+            }
 
             return {
                 msg: "成功",