refactor: 抽离 openChatInfoDialog

client/ui/App.tsx

@@ -34,8 +34,6 @@ declare global {
 }
 
 export default function App() {
-    const [recentsList, setRecentsList] = React.useState([] as RecentChat[])
-
     const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
 
     const navigationRailRef = React.useRef<NavigationRail>(null)
@@ -57,7 +55,7 @@ export default function App() {
     useEventListener(openMyProfileDialogButtonRef, 'click', (_event) => {
         myProfileDialogRef.current!.open = true
     })
-    
+
     const addContactDialogRef = React.useRef<Dialog>(null)
 
     const chatInfoDialogRef = React.useRef<Dialog>(null)
@@ -91,6 +89,11 @@ export default function App() {
         }
     })
 
+    function openChatInfoDialog(chat: Chat) {
+        setChatInfo(chat)
+        chatInfoDialogRef.current!.open = true
+    }
+
     return (
         <div style={{
             display: "flex",
@@ -123,7 +126,7 @@ export default function App() {
                     setIsShowChatFragment(true)
                 }}
                 chat={chatInfo} />
-            
+
             <AddContactDialog
                 addContactDialogRef={addContactDialogRef} />
 
@@ -149,16 +152,13 @@ export default function App() {
                             setIsShowChatFragment(true)
                         }}
                         display={navigationItemSelected == "Recents"}
-                        currentChatId={currentChatId}
-                        recentsList={recentsList}
-                        setRecentsList={setRecentsList} />
+                        currentChatId={currentChatId} />
                 }
                 {
                     // 對話列表
                     <ContactsList
-                        setChatInfo={setChatInfo}
+                        openChatInfoDialog={openChatInfoDialog}
                         addContactDialogRef={addContactDialogRef as any}
-                        chatInfoDialogRef={chatInfoDialogRef as any}
                         display={navigationItemSelected == "Contacts"} />
                 }
             </div>
@@ -181,6 +181,7 @@ export default function App() {
                 {
                     isShowChatFragment && <ChatFragment
                         target={currentChatId}
+                        openChatInfoDialog={openChatInfoDialog}
                         key={currentChatId} />
                 }
             </div>

client/ui/AppMobile.tsx

@@ -33,8 +33,6 @@ declare global {
 }
 
 export default function AppMobile() {
-    const [recentsList, setRecentsList] = React.useState([] as RecentChat[])
-
     const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
 
     const navigationBarRef = React.useRef<NavigationBar>(null)
@@ -56,7 +54,7 @@ export default function AppMobile() {
     useEventListener(openMyProfileDialogButtonRef, 'click', (_event) => {
         myProfileDialogRef.current!.open = true
     })
-    
+
     const addContactDialogRef = React.useRef<Dialog>(null)
 
     const chatInfoDialogRef = React.useRef<Dialog>(null)
@@ -93,6 +91,11 @@ export default function AppMobile() {
         }
     })
 
+    function openChatInfoDialog(chat: Chat) {
+        setChatInfo(chat)
+        chatInfoDialogRef.current!.open = true
+    }
+
     return (
         <div style={{
             display: "flex",
@@ -113,6 +116,7 @@ export default function AppMobile() {
                         showReturnButton={true}
                         onReturnButtonClicked={() => setIsShowChatFragment(false)}
                         key={currentChatId}
+                        openChatInfoDialog={openChatInfoDialog}
                         target={currentChatId} />
                 </div>
             </mdui-dialog>
@@ -142,7 +146,7 @@ export default function AppMobile() {
                     setIsShowChatFragment(true)
                 }}
                 chat={chatInfo} />
-                
+
             <AddContactDialog
                 addContactDialogRef={addContactDialogRef} />
 
@@ -183,16 +187,13 @@ export default function AppMobile() {
                             setIsShowChatFragment(true)
                         }}
                         display={navigationItemSelected == "Recents"}
-                        currentChatId={currentChatId}
-                        recentsList={recentsList}
-                        setRecentsList={setRecentsList} />
+                        currentChatId={currentChatId} />
                 }
                 {
                     // 對話列表
                     <ContactsList
-                        setChatInfo={setChatInfo}
+                        openChatInfoDialog={openChatInfoDialog}
                         addContactDialogRef={addContactDialogRef as any}
-                        chatInfoDialogRef={chatInfoDialogRef as any}
                         display={navigationItemSelected == "Contacts"} />
                 }
             </div>

client/ui/main/ContactsList.tsx

@@ -11,15 +11,13 @@ import EventBus from "../../EventBus.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     display: boolean
-    chatInfoDialogRef: React.MutableRefObject<Dialog>
+    openChatInfoDialog: (chat: Chat) => void
     addContactDialogRef: React.MutableRefObject<Dialog>
-    setChatInfo: React.Dispatch<React.SetStateAction<Chat>>
 }
 
 export default function ContactsList({
     display,
-    setChatInfo,
-    chatInfoDialogRef,
+    openChatInfoDialog,
     addContactDialogRef,
     ...props
 }: Args) {
@@ -84,8 +82,7 @@ export default function ContactsList({
                         /*if (isMultiSelecting)
                             self.active = !self.active
                         else*/
-                        setChatInfo(v)
-                        chatInfoDialogRef.current!.open = true
+                        openChatInfoDialog(v)
                     }} 
                     key={v.id}
                     contact={v} />