彻底放弃客户端路由计划

client/ui/Main.tsx

@@ -3,7 +3,6 @@ import useEventListener from "../utils/useEventListener.ts"
 import AvatarMySelf from "./AvatarMySelf.tsx"
 import MainSharedContext from './MainSharedContext.ts'
 import * as React from 'react'
-import { createBrowserRouter, Outlet, RouterProvider, useNavigate, useRouteError } from "react-router"
 import LoginDialog from "./main-page/LoginDialog.tsx"
 import useAsyncEffect from "../utils/useAsyncEffect.ts"
 import performAuth from "../performAuth.ts"
@@ -17,20 +16,12 @@ import showSnackbar from "../utils/showSnackbar.ts"
 import AllChatsList from "./main-page/AllChatsList.tsx"
 import FavouriteChatsList from "./main-page/FavouriteChatsList.tsx"
 import RecentChatsList from "./main-page/RecentChatsList.tsx"
-import UserOrChatInfoDialog from "./routers/UserOrChatInfoDialog.tsx"
-import UserOrChatInfoDialogLoader from "./routers/UserOrChatInfoDialogDataLoader.ts"
-import ChatInfoDialogDataLoader from "./routers/ChatInfoDialogDataLoader.ts"
-import ChatFragmentDialog from "./routers/ChatFragmentDialog.tsx"
-import EffectOnly from "./EffectOnly.tsx"
 import MainSharedReducer from "./MainSharedReducer.ts"
-import gotoUserInfo from "./routers/gotoUserInfo.ts"
-import EditMyProfileDialog from "./routers/EditMyProfileDialog.tsx"
-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"
-import RouterDialogsContextWrapper from './routers/RouterDialogsContextWrapper.tsx'
+import DialogContextWrapper from "./app-state/AppStateContextWrapper.tsx"
+import { AppState } from "./app-state/AppStateContext.ts"
 
 function Root() {
     const [myProfileCache, setMyProfileCache] = React.useState<UserMySelf>()
@@ -59,8 +50,6 @@ function Root() {
     const [showLoginDialog, setShowLoginDialog] = React.useState(false)
     const [showRegisterDialog, setShowRegisterDialog] = React.useState(false)
 
-    const nav = useNavigate()
-
     const [state, dispatch] = React.useReducer(MainSharedReducer, {
         favouriteChats: [],
         currentSelectedChatId: '',
@@ -118,9 +107,11 @@ function Root() {
         }
     }, [])
 
+    const AppStateRef = React.useRef<AppState>()
+
     return (
-        <RouterDialogsContextWrapper>
-            <MainSharedContext.Provider value={sharedContext}>
+        <MainSharedContext.Provider value={sharedContext}>
+            <DialogContextWrapper useRef={AppStateRef}>
                 <div style={{
                     display: "flex",
                     position: 'relative',
@@ -128,17 +119,13 @@ function Root() {
                     width: '100%',
                     height: 'var(--whitesilk-window-height)',
                 }}>
-                    {
-                        // 将子路由渲染到此处
-                        <Outlet />
-                    }
                     <LoginDialog open={showLoginDialog} />
                     <RegisterDialog open={showRegisterDialog} />
                     <mdui-navigation-drawer ref={drawerRef} modal close-on-esc close-on-overlay-click>
                         <mdui-list style={{
                             padding: '10px',
                         }}>
-                            <mdui-list-item rounded onClick={() => gotoUserInfo(nav, myProfileCache!.getId())}>
+                            <mdui-list-item rounded onClick={() => AppStateRef.current!.openUserInfo(myProfileCache!.getId())}>
                                 <span>{myProfileCache?.getNickName()}</span>
                                 <AvatarMySelf slot="icon" />
                             </mdui-list-item>
@@ -147,7 +134,7 @@ function Root() {
                                 margin: '10px',
                             }}></mdui-divider>
                             <mdui-list-item rounded icon="settings">客户端设置</mdui-list-item>
-                            <mdui-list-item rounded icon="person_add" onClick={() => nav('/add/favourite_chat')}>添加收藏对话</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>
                         <div style={{
@@ -169,7 +156,7 @@ function Root() {
                         !isMobileUI() ?
                             <mdui-navigation-rail ref={navigationRef} contained value="Recents">
                                 <mdui-button-icon slot="top" icon="menu" onClick={() => drawerRef.current!.open = true}></mdui-button-icon>
-    
+
                                 <mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
                                 <mdui-navigation-rail-item icon="favorite_border" active-icon="favorite" value="Favourites"></mdui-navigation-rail-item>
                                 <mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="AllChats"></mdui-navigation-rail-item>
@@ -229,7 +216,7 @@ function Root() {
                         }}>
                             {
                                 (state.currentSelectedChatId && state.currentSelectedChatId != '')
-                                    ? <LazyChatFragment openedWithRouter={false} chatId={state.currentSelectedChatId!} />
+                                    ? <LazyChatFragment openedInDialog={false} chatId={state.currentSelectedChatId!} />
                                     : <div style={{
                                         width: '100%',
                                         textAlign: 'center',
@@ -255,69 +242,11 @@ function Root() {
                         </mdui-navigation-bar>
                     }
                 </div>
-            </MainSharedContext.Provider>
-        </RouterDialogsContextWrapper>
+            </DialogContextWrapper>
+        </MainSharedContext.Provider>
     )
 }
 
-function SnackbarErrorBoundary() {
-    const error = useRouteError()
-    return <EffectOnly effect={() => {
-        const d = dialog({
-            headline: "错误",
-            description: error instanceof Error ? ('[' + error.name + '] ' + (error.stack || error.message)) : error + '',
-            closeOnEsc: true,
-            closeOnOverlayClick: true,
-        })
-        return () => {
-            d.open = false
-        }
-    }} deps={[]} />
-}
-
 export default function Main() {
-    const router = createBrowserRouter([{
-        path: "/",
-        Component: Root,
-        hydrateFallbackElement: <ProgressDialogFallback text="请稍后..." />,
-        ErrorBoundary: SnackbarErrorBoundary,
-        children: [
-            {
-                path: 'info/:type',
-                Component: UserOrChatInfoDialog,
-                loader: UserOrChatInfoDialogLoader,
-            },
-            {
-                path: 'add',
-                children: [
-                    {
-                        path: 'favourite_chat',
-                        Component: AddFavourtieChatDialog,
-                    },
-                ],
-            },
-            {
-                path: 'settings',
-                children: [
-                    {
-                        path: 'edit_profile',
-                        Component: EditMyProfileDialog,
-                    }
-                ],
-            },
-            {
-                path: 'chat',
-                Component: ChatFragmentDialog,
-                children: [
-                    {
-                        path: 'info',
-                        Component: UserOrChatInfoDialog,
-                        loader: ChatInfoDialogDataLoader,
-                    },
-                ],
-            },
-        ],
-    }])
-
-    return <RouterProvider router={router} />
+    return <Root />
 }