feat(client): creat Group

client/ui/Main.tsx

@@ -10,7 +10,7 @@ import { CallbackError, Chat, UserMySelf } from "lingchair-client-protocol"
 import showCircleProgressDialog from "./showCircleProgressDialog.ts"
 import RegisterDialog from "./main-page/RegisterDialog.tsx"
 import sleep from "../utils/sleep.ts"
-import { $, dialog, NavigationDrawer } from "mdui"
+import { $, NavigationDrawer } from "mdui"
 import getClient from "../getClient.ts"
 import showSnackbar from "../utils/showSnackbar.ts"
 import AllChatsList from "./main-page/AllChatsList.tsx"
@@ -135,7 +135,7 @@ function Root() {
                             }}></mdui-divider>
                             <mdui-list-item rounded icon="settings">客户端设置</mdui-list-item>
                             <mdui-list-item rounded icon="person_add" onClick={() => AppStateRef.current!.openAddFavouriteChat()}>添加收藏对话</mdui-list-item>
-                            <mdui-list-item rounded icon="group_add">创建新的群组</mdui-list-item>
+                            <mdui-list-item rounded icon="group_add" onClick={() => AppStateRef.current!.openCreateGroup()}>创建新的群组</mdui-list-item>
                         </mdui-list>
                         <div style={{
                             flexGrow: 1,

client/ui/app-state/AppStateContext.ts

@@ -2,12 +2,13 @@ import { Chat, User } from 'lingchair-client-protocol'
 import * as React from 'react'
 
 type AppState = {
-    openChatInfo: (chat: Chat | string) => void,
+    openChatInfo: (chat: Chat | string) => void
-    openUserInfo: (user: Chat | User | string) => void,
+    openUserInfo: (user: Chat | User | string) => void
-    openEditMyProfile: () => void,
+    openEditMyProfile: () => void
-    openAddFavouriteChat: () => void,
+    openAddFavouriteChat: () => void
-    openChat: (chat: string | Chat, inDialog?: boolean) => void,
+    openCreateGroup: () => void
-    closeChat: () => void,
+    openChat: (chat: string | Chat, inDialog?: boolean) => void
+    closeChat: () => void
 }
 
 const AppStateContext = React.createContext<AppState>({
@@ -15,6 +16,7 @@ const AppStateContext = React.createContext<AppState>({
     openUserInfo: () => {},
     openEditMyProfile: () => {},
     openAddFavouriteChat: () => {},
+    openCreateGroup: () => {},
     openChat: () => {},
     closeChat: () => {},
 })

client/ui/app-state/AppStateContextWrapper.tsx

@@ -12,6 +12,7 @@ import MainSharedContext, { Shared } from "../MainSharedContext.ts"
 import ChatFragmentDialog from "./ChatFragmentDialog.tsx"
 import useAsyncEffect from "../../utils/useAsyncEffect.ts"
 import ClientCache from "../../ClientCache.ts"
+import CreateGroupDialog from "./CreateGroupDialog.tsx"
 
 const config = await fetch('/config.json').then((re) => re.json())
 
@@ -33,6 +34,7 @@ export default function DialogContextWrapper({ children, useRef }: { children: R
 
     const editMyProfileDialogRef = React.useRef<Dialog>()
     const addFavouriteChatDialogRef = React.useRef<Dialog>()
+    const createGroupDialogRef = React.useRef<Dialog>()
 
     const setCurrentSelectedChatId = useContextSelector(
         MainSharedContext,
@@ -66,6 +68,9 @@ export default function DialogContextWrapper({ children, useRef }: { children: R
         static openAddFavouriteChat() {
             addFavouriteChatDialogRef.current!.open = true
         }
+        static openCreateGroup() {
+            createGroupDialogRef.current!.open = true
+        }
         static async openChat(chat: string | Chat, inDialog?: boolean) {
             if (chat instanceof Chat) chat = chat.getId()
 
@@ -87,6 +92,7 @@ export default function DialogContextWrapper({ children, useRef }: { children: R
         <UserOrChatInfoDialog chat={userOrChatInfoDialogState[userOrChatInfoDialogState.length - 1] || lastUserOrChatInfoDialogStateRef.current} useRef={userOrChatInfoDialogRef} />
         <EditMyProfileDialog useRef={editMyProfileDialogRef} />
         <AddFavourtieChatDialog useRef={addFavouriteChatDialogRef} />
+        <CreateGroupDialog useRef={createGroupDialogRef} />
         {children}
     </AppStateContext.Provider>
 }

client/ui/app-state/CreateGroupDialog.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { Dialog, TextField } from "mdui"
 import showSnackbar from '../../utils/showSnackbar'
-import { CallbackError } from 'lingchair-client-protocol'
+import { CallbackError, Chat } from 'lingchair-client-protocol'
 import useEventListener from '../../utils/useEventListener.ts'
-import ClientCache from '../../ClientCache.ts'
+import getClient from '../../getClient.ts'
 
 export default function CreateGroupDialog({ useRef }: { useRef: React.MutableRefObject<Dialog | undefined> }) {
     const inputTargetRef = React.useRef<TextField>(null)
@@ -12,29 +12,30 @@ export default function CreateGroupDialog({ useRef }: { useRef: React.MutableRef
         inputTargetRef.current!.value = ''
     })
 
-    async function addFavouriteChat() {
+    async function createGroup() {
         try {
-            await (await ClientCache.getMySelf())!.addFavouriteChatsOrThrow([inputTargetRef.current!.value])
+            await Chat.createGroupOrThrow(getClient(), inputTargetRef.current!.value)
             inputTargetRef.current!.value = ''
             showSnackbar({
-                message: '添加成功!'
+                message: '创建成功!'
             })
+            useRef.current!.open = false
         } catch (e) {
             if (e instanceof CallbackError)
                 showSnackbar({
-                    message: '添加收藏对话失败: ' + e.message
+                    message: '创建群组失败: ' + e.message
                 })
         }
     }
 
     return (
-        <mdui-dialog close-on-overlay-click close-on-esc headline="添加收藏对话" ref={useRef}>
+        <mdui-dialog close-on-overlay-click close-on-esc headline="创建群组" ref={useRef}>
-            <mdui-text-field clearable label="对话 / 用户 (ID 或 别名)" ref={inputTargetRef} onKeyDown={(event: KeyboardEvent) => {
+            <mdui-text-field clearable label="群组标题" ref={inputTargetRef} onKeyDown={(event: KeyboardEvent) => {
                 if (event.key == 'Enter')
-                    addFavouriteChat()
+                    createGroup()
             }}></mdui-text-field>
             <mdui-button slot="action" variant="text" onClick={() => useRef.current!.open = false}>取消</mdui-button>
-            <mdui-button slot="action" variant="text" onClick={() => addFavouriteChat()}>添加</mdui-button>
+            <mdui-button slot="action" variant="text" onClick={() => createGroup()}>创建</mdui-button>
         </mdui-dialog>
     )
 }