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 {
@@ -85,8 +86,7 @@ export default function App() {
 
     const [currentChatId, setCurrentChatId] = React.useState('')
 
-    React.useEffect(() => {
+    useAsyncEffect(async () => {
-        ; (async () => {
         const split = Split(['#SideBar', '#ChatFragment'], {
             sizes: data.split_sizes ? data.split_sizes : [25, 75],
             minSize: [200, 400],
@@ -106,8 +106,7 @@ export default function App() {
         } 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,8 +80,7 @@ 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()
         const re = await Client.auth(data.access_token || "")
         if (re.code == 401)
@@ -90,8 +90,7 @@ export default function AppMobile() {
         } else if (re.code == 200) {
             setMyUserProfileCache(Client.myUserProfile as User)
         }
-        })()
+    })
-    }, [])
 
     return (
         <div style={{

client/ui/chat/ChatFragment.tsx

@@ -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,8 +27,7 @@ export default function ChatFragment({ target, ...props }: Args) {
         setTabItemSelected(tabRef.current?.value || "Chat")
     })
 
-    React.useEffect(() => {
+    useAsyncEffect(async () => {
-        ;(async () => {
         const re = await Client.invoke('Chat.getInfo', {
             token: data.access_token,
             target: target,
@@ -35,7 +35,6 @@ export default function ChatFragment({ target, ...props }: Args) {
         if (re.code != 200)
             return checkApiSuccessOrSncakbar(re, "對話錯誤")
         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)
+}