update window, remove duplicate code

src/browser/ipc/ipc-renderer.ts

@@ -8,14 +8,15 @@ import { SettingService, SettingServiceToken } from '../../common/services/setti
 import { ClipboardService, ClipboardServiceToken } from '../../common/services/clipboard-service';
 import logger from '../../electron-shared/logger';
 import { GlobalHistoryService, GlobalHistoryServiceToken } from '../../common/services/global-history-service';
-import { WindowEvents } from '../../common/window-events';
+import { WindowEvent } from '../../common/window-event';
 import { SettingChannel } from '../../electron-shared/ipc/ipc-channel-setting';
 import { SearchChannel } from '../../electron-shared/ipc/ipc-channel-search';
 import { AutoUpdaterChannel } from '../../electron-shared/ipc/ipc-channel-auto-updater';
 import { AppChannel } from '../../electron-shared/ipc/ipc-channel-app';
 import { GlobalShotCutChannel } from '../../electron-shared/ipc/ipc-channel-global-shot-cut';
 import { LoginChannel } from '../../electron-shared/ipc/ipc-channel-login';
 import { settingChanged } from '../pages/setting/setting-store';
+import { appHotKeyPressed, handleWindowEvent } from '../pages/transient-store';
 
 function registerStorageEventListener(store: Store) {
   logger.debug('register storage event listener');
@@ -24,7 +25,7 @@ function registerStorageEventListener(store: Store) {
 
   // listen setting change
   ipcRenderer.answerMain(SettingChannel.SETTING_CHANGE, async (data: any) => {
-    if (getCurrentWindowId()===WindowId.SEARCH) {
+    if (getCurrentWindowId()===WindowId.HOME) {
       const settingService = rendererContainer.get<SettingService>(SettingServiceToken);
       await settingService.handleSettingChange(data.newValue, data.oldValue);
     }
@@ -37,7 +38,7 @@ function registerStorageEventListener(store: Store) {
     return data.newValue;
   });
 
-  if (getCurrentWindowId()===WindowId.SEARCH) {
+  if (getCurrentWindowId()===WindowId.HOME) {
     // listen clipboard event
     const clipboardService = rendererContainer.get<ClipboardService>(ClipboardServiceToken);
     clipboardService.onClipboardTextChange(((newText, oldText) => {
@@ -49,9 +50,7 @@ function registerStorageEventListener(store: Store) {
     // listen global shot cut event
     ipcRenderer.answerMain(GlobalShotCutChannel.APP_HOT_KEY_PRESSED, async () => {
       logger.log(GlobalShotCutChannel.APP_HOT_KEY_PRESSED, new Date());
-      store.dispatch({
-        type: '_transient/appHotKeyPressed',
-      });
+      appHotKeyPressed()
     });
     // listen app event
     ipcRenderer.answerMain(AppChannel.APP_QUITING, async () => {
@@ -110,11 +109,12 @@ function listenAutoUpdaterEvent(store) {
 
 function listenWindowEvents(store: Store) {
   WindowId.values().forEach(windowId => {
-    WindowEvents.values().forEach(event => {
-      const channelName = windowId.getEventChannelName(event);
+    WindowEvent.values().forEach(event => {
+      const channelName = event.getIpcChannelName(windowId)
       ipcRenderer.answerMain(
         channelName, async () => {
           logger.log(channelName);
+          handleWindowEvent(windowId, event)
           store.dispatch({ type: '_transient/' + channelName });
         });
     });

src/browser/pages/popup/popup-page.tsx

@@ -6,7 +6,7 @@ import { SearchState } from '../search/search-model';
 import { Button, Icon } from 'antd';
 import logger from '../../../electron-shared/logger';
 import { rendererContainer } from "../../../common/container/renderer-container";
-import { SearchUiService, SearchUiServiceToken } from "../../../common/services/search-ui-service";
+import { HomeUiService, SearchUiServiceToken } from "../../../common/services/home-ui-service";
 import { ClipboardService, ClipboardServiceToken } from "../../../common/services/clipboard-service";
 import { PopupUiService, PopupUiServiceToken } from "../../../common/services/popup-ui-service";
 import { removeNormalizeStyle } from '../../utils/style-utils';
@@ -33,7 +33,7 @@ const PopupPage = () => {
   // const searchState: SearchState = useSelector((state: any) => state.search);
   // const { pinned } = searchState;
 
-  const searchUiService = rendererContainer.get<SearchUiService>(SearchUiServiceToken);
+  const searchUiService = rendererContainer.get<HomeUiService>(SearchUiServiceToken);
   const clipboardService = rendererContainer.get<ClipboardService>(ClipboardServiceToken);
   const popupUiService = rendererContainer.get<PopupUiService>(PopupUiServiceToken);
 

src/browser/pages/root-model.ts

@@ -73,7 +73,7 @@ const effects = {
   },
   * login() {
     console.log('login');
-    yield call([loginUiService, loginUiService.open]);
+    yield call([loginUiService, loginUiService.show]);
   },
   * [LoginChannel.LOGIN_CODE_RECEIVED](action) {
     const { payload } = action;

src/browser/pages/search/input/search-input.tsx

@@ -6,6 +6,7 @@ import { SearchInputState } from './search-input-model';
 import { usePrevious } from '../../../hooks/use-previous';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
+import { focusSearchInput } from '../../transient-store';
 
 const Suggestion = styled.div`
   width: 100%;
@@ -68,17 +69,11 @@ export default () => {
               text,
             });
           }
-          dispatch({
-            type: '_transient/mergeState',
-            payload: { focusInput: true },
-          });
+          focusSearchInput()
         }}
         onBlur={() => {
           setOpen(false);
-          dispatch({
-            type: '_transient/mergeState',
-            payload: { focusInput: false },
-          });
+          focusSearchInput()
         }}
         value={text}
         open={open}

src/browser/pages/search/search-model.ts

@@ -1,6 +1,6 @@
 import { call, cancel, delay, fork, put, select, take } from '@redux-saga/core/effects';
 import { Model } from '../../redux/common/redux-model';
-import { SearchUiService, SearchUiServiceToken } from '../../../common/services/search-ui-service';
+import { HomeUiService, SearchUiServiceToken } from '../../../common/services/home-ui-service';
 import { rendererContainer } from '../../../common/container/renderer-container';
 import { TransientState } from '../transient-model';
 import { UserProfile } from '../../../electron-shared/user-profile/user-profile';
@@ -43,8 +43,8 @@ interface SyncHistoryPageAction {
 
 const effects = {
   * togglePinned() {
-    const searchUiService = rendererContainer.get<SearchUiService>(SearchUiServiceToken);
-    const pinned = yield call([searchUiService, searchUiService.togglePin]);
+    const homeUIService = rendererContainer.get<HomeUiService>(SearchUiServiceToken);
+    const pinned = yield call([homeUIService, homeUIService.togglePin]);
     yield put({
       type: 'search/mergeState',
       payload: { pinned },

src/browser/pages/search/search-page.tsx

@@ -17,6 +17,7 @@ import { useParams } from 'react-router-dom';
 import { SearchResultType } from '@noob9527/noob-dict-core';
 import { NetworkEngineId } from '@noob9527/noob-dict-net-engines';
 import { TransientState } from '../transient-model';
+import { useTransientStore } from '../transient-store';
 
 const SearchPage = styled.div`
   height: 100vh;
@@ -55,7 +56,7 @@ export default () => {
   const routerState = useSelector((state: any) => state.router);
   const searchState: SearchState = useSelector((state: any) => state.search);
   const searchPanelState: SearchPanelState = useSelector((state: any) => state.searchPanel);
-  const transientState: TransientState = useSelector((state: any) => state._transient);
+  const ecDictAvailable = useTransientStore.use.ecDictAvailable()
 
   const matched = /engine_view\/(\w+)/
     .exec(routerState.location.pathname);
@@ -106,7 +107,7 @@ export default () => {
           </SearchPanelMenu>
         </nav>
         <ThemedContent id={'result-area'}>
-          {transientState.ecDictAvailable
+          {ecDictAvailable
             ? (<EcDictBar result={searchPanelState.ecDictSearchResult}/>)
             :null
           }

src/browser/pages/transient-model.ts

@@ -1,19 +1,19 @@
 import { Model } from '../redux/common/redux-model';
 import { call, put, select } from '@redux-saga/core/effects';
 import { rendererContainer } from '../../common/container/renderer-container';
-import { SearchUiService, SearchUiServiceToken } from '../../common/services/search-ui-service';
+import { HomeUiService, SearchUiServiceToken } from '../../common/services/home-ui-service';
 import { ClipboardService, ClipboardServiceToken } from '../../common/services/clipboard-service';
 import { WindowId } from '../../common/window-id';
 import { getCurrentWindowId } from '../utils/window-utils';
 import logger from '../../electron-shared/logger';
 import { AppService, AppServiceToken } from '../../common/services/app-service';
 import { UserProfile } from '../../electron-shared/user-profile/user-profile';
-import { WindowEvents } from '../../common/window-events';
+import { WindowEvent } from '../../common/window-event';
 import { EcDictSearchService } from '../../electron-renderer/services/ecdict-search-service';
 import { EcDictSearchServiceToken } from '../../common/services/search-service';
 import { LocalDbService, LocalDbServiceToken } from '../../common/services/db/local-db-service';
 
-const searchUiService = rendererContainer.get<SearchUiService>(SearchUiServiceToken);
+const searchUiService = rendererContainer.get<HomeUiService>(SearchUiServiceToken);
 const appService = rendererContainer.get<AppService>(AppServiceToken);
 
 export interface TransientState {
@@ -46,7 +46,7 @@ interface ShowSearchWindowAction {
 const effects = {
   * showSearchWindow(action: ShowSearchWindowAction) {
     logger.log(action);
-    yield call([searchUiService, searchUiService.showSearchWindow]);
+    yield call([searchUiService, searchUiService.show]);
     yield put({
       type: '_transient/mergeState',
       payload: {
@@ -55,10 +55,10 @@ const effects = {
     });
   },
   * hideSearchWindow() {
-    yield call([searchUiService, searchUiService.hideSearchWindow]);
+    yield call([searchUiService, searchUiService.hide]);
   },
   * topSearchWindow() {
-    yield call([searchUiService, searchUiService.showSearchWindow]);
+    yield call([searchUiService, searchUiService.show]);
     // yield put({
     //   type: '_transient/mergeState',
     //   payload: {
@@ -132,8 +132,8 @@ const effects = {
   },
 };
 
-[WindowEvents.show, WindowEvents.restore].forEach(event =>
-  effects[WindowId.SEARCH.getEventChannelName(event)] = function * () {
+[WindowEvent.show, WindowEvent.restore].forEach(event =>
+  effects[event.getIpcChannelName(WindowId.HOME)] = function * () {
     yield put({
       type: '_transient/searchWindowOpened',
     });
@@ -149,8 +149,8 @@ const reducers = {
   },
 };
 
-[WindowEvents.hide, WindowEvents.minimize].forEach(event =>
-  reducers[WindowId.SEARCH.getEventChannelName(event)] = function (state, action: any) {
+[WindowEvent.hide, WindowEvent.minimize].forEach(event =>
+  reducers[event.getIpcChannelName(WindowId.HOME)] = function (state, action: any) {
     return {
       ...state,
       isSearchWindowOpen: false,

src/browser/pages/transient-store.ts

@@ -10,15 +10,21 @@ import {
   LocalDbService,
   LocalDbServiceToken,
 } from '../../common/services/db/local-db-service'
-import { call } from '@redux-saga/core/effects'
-import { createSelectors } from '../zustand/create-selectors';
+import { createSelectors } from '../zustand/create-selectors'
+import { WindowEvent } from '../../common/window-event'
+import {
+  HomeUiService,
+  SearchUiServiceToken,
+} from '../../common/services/home-ui-service'
 
 const appService = rendererContainer.get<AppService>(AppServiceToken)
 const ecDictSearchService = rendererContainer.get<EcDictSearchService>(
-  EcDictSearchServiceToken
+  EcDictSearchServiceToken,
 )
 const localDbService =
   rendererContainer.get<LocalDbService>(LocalDbServiceToken)
+const searchUiService =
+  rendererContainer.get<HomeUiService>(SearchUiServiceToken)
 
 interface TransientState {
   focusInput: boolean
@@ -45,9 +51,66 @@ export async function setEcDictAvailable() {
     ecDictAvailable: available,
   })
 }
+
 export async function setLocalDbAvailable() {
   const available = await localDbService.fetchAvailable()
   useTransientStoreBase.setState({
     localDbAvailable: available,
   })
 }
+
+export function handleWindowEvent(windowId: WindowId, event: WindowEvent) {
+  if (windowId !== WindowId.HOME) return
+  switch (event) {
+    case WindowEvent.hide:
+    case WindowEvent.minimize:
+      useTransientStoreBase.setState({
+        isSearchWindowOpen: false,
+      })
+      break
+    case WindowEvent.show:
+    case WindowEvent.restore:
+      useTransientStoreBase.setState({
+        isSearchWindowOpen: true,
+      })
+      break
+  }
+}
+
+export function showSearchWindow(focusInput?: boolean) {
+  searchUiService.show()
+  useTransientStoreBase.setState({
+    focusInput: focusInput ?? true,
+  })
+}
+
+export function hideSearchWindow() {
+  searchUiService.hide()
+}
+
+export function topSearchWindow() {
+  searchUiService.top()
+  focusSearchInput()
+}
+
+export function appHotKeyPressed() {
+  const state = useTransientStoreBase.getState()
+  if (state.isSearchWindowOpen) {
+    if (state.focusInput) {
+      // toggle
+      // if search input is focused, we hide the window
+      hideSearchWindow()
+    } else {
+      // else, we top then focus on input
+      topSearchWindow()
+    }
+  } else {
+    showSearchWindow()
+  }
+}
+
+export function focusSearchInput() {
+  useTransientStoreBase.setState({
+    focusInput: true,
+  })
+}

src/browser/utils/window-utils.ts

@@ -3,7 +3,7 @@ import { WindowId } from '../../common/window-id';
 function getCurrentWindowId() {
   switch (window?.location?.hash) {
     case '#/search':
-      return WindowId.SEARCH;
+      return WindowId.HOME;
     case '#/setting':
       return WindowId.SETTING;
     case '#/popup':
@@ -13,7 +13,7 @@ function getCurrentWindowId() {
     case '#/developer':
       return WindowId.DEVELOPER;
     default:
-      return WindowId.SEARCH;
+      return WindowId.HOME;
   }
 }
 

src/common/services/search-ui-service.ts → src/common/services/home-ui-service.ts

@@ -1,13 +1,13 @@
-export const SearchUiServiceToken = Symbol.for('search-ui-service');
+export const SearchUiServiceToken = Symbol.for('search-ui-service')
 
-export interface SearchUiService {
-  toggleSearchWindow(): Promise<void>
+export interface HomeUiService {
+  toggle()
 
-  showSearchWindow()
+  show()
 
-  hideSearchWindow()
+  hide()
 
-  topSearchWindow()
+  top()
 
   search(option: { text: string })
 

src/common/services/login-ui-service.ts

@@ -1,5 +1,5 @@
-export const LoginUiServiceToken = Symbol.for('login-ui-service');
+export const LoginUiServiceToken = Symbol.for('login-ui-service')
 
 export interface LoginUiService {
-  open(): Promise<boolean>
+  show()
 }

src/common/services/setting-ui-service.ts

@@ -1,5 +1,5 @@
 export const SettingUiServiceToken = Symbol.for('setting-ui-service');
 
 export interface SettingUiService {
-  open(): Promise<boolean>
+  show()
 }