chore: 使用 TS 重構部分 React 組件, 引入 Mdui 部分組件的類型定義

client/Imports.ts

@@ -2,8 +2,28 @@ import * as React from 'https://esm.sh/react@18.3.1'
 import * as ReactDOM from 'https://esm.sh/react-dom@18.3.1'
 import CryptoES from 'https://unpkg.com/crypto-es@3.0.4/dist/index.mjs'
 
+import type { Dialog } from 'https://unpkg.com/mdui@2.1.4/components/dialog/index.d.ts'
+import type { TextField } from 'https://unpkg.com/mdui@2.1.4/components/text-field/index.d.ts'
+import type { Button } from 'https://unpkg.com/mdui@2.1.4/components/button/index.d.ts'
+import type { NavigationRail } from 'https://unpkg.com/mdui@2.1.4/components/navigation-rail/navigation-rail.d.ts'
+
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicAttributes {
+                id?: string
+            }
+        }
+    }
+}
+
 export {
     React,
     ReactDOM,
     CryptoES,
+
+    Dialog as MduiDialog,
+    TextField as MduiTextField,
+    Button as MduiButton,
+    NavigationRail as MduiNavigationRail,
 }

client/index.html

@@ -99,7 +99,7 @@
         alert('很抱歉, 此应用无法在较旧的浏览器运行, 请使用基于 Chromium 89+ 的浏览器(内核)使用 :(')
     </script>
     <script type="module">
-        import App from './ui/App.jsx'
+        import App from './ui/App.tsx'
         import { React, ReactDOM } from './Imports.ts'
         ReactDOM.createRoot(document.getElementById('app')).render(React.createElement(App, null))
 

client/ui/App.tsx

@@ -1,70 +1,70 @@
 import Client from "../api/Client.ts"
 import data from "../Data.ts"
 import ChatFragment from "./chat/ChatFragment.jsx"
-import LoginDialog from "./dialog/LoginDialog.jsx"
+import LoginDialog from "./dialog/LoginDialog.tsx"
 import ContactsListItem from "./main/ContactsListItem.jsx"
 import RecentsListItem from "./main/RecentsListItem.jsx"
 import snackbar from "./snackbar.js"
 import useEventListener from './useEventListener.js'
 
-import { React } from '../Imports.ts'
+import { MduiDialog, React, MduiNavigationRail, MduiTextField, MduiButton } from '../Imports.ts'
+import User from "../api/client_data/User.ts"
+import RecentChat from "../api/client_data/RecentChat.ts"
 
 export default function App() {
     const [recentsList, setRecentsList] = React.useState([
          {
-            userId: 0,
+            id: '0',
             avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
-            nickName: "麻油衣酱",
+            title: "麻油衣酱",
             content: "成步堂君, 我又坐牢了（"
         },
         {
-            userId: 0,
+            id: '0',
             avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
-            nickName: "Maya Fey",
+            title: "Maya Fey",
             content: "我是绫里真宵, 是一名灵媒师~"
         }, 
-    ])
+    ] as RecentChat[])
     const [contactsMap, setContactsMap] = React.useState({
         所有: [
              {
-                userId: 0,
+                id: '0',
                 avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
-                nickName: "麻油衣酱",
+                nickname: "麻油衣酱",
             },
             {
-                userId: 0,
+                id: '0',
                 avatar: "https://www.court-records.net/mugshot/aa6-004-maya.png",
-                nickName: "Maya Fey",
+                nickname: "Maya Fey",
             }, 
         ],
-    })
+    } as unknown as { [key: string]: User[] })
     const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
 
     const navigationRailRef = React.useRef(null)
     useEventListener(navigationRailRef, 'change', (event) => {
-        setNavigationItemSelected(event.target.value)
+        setNavigationItemSelected((event.target as HTMLElement as MduiNavigationRail).value as string)
     })
 
-    const [
+    const loginDialogRef: React.MutableRefObject<MduiDialog | null> = React.useRef(null)
-        loginDialogRef,
+    const inputAccountRef: React.MutableRefObject<MduiTextField | null> = React.useRef(null)
-        inputAccountRef,
+    const inputPasswordRef: React.MutableRefObject<MduiTextField | null> = React.useRef(null)
-        inputPasswordRef,
+    const registerButtonRef: React.MutableRefObject<MduiButton | null> = React.useRef(null)
-        registerButtonRef,
+    const loginButtonRef: React.MutableRefObject<MduiButton | null> = React.useRef(null)
-        loginButtonRef
-    ] = [React.useRef(null), React.useRef(null), React.useRef(null), React.useRef(null), React.useRef(null)]
 
     React.useEffect(() => {
-        ; (async () => {
+        // deno-lint-ignore no-window-prefix no-window
+        window.addEventListener('load', async () => {
             Client.connect()
             const re = await Client.invoke("User.auth", {
                 access_token: data.access_token,
             })
             if (re.code == 401)
-                loginDialogRef.current.show()
+                loginDialogRef.current!.open = true
             else if (re.code != 200)
                 snackbar("驗證失敗: " + re.msg)
-        })()
+        })
-        return () => { }
     }, [])
 
     return (
@@ -107,8 +107,8 @@ export default function App() {
                         {
                             recentsList.map((v) =>
                                 <RecentsListItem
-                                    key={v.userId}
+                                    key={v.id}
-                                    nickName={v.nickName}
+                                    nickName={v.title}
                                     avatar={v.avatar}
                                     content={v.content} />
                             )
@@ -130,8 +130,8 @@ export default function App() {
                                         {
                                             contactsMap[v].map((v2) =>
                                                 <ContactsListItem
-                                                    key={v2.userId}
+                                                    key={v2.id}
-                                                    nickName={v2.nickName}
+                                                    nickName={v2.nickname}
                                                     avatar={v2.avatar} />
                                             )
                                         }

client/ui/dialog/LoginDialog.tsx

@@ -1,4 +1,13 @@
-import { React } from '../../Imports.ts'
+import { React, MduiDialog, MduiTextField, MduiButton } from '../../Imports.ts'
+import '../../mdui-jsx.d.ts'
+
+interface Refs {
+    inputAccountRef: React.MutableRefObject<MduiTextField | null>
+    inputPasswordRef: React.MutableRefObject<MduiTextField | null>
+    registerButtonRef: React.MutableRefObject<MduiButton | null>
+    loginButtonRef: React.MutableRefObject<MduiButton | null>
+    loginDialogRef: React.MutableRefObject<MduiDialog | null>
+}
 
 export default function LoginDialog({
     inputAccountRef,
@@ -6,7 +15,7 @@ export default function LoginDialog({
     registerButtonRef,
     loginButtonRef,
     loginDialogRef
-}) {
+}: Refs) {
     return (
         <mdui-dialog headline="登录" ref={loginDialogRef}>