CrescentLeaf/LingChair
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: 封裝 useAsyncEffect

Browse Source
This commit is contained in:
CrescentLeaf
2025-09-20 18:26:08 +08:00
parent 3b98fc4de3
commit 167b157134
4 changed files with 52 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
client/ui/App.tsx
View File

@@ -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 RecentsList from "./main/RecentsList.tsx";
import ContactsList from "./main/ContactsList.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(() => {
; (async () => {
const split = Split(['#SideBar', '#ChatFragment'], {
sizes: data.split_sizes ? data.split_sizes : [25, 75],
minSize: [200, 400],
gutterSize: 2,
onDragEnd: function () {
data.split_sizes = split.getSizes()
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)
useAsyncEffect(async () => {
const split = Split(['#SideBar', '#ChatFragment'], {
sizes: data.split_sizes ? data.split_sizes : [25, 75],
minSize: [200, 400],
gutterSize: 2,
onDragEnd: function () {
data.split_sizes = split.getSizes()
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)
}
})
return (
<div style={{
@@ -166,9 +165,7 @@ export default function App() {
openChatFragment={(id) => {
setIsShowChatFragment(true)
}}
display={navigationItemSelected == "Contacts"}
contactsList={contactsList}
setContactsList={setContactsList} />
display={navigationItemSelected == "Contacts"} />
}
</div>
{

25
client/ui/AppMobile.tsx
View File

@@ -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(() => {
; (async () => {
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)
}
})()
}, [])
useAsyncEffect(async () => {
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={{

21
client/ui/chat/ChatFragment.tsx
View File

@@ -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(() => {
;(async () => {
const re = await Client.invoke('Chat.getInfo', {
token: data.access_token,
target: target,
})
if (re.code != 200)
return checkApiSuccessOrSncakbar(re, "對話錯誤")
setChatInfo(re.data as Chat)
})()
useAsyncEffect(async () => {
const re = await Client.invoke('Chat.getInfo', {
token: data.access_token,
target: target,
})
if (re.code != 200)
return checkApiSuccessOrSncakbar(re, "對話錯誤")
setChatInfo(re.data as Chat)
}, [target])
console.log(tabItemSelected)

5
client/ui/useAsyncEffect.ts Normal file
View File

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