fix: fix the issue of desktop app not being able to synchronize actio…

…n modifications in real time (#1541)
openai-translator · May 12, 2024 · 4e97c74 · 4e97c74
1 parent 9eefa72
commit 4e97c74
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 20 deletions.
diff --git a/src/common/components/ActionManager.tsx b/src/common/components/ActionManager.tsx
@@ -10,7 +10,7 @@ import { format } from 'date-fns'
 import { Button } from 'baseui-sd/button'
 import { List, arrayMove } from 'baseui-sd/dnd-list'
 import { RiDeleteBinLine } from 'react-icons/ri'
-import { createElement, useReducer, useState } from 'react'
+import { createElement, useCallback, useReducer, useState } from 'react'
 import * as mdIcons from 'react-icons/md'
 import { Action } from '../internal-services/db'
 import { Modal, ModalBody, ModalButton, ModalFooter, ModalHeader } from 'baseui-sd/modal'
@@ -19,6 +19,7 @@ import { IconType } from 'react-icons'
 import { isDesktopApp } from '../utils'
 import { MdArrowDownward, MdArrowUpward } from 'react-icons/md'
 import { useSettings } from '../hooks/useSettings'
+import { emit } from '@tauri-apps/api/event'
 
 const useStyles = createUseStyles({
     root: () => ({
@@ -146,7 +147,7 @@ export interface IActionManagerProps {
 }
 
 export function ActionManager({ draggable = true }: IActionManagerProps) {
-    const [refreshActionsFlag, refreshActions] = useReducer((x: number) => x + 1, 0)
+    const [refreshActionsFlag, changeRefreshActionsFlag] = useReducer((x: number) => x + 1, 0)
     const { t } = useTranslation()
     const { theme, themeType } = useTheme()
     const styles = useStyles({ theme, themeType })
@@ -156,6 +157,14 @@ export function ActionManager({ draggable = true }: IActionManagerProps) {
     const [deletingAction, setDeletingAction] = useState<Action>()
     const { settings } = useSettings()
 
+    const refreshActions = useCallback(() => {
+        if (!isDesktopApp()) {
+            changeRefreshActionsFlag()
+            return
+        }
+        emit('refresh-actions', {})
+    }, [])
+
     return (
         <div
             className={styles.root}
@@ -215,9 +224,7 @@ export function ActionManager({ draggable = true }: IActionManagerProps) {
                                 }
                             })
                         )
-                        if (!isDesktopApp()) {
-                            refreshActions()
-                        }
+                        refreshActions()
                     }}
                     items={actions?.map((action, idx) => (
                         <div key={action.id} className={styles.actionItem}>
@@ -268,9 +275,7 @@ export function ActionManager({ draggable = true }: IActionManagerProps) {
                                                         }
                                                     })
                                                 )
-                                                if (!isDesktopApp()) {
-                                                    refreshActions()
-                                                }
+                                                refreshActions()
                                             }}
                                         >
                                             <MdArrowUpward size={12} />
@@ -290,9 +295,7 @@ export function ActionManager({ draggable = true }: IActionManagerProps) {
                                                         }
                                                     })
                                                 )
-                                                if (!isDesktopApp()) {
-                                                    refreshActions()
-                                                }
+                                                refreshActions()
                                             }}
                                         >
                                             <MdArrowDownward size={12} />
@@ -349,9 +352,7 @@ export function ActionManager({ draggable = true }: IActionManagerProps) {
                         action={updatingAction}
                         onSubmit={() => {
                             setShowActionForm(false)
-                            if (!isDesktopApp()) {
-                                refreshActions()
-                            }
+                            refreshActions()
                         }}
                     />
                 </ModalBody>
@@ -383,9 +384,7 @@ export function ActionManager({ draggable = true }: IActionManagerProps) {
                         size='compact'
                         onClick={async () => {
                             await actionService.delete(deletingAction?.id as number)
-                            if (!isDesktopApp()) {
-                                refreshActions()
-                            }
+                            refreshActions()
                             setDeletingAction(undefined)
                         }}
                     >

diff --git a/src/common/components/Translator.tsx b/src/common/components/Translator.tsx
@@ -516,6 +516,21 @@ function InnerTranslator(props: IInnerTranslatorProps) {
 
     const [refreshActionsFlag, refreshActions] = useReducer((x: number) => x + 1, 0)
 
+    useEffect(() => {
+        if (!isDesktopApp()) {
+            return
+        }
+        let unlisten: undefined | (() => void)
+        listen('refresh-actions', () => {
+            refreshActions()
+        }).then((cb) => {
+            unlisten = cb
+        })
+        return () => {
+            unlisten?.()
+        }
+    }, [])
+
     const [showActionManager, setShowActionManager] = useState(false)
 
     const [translationFlag, forceTranslate] = useReducer((x: number) => x + 1, 0)
@@ -711,6 +726,20 @@ function InnerTranslator(props: IInnerTranslatorProps) {
 
     const actions = useLiveQuery(() => actionService.list(), [refreshActionsFlag])
 
+    useEffect(() => {
+        if (!activateAction) {
+            return
+        }
+        if (!actions) {
+            return
+        }
+        setActivateAction(
+            actions.find((action) =>
+                action.id !== undefined ? action.id === activateAction.id : action.mode === activateAction.mode
+            )
+        )
+    }, [actions, activateAction])
+
     const [displayedActions, setDisplayedActions] = useState<Action[]>([])
     const [hiddenActions, setHiddenActions] = useState<Action[]>([])
 
@@ -2521,9 +2550,7 @@ function InnerTranslator(props: IInnerTranslatorProps) {
                 isOpen={!isDesktopApp() && showActionManager}
                 onClose={() => {
                     setShowActionManager(false)
-                    if (!isDesktopApp()) {
-                        refreshActions()
-                    }
+                    refreshActions()
                 }}
                 closeable
                 size='auto'