Refactor: Replace search field focus state with middleware

desktop/menus/edit-menu.js

@@ -39,7 +39,7 @@ const buildEditMenu = settings => {
       {
         label: 'Search &Notes…',
         accelerator: 'CommandOrControl+F',
-        click: appCommandSender({ action: 'setSearchFocus' }),
+        click: appCommandSender({ action: 'focusSearchField' }),
       },
       {
         type: 'separator',

lib/app.tsx

@@ -52,6 +52,7 @@ export type OwnProps = {
 export type DispatchProps = {
   createNote: () => any;
   closeNote: () => any;
+  focusSearchField: () => any;
   selectNote: (note: T.NoteEntity) => any;
 };
 
@@ -107,8 +108,7 @@ const mapDispatchToProps: S.MapDispatch<
     resetAuth: () => dispatch(reduxActions.auth.reset()),
     selectNote: (note: T.NoteEntity) => dispatch(actions.ui.selectNote(note)),
     setAuthorized: () => dispatch(reduxActions.auth.setAuthorized()),
-    setSearchFocus: () =>
-      dispatch(actionCreators.setSearchFocus({ searchFocus: true })),
+    focusSearchField: () => dispatch(actions.ui.focusSearchField()),
     setSimperiumConnectionStatus: connected =>
       dispatch(toggleSimperiumConnectionStatus(connected)),
     selectNote: note => dispatch(actions.ui.selectNote(note)),
@@ -254,6 +254,10 @@ export const App = connect(
         return window.print();
       }
 
+      if ('focusSearchField' === command.action) {
+        return this.props.focusSearchField();
+      }
+
       const canRun = overEvery(
         isObject,
         o => o.action !== null,

lib/flux/app-state.ts

@@ -40,7 +40,6 @@ const initialState: AppState = {
   showNavigation: false,
   dialogs: [],
   nextDialogKey: 0,
-  searchFocus: false,
   unsyncedNoteIds: [], // note bucket only
 };
 
@@ -277,12 +276,6 @@ export const actionMap = new ActionMap({
       });
     },
 
-    setSearchFocus(state: AppState, { searchFocus = true }) {
-      return update(state, {
-        searchFocus: { $set: searchFocus },
-      });
-    },
-
     markdownNote: {
       creator({ noteBucket, note, markdown: shouldEnableMarkdown }) {
         const updated = toggleSystemTag(note, 'markdown', shouldEnableMarkdown);

lib/search-field/index.tsx

@@ -1,12 +1,12 @@
 import React, { Component, createRef, FormEvent, KeyboardEvent } from 'react';
 import { connect } from 'react-redux';
 import SmallCrossIcon from '../icons/cross-small';
-import appState from '../flux/app-state';
 import { tracks } from '../analytics';
 import { State } from '../state';
 import { search } from '../state/ui/actions';
 
-const { setSearchFocus } = appState.actionCreators;
+import { registerSearchField } from '../state/ui/search-field-middleware';
+
 const { recordEvent } = tracks;
 const KEY_ESC = 27;
 
@@ -18,20 +18,33 @@ export class SearchField extends Component<ConnectedProps> {
 
   inputField = createRef<HTMLInputElement>();
 
-  componentDidUpdate() {
-    const { searchFocus, onSearchFocused } = this.props;
+  componentDidMount() {
+    registerSearchField(this.focus);
+  }
+
+  blur = () => {
+    if (!this.inputField.current) {
+      return;
+    }
+
+    this.inputField.current.blur();
+  };
+
+  focus = (operation = 'focus-only') => {
+    if (!this.inputField.current) {
+      return;
+    }
 
-    if (searchFocus && this.inputField.current) {
+    if ('select' === operation) {
       this.inputField.current.select();
-      this.inputField.current.focus();
-      onSearchFocused();
     }
-  }
+    this.inputField.current.focus();
+  };
 
   interceptEsc = (event: KeyboardEvent) => {
     if (KEY_ESC === event.keyCode) {
-      if (this.props.searchQuery === '' && this.inputField.current) {
-        this.inputField.current.blur();
+      if (this.props.searchQuery === '') {
+        this.blur();
       }
       this.clearQuery();
     }
@@ -82,7 +95,6 @@ const mapStateToProps = ({
 }: State) => ({
   isTagSelected: !!state.tag,
   placeholder: listTitle,
-  searchFocus: state.searchFocus,
   searchQuery,
 });
 
@@ -91,7 +103,6 @@ const mapDispatchToProps = dispatch => ({
     dispatch(search(query));
     recordEvent('list_notes_searched');
   },
-  onSearchFocused: () => dispatch(setSearchFocus({ searchFocus: false })),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(SearchField);

lib/state/action-types.ts

@@ -54,6 +54,7 @@ export type SetWPToken = Action<'setWPToken', { token: string }>;
 export type CreateNote = Action<'CREATE_NOTE'>;
 export type CloseNote = Action<'CLOSE_NOTE'>;
 export type FilterNotes = Action<'FILTER_NOTES', { notes: T.NoteEntity[] }>;
+export type FocusSearchField = Action<'FOCUS_SEARCH_FIELD'>;
 export type Search = Action<'SEARCH', { searchQuery: string }>;
 export type SetAuth = Action<'AUTH_SET', { status: AuthState }>;
 export type SetUnsyncedNoteIds = Action<
@@ -76,6 +77,7 @@ export type ActionType =
   | CloseNote
   | LegacyAction
   | FilterNotes
+  | FocusSearchField
   | Search
   | SelectNote
   | SetAccountName
@@ -191,7 +193,6 @@ type LegacyAction =
   | Action<'App.selectTagAndSElectFirstNote'>
   | Action<'App.selectTrash'>
   | Action<'App.setRevision', { revision: T.NoteEntity }>
-  | Action<'App.setSearchFocus', { searchFocus: boolean }>
   | Action<'App.setShouldPrintNote', { shouldPrint: boolean }>
   | Action<'App.setUnsyncedNoteIds', { noteIds: T.EntityId[] }>
   | Action<'App.showAllNotes'>

lib/state/index.ts

@@ -20,6 +20,7 @@ import { omit } from 'lodash';
 import appState from '../flux/app-state';
 
 import uiMiddleware from './ui/middleware';
+import searchFieldMiddleware from './ui/search-field-middleware';
 
 import auth from './auth/reducer';
 import settings from './settings/reducer';
@@ -35,7 +36,6 @@ export type AppState = {
   preferences?: T.Preferences;
   previousIndex: number;
   revision: T.NoteEntity | null;
-  searchFocus: boolean;
   showNavigation: boolean;
   tags: T.TagEntity[];
   tag?: T.TagEntity;
@@ -66,7 +66,7 @@ export const store = createStore<State, A.ActionType, {}, {}>(
         [path]: omit(state[path], 'focusModeEnabled'),
       }),
     }),
-    applyMiddleware(thunk, uiMiddleware)
+    applyMiddleware(thunk, uiMiddleware, searchFieldMiddleware)
   )
 );
 

lib/state/ui/actions.ts

@@ -16,6 +16,10 @@ export const filterNotes: A.ActionCreator<A.FilterNotes> = (
   notes,
 });
 
+export const focusSearchField: A.ActionCreator<A.FocusSearchField> = () => ({
+  type: 'FOCUS_SEARCH_FIELD',
+});
+
 export const setUnsyncedNoteIds: A.ActionCreator<A.SetUnsyncedNoteIds> = (
   noteIds: T.EntityId[]
 ) => ({

lib/state/ui/search-field-middleware.ts

@@ -0,0 +1,26 @@
+import * as A from '../action-types';
+import * as S from '../';
+
+const searchFields = new Set<Function>();
+
+export const registerSearchField = (focus: Function) => searchFields.add(focus);
+
+export const middleware: S.Middleware = () => {
+  return next => (action: A.ActionType) => {
+    const result = next(action);
+
+    switch (action.type) {
+      case 'SEARCH':
+        searchFields.forEach(focus => focus());
+        break;
+
+      case 'FOCUS_SEARCH_FIELD':
+        searchFields.forEach(focus => focus('select'));
+        break;
+    }
+
+    return result;
+  };
+};
+
+export default middleware;

lib/tag-suggestions/index.tsx

@@ -1,14 +1,12 @@
 import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
-import appState from '../flux/app-state';
 import { tracks } from '../analytics';
 import { search } from '../state/ui/actions';
 import filterAtMost from '../utils/filter-at-most';
 
 import * as S from '../state';
 import * as T from '../types';
 
-const { setSearchFocus } = appState.actionCreators;
 const { recordEvent } = tracks;
 
 type StateProps = {
@@ -121,7 +119,6 @@ const mapDispatchToProps: S.MapDispatch<DispatchProps> = dispatch => ({
   onSearch: query => {
     dispatch(search(query));
     recordEvent('list_notes_searched');
-    dispatch(setSearchFocus({ searchFocus: true }));
   },
 });