添加收藏对话改为路由界对话框

client/ui/Main.tsx

@@ -16,7 +16,6 @@ import getClient from "../getClient.ts"
 import showSnackbar from "../utils/showSnackbar.ts"
 import AllChatsList from "./main-page/AllChatsList.tsx"
 import FavouriteChatsList from "./main-page/FavouriteChatsList.tsx"
-import AddFavourtieChatDialog from "./main-page/AddFavourtieChatDialog.tsx"
 import RecentChatsList from "./main-page/RecentChatsList.tsx"
 import UserOrChatInfoDialog from "./routers/UserOrChatInfoDialog.tsx"
 import UserOrChatInfoDialogLoader from "./routers/UserOrChatInfoDialogDataLoader.ts"
@@ -29,6 +28,7 @@ import ProgressDialogFallback from "./ProgressDialogFallback.tsx"
 import Split from 'split.js'
 import data from "../data.ts"
 import LazyChatFragment from "./chat-fragment/LazyChatFragment.tsx"
+import AddFavourtieChatDialog from "./routers/AddFavourtieChatDialog.tsx"
 
 function Root() {
     const [myProfileCache, setMyProfileCache] = React.useState<UserMySelf>()
@@ -56,7 +56,6 @@ function Root() {
 
     const [showLoginDialog, setShowLoginDialog] = React.useState(false)
     const [showRegisterDialog, setShowRegisterDialog] = React.useState(false)
-    const [showAddFavourtieChatDialog, setShowAddFavourtieChatDialog] = React.useState(false)
 
     const nav = useNavigate()
 
@@ -76,7 +75,6 @@ function Root() {
 
         setShowLoginDialog,
         setShowRegisterDialog,
-        setShowAddFavourtieChatDialog,
 
         setCurrentSelectedChatId: (id: string) => dispatch({ type: 'update_selected_chat_id', data: id }),
     }
@@ -133,7 +131,6 @@ function Root() {
                 }
                 <LoginDialog open={showLoginDialog} />
                 <RegisterDialog open={showRegisterDialog} />
-                <AddFavourtieChatDialog open={showAddFavourtieChatDialog} />
                 <mdui-navigation-drawer ref={drawerRef} modal close-on-esc close-on-overlay-click>
                     <mdui-list style={{
                         padding: '10px',
@@ -147,7 +144,7 @@ function Root() {
                             margin: '10px',
                         }}></mdui-divider>
                         <mdui-list-item rounded icon="settings">客户端设置</mdui-list-item>
-                        <mdui-list-item rounded icon="person_add" onClick={() => setShowAddFavourtieChatDialog(true)}>添加收藏对话</mdui-list-item>
+                        <mdui-list-item rounded icon="person_add" onClick={() => nav('/add/favourite_chat')}>添加收藏对话</mdui-list-item>
                         <mdui-list-item rounded icon="group_add">创建新的群组</mdui-list-item>
                     </mdui-list>
                     <div style={{
@@ -284,6 +281,15 @@ export default function Main() {
                 Component: UserOrChatInfoDialog,
                 loader: UserOrChatInfoDialogLoader,
             },
+            {
+                path: 'add',
+                children: [
+                    {
+                        path: 'favourite_chat',
+                        Component: AddFavourtieChatDialog,
+                    },
+                ],
+            },
             {
                 path: 'settings',
                 children: [

client/ui/MainSharedContext.ts

@@ -12,7 +12,6 @@ type Shared = {
     
     setShowLoginDialog: React.Dispatch<React.SetStateAction<boolean>>
     setShowRegisterDialog: React.Dispatch<React.SetStateAction<boolean>>
-    setShowAddFavourtieChatDialog: React.Dispatch<React.SetStateAction<boolean>>
 
     setCurrentSelectedChatId: (id: string) => void
     setFavouriteChats: (chats: Chat[]) => void

client/ui/main-page/FavouriteChatsList.tsx

@@ -14,7 +14,6 @@ import { useNavigate } from "react-router"
 
 export default function FavouriteChatsList({ ...props }: React.HTMLAttributes<HTMLElement>) {
     const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
-        setShowAddFavourtieChatDialog: context.setShowAddFavourtieChatDialog,
         state: context.state,
         functions_lazy: context.functions_lazy,
         setFavouriteChats: context.setFavouriteChats,
@@ -74,7 +73,7 @@ export default function FavouriteChatsList({ ...props }: React.HTMLAttributes<HT
             <mdui-list-item rounded style={{
                 marginTop: '13px',
                 width: '100%',
-            }} icon="person_add" onClick={() => shared.setShowAddFavourtieChatDialog(true)}>添加收藏</mdui-list-item>
+            }} icon="person_add" onClick={() => nav('/add/favourite_chat')}>添加收藏</mdui-list-item>
             <mdui-list-item rounded style={{
                 width: '100%',
             }} icon="refresh" onClick={() => shared.functions_lazy.current.updateFavouriteChats()}>刷新列表</mdui-list-item>

client/ui/routers/AddFavourtieChatDialog.tsx

@@ -1,26 +1,23 @@
 import * as React from 'react'
 import { Button, Dialog, snackbar, TextField } from "mdui"
-import { data } from 'react-router'
+import { data, useNavigate } from 'react-router'
 import { useContextSelector } from 'use-context-selector'
 import MainSharedContext, { Shared } from '../MainSharedContext'
 import showSnackbar from '../../utils/showSnackbar'
 import { CallbackError } from 'lingchair-client-protocol'
 import useEventListener from '../../utils/useEventListener'
+import ClientCache from '../../ClientCache'
+import useRouterDialogRef from './useRouterDialogRef'
 
 export default function AddFavourtieChatDialog({ ...props }: { open: boolean } & React.HTMLAttributes<Dialog>) {
-    const shared = useContextSelector(MainSharedContext, (context: Shared) => ({
+    const dialogRef = useRouterDialogRef()
-        myProfileCache: context.myProfileCache,
+    const nav = useNavigate()
-        setShowAddFavourtieChatDialog: context.setShowAddFavourtieChatDialog,
-    }))
-
-    const dialogRef = React.useRef<Dialog>()
-    useEventListener(dialogRef, 'closed', () => shared.setShowAddFavourtieChatDialog(false))
 
     const inputTargetRef = React.useRef<TextField>(null)
 
     async function addFavouriteChat() {
         try {
-            shared.myProfileCache!.addFavouriteChatsOrThrow([inputTargetRef.current!.value])
+            await (await ClientCache.getMySelf())!.addFavouriteChatsOrThrow([inputTargetRef.current!.value])
             inputTargetRef.current!.value = ''
             showSnackbar({
                 message: '添加成功!'
@@ -39,7 +36,7 @@ export default function AddFavourtieChatDialog({ ...props }: { open: boolean } &
                 if (event.key == 'Enter')
                     addFavouriteChat()
             }}></mdui-text-field>
-            <mdui-button slot="action" variant="text" onClick={() => shared.setShowAddFavourtieChatDialog(false)}>取消</mdui-button>
+            <mdui-button slot="action" variant="text" onClick={() => nav(-1)}>取消</mdui-button>
             <mdui-button slot="action" variant="text" onClick={() => addFavouriteChat()}>添加</mdui-button>
         </mdui-dialog>
     )