refactor: 封裝 useAsyncEffect

client/ui/App.tsx

@@ -15,8 +15,9 @@ import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
 import RegisterDialog from "./dialog/RegisterDialog.tsx"
 import LoginDialog from "./dialog/LoginDialog.tsx"
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
-import ContactsList from "./main/ContactsList.tsx";
+import ContactsList from "./main/ContactsList.tsx"
-import RecentsList from "./main/RecentsList.tsx";
+import RecentsList from "./main/RecentsList.tsx"
+import useAsyncEffect from "./useAsyncEffect.ts"
 
 declare global {
     namespace React {
@@ -56,7 +57,7 @@ export default function App() {
             nickname: "Maya Fey",
         },
     ] as User[])
-    
+
     const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
 
     const navigationRailRef = React.useRef<NavigationRail>(null)
@@ -85,29 +86,27 @@ export default function App() {
 
     const [currentChatId, setCurrentChatId] = React.useState('')
 
-    React.useEffect(() => {
+    useAsyncEffect(async () => {
-        ; (async () => {
+        const split = Split(['#SideBar', '#ChatFragment'], {
-            const split = Split(['#SideBar', '#ChatFragment'], {
+            sizes: data.split_sizes ? data.split_sizes : [25, 75],
-                sizes: data.split_sizes ? data.split_sizes : [25, 75],
+            minSize: [200, 400],
-                minSize: [200, 400],
+            gutterSize: 2,
-                gutterSize: 2,
+            onDragEnd: function () {
-                onDragEnd: function () {
+                data.split_sizes = split.getSizes()
-                    data.split_sizes = split.getSizes()
+                data.apply()
-                    data.apply()
-                }
-            })
-
-            Client.connect()
-            const re = await Client.auth(data.access_token || "")
-            if (re.code == 401)
-                loginDialogRef.current!.open = true
-            else if (re.code != 200) {
-                if (checkApiSuccessOrSncakbar(re, "驗證失敗")) return
-            } else if (re.code == 200) {
-                setMyUserProfileCache(Client.myUserProfile as User)
             }
-        })()
+        })
-    }, [])
+
+        Client.connect()
+        const re = await Client.auth(data.access_token || "")
+        if (re.code == 401)
+            loginDialogRef.current!.open = true
+        else if (re.code != 200) {
+            if (checkApiSuccessOrSncakbar(re, "驗證失敗")) return
+        } else if (re.code == 200) {
+            setMyUserProfileCache(Client.myUserProfile as User)
+        }
+    })
 
     return (
         <div style={{
@@ -166,9 +165,7 @@ export default function App() {
                         openChatFragment={(id) => {
                             setIsShowChatFragment(true)
                         }}
-                        display={navigationItemSelected == "Contacts"}
+                        display={navigationItemSelected == "Contacts"} />
-                        contactsList={contactsList}
-                        setContactsList={setContactsList} />
                 }
             </div>
             {

client/ui/AppMobile.tsx

@@ -14,6 +14,7 @@ import LoginDialog from "./dialog/LoginDialog.tsx"
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
 import ContactsList from "./main/ContactsList.tsx"
 import RecentsList from "./main/RecentsList.tsx"
+import useAsyncEffect from "./useAsyncEffect.ts"
 
 declare global {
     namespace React {
@@ -79,19 +80,17 @@ export default function AppMobile() {
 
     const [myUserProfileCache, setMyUserProfileCache]: [User, React.Dispatch<React.SetStateAction<User>>] = React.useState(null as unknown as User)
 
-    React.useEffect(() => {
+    useAsyncEffect(async () => {
-        ; (async () => {
+        Client.connect()
-            Client.connect()
+        const re = await Client.auth(data.access_token || "")
-            const re = await Client.auth(data.access_token || "")
+        if (re.code == 401)
-            if (re.code == 401)
+            loginDialogRef.current!.open = true
-                loginDialogRef.current!.open = true
+        else if (re.code != 200) {
-            else if (re.code != 200) {
+            if (checkApiSuccessOrSncakbar(re, "驗證失敗")) return
-                if (checkApiSuccessOrSncakbar(re, "驗證失敗")) return
+        } else if (re.code == 200) {
-            } else if (re.code == 200) {
+            setMyUserProfileCache(Client.myUserProfile as User)
-                setMyUserProfileCache(Client.myUserProfile as User)
+        }
-            }
+    })
-        })()
-    }, [])
 
     return (
         <div style={{

client/ui/chat/ChatFragment.tsx

@@ -1,6 +1,6 @@
 import { Tab } from "mdui"
 import useEventListener from "../useEventListener.ts"
-import Element_Message  from "./Message.jsx"
+import Element_Message from "./Message.jsx"
 import MessageContainer from "./MessageContainer.jsx"
 
 import * as React from 'react'
@@ -9,6 +9,7 @@ import Message from "../../api/client_data/Message.ts"
 import Chat from "../../api/client_data/Chat.ts"
 import data from "../../Data.ts"
 import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
+import useAsyncEffect from "../useAsyncEffect.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     target: string,
@@ -26,16 +27,14 @@ export default function ChatFragment({ target, ...props }: Args) {
         setTabItemSelected(tabRef.current?.value || "Chat")
     })
 
-    React.useEffect(() => {
+    useAsyncEffect(async () => {
-        ;(async () => {
+        const re = await Client.invoke('Chat.getInfo', {
-            const re = await Client.invoke('Chat.getInfo', {
+            token: data.access_token,
-                token: data.access_token,
+            target: target,
-                target: target,
+        })
-            })
+        if (re.code != 200)
-            if (re.code != 200) 
+            return checkApiSuccessOrSncakbar(re, "對話錯誤")
-                return checkApiSuccessOrSncakbar(re, "對話錯誤")
+        setChatInfo(re.data as Chat)
-            setChatInfo(re.data as Chat)
-        })()
     }, [target])
 
     console.log(tabItemSelected)

client/ui/useAsyncEffect.ts

@@ -0,0 +1,5 @@
+export default function useAsyncEffect(func: Function, deps?: React.DependencyList) {
+    React.useEffect(() => {
+        ;(async () => await func())
+    }, deps)
+}