Search bar: Make it into its own component in order to fix layout bugs

lib/note-content-editor.tsx

@@ -22,8 +22,6 @@ import {
   withCheckboxCharacters,
   withCheckboxSyntax,
 } from './utils/task-transform';
-import IconButton from './icon-button';
-import ChevronRightIcon from './icons/chevron-right';
 
 import * as S from './state';
 import * as T from './types';
@@ -88,6 +86,7 @@ type StateProps = {
   note: T.Note;
   notes: Map<T.EntityId, T.Note>;
   searchQuery: string;
+  selectedSearchMatchIndex: number | null;
   spellCheckEnabled: boolean;
   theme: T.Theme;
 };
@@ -103,6 +102,8 @@ type DispatchProps = {
     end: number,
     direction: 'LTR' | 'RTL'
   ) => any;
+  storeNumberOfMatchesInNote: (matches: number) => any;
+  storeSearchSelection: (index: number) => any;
 };
 
 type Props = OwnProps & StateProps & DispatchProps;
@@ -113,7 +114,6 @@ type OwnState = {
   noteId: T.EntityId | null;
   overTodo: boolean;
   searchQuery: string;
-  selectedSearchMatchIndex: number | null;
 };
 
 class NoteContentEditor extends Component<Props> {
@@ -130,7 +130,6 @@ class NoteContentEditor extends Component<Props> {
     noteId: null,
     overTodo: false,
     searchQuery: '',
-    selectedSearchMatchIndex: null,
   };
 
   static getDerivedStateFromProps(props: Props, state: OwnState) {
@@ -146,16 +145,18 @@ class NoteContentEditor extends Component<Props> {
 
     const editor = noteChanged ? (goFast ? 'fast' : 'full') : state.editor;
 
+    // reset search selection when either the note or the search changes
+    // to avoid, for example, opening a note and having the fourth match selected (or "4 of 1")
     const searchChanged = props.searchQuery !== state.searchQuery;
-    const selectedSearchMatchIndex =
-      noteChanged || searchChanged ? null : state.selectedSearchMatchIndex;
+    if (noteChanged || searchChanged) {
+      props.storeSearchSelection(0);
+    }
 
     return {
       content,
       editor,
       noteId: props.noteId,
       searchQuery: props.searchQuery,
-      selectedSearchMatchIndex,
     };
   }
 
@@ -342,12 +343,22 @@ class NoteContentEditor extends Component<Props> {
       this.state.editor === 'full' &&
       prevProps.searchQuery !== this.props.searchQuery
     ) {
+      this.editor?.layout();
       this.setDecorators();
     }
+
+    if (
+      this.editor &&
+      this.state.editor === 'full' &&
+      prevProps.selectedSearchMatchIndex !== this.props.selectedSearchMatchIndex
+    ) {
+      this.setSearchSelection(this.props.selectedSearchMatchIndex);
+    }
   }
 
   setDecorators = () => {
     this.matchesInNote = this.searchMatches() ?? [];
+    this.props.storeNumberOfMatchesInNote(this.matchesInNote.length);
     const titleDecoration = this.getTitleDecoration() ?? [];
 
     this.decorations = this.editor.deltaDecorations(this.decorations, [
@@ -1058,16 +1069,18 @@ class NoteContentEditor extends Component<Props> {
   };
 
   setNextSearchSelection = () => {
-    const { selectedSearchMatchIndex: index } = this.state;
+    const { selectedSearchMatchIndex: index } = this.props;
     const total = this.matchesInNote.length;
     const newIndex = (total + (index ?? -1) + 1) % total;
+    this.props.storeSearchSelection(newIndex);
     this.setSearchSelection(newIndex);
   };
 
   setPrevSearchSelection = () => {
-    const { selectedSearchMatchIndex: index } = this.state;
+    const { selectedSearchMatchIndex: index } = this.props;
     const total = this.matchesInNote.length;
     const newIndex = (total + (index ?? total) - 1) % total;
+    this.props.storeSearchSelection(newIndex);
     this.setSearchSelection(newIndex);
   };
 
@@ -1076,15 +1089,14 @@ class NoteContentEditor extends Component<Props> {
       return;
     }
     const range = this.matchesInNote[index].range;
-    this.setState({ selectedSearchMatchIndex: index });
     this.editor.setSelection(range);
     this.editor.revealLineInCenter(range.startLineNumber);
     this.focusEditor();
   };
 
   render() {
     const { lineLength, noteId, searchQuery, theme } = this.props;
-    const { content, editor, overTodo, selectedSearchMatchIndex } = this.state;
+    const { content, editor, overTodo } = this.state;
     const searchMatches = searchQuery ? this.searchMatches() : [];
 
     const editorPadding = getEditorPadding(
@@ -1153,31 +1165,6 @@ class NoteContentEditor extends Component<Props> {
             value={content}
           />
         )}
-        {searchQuery.length > 0 && searchMatches && (
-          <div className="search-results">
-            <div>
-              {selectedSearchMatchIndex === null
-                ? `${searchMatches.length} Results`
-                : `${selectedSearchMatchIndex + 1} of ${searchMatches.length}`}
-            </div>
-            <span className="search-results-next">
-              <IconButton
-                disabled={searchMatches.length <= 1}
-                icon={<ChevronRightIcon />}
-                onClick={this.setNextSearchSelection}
-                title="Next"
-              />
-            </span>
-            <span className="search-results-prev">
-              <IconButton
-                disabled={searchMatches.length <= 1}
-                icon={<ChevronRightIcon />}
-                onClick={this.setPrevSearchSelection}
-                title="Prev"
-              />
-            </span>
-          </div>
-        )}
       </div>
     );
   }
@@ -1196,6 +1183,7 @@ const mapStateToProps: S.MapState<StateProps> = (state) => ({
   note: state.data.notes.get(state.ui.openedNote),
   notes: state.data.notes,
   searchQuery: state.ui.searchQuery,
+  selectedSearchMatchIndex: state.ui.selectedSearchMatchIndex,
   spellCheckEnabled: state.settings.spellCheckEnabled,
   theme: selectors.getTheme(state),
 });
@@ -1212,6 +1200,14 @@ const mapDispatchToProps: S.MapDispatch<DispatchProps> = {
     end,
     direction,
   }),
+  storeNumberOfMatchesInNote: (matches) => ({
+    type: 'STORE_NUMBER_OF_MATCHES_IN_NOTE',
+    matches,
+  }),
+  storeSearchSelection: (index) => ({
+    type: 'STORE_SEARCH_SELECTION',
+    index,
+  }),
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(NoteContentEditor);

lib/note-editor/index.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import SearchResultsBar from '../search-results-bar';
 import TagField from '../tag-field';
 import NoteDetail from '../note-detail';
 import NotePreview from '../components/note-preview';
@@ -16,6 +17,8 @@ type StateProps = {
   isEditorActive: boolean;
   isSearchActive: boolean;
   isSmallScreen: boolean;
+  hasSearchMatchesInNote: boolean;
+  hasSearchQuery: boolean;
   keyboardShortcuts: boolean;
   noteId: T.EntityId;
   note: T.Note;
@@ -111,7 +114,13 @@ export class NoteEditor extends Component<Props> {
   };
 
   render() {
-    const { editMode, note, noteId } = this.props;
+    const {
+      editMode,
+      hasSearchQuery,
+      hasSearchMatchesInNote,
+      note,
+      noteId,
+    } = this.props;
 
     if (!note) {
       return (
@@ -139,6 +148,7 @@ export class NoteEditor extends Component<Props> {
             storeHasFocus={this.storeTagFieldHasFocus}
           />
         )}
+        {hasSearchQuery && hasSearchMatchesInNote && <SearchResultsBar />}
       </div>
     );
   }
@@ -152,6 +162,9 @@ const mapStateToProps: S.MapState<StateProps> = (state) => ({
   noteId: state.ui.openedNote,
   note: state.data.notes.get(state.ui.openedNote),
   revision: state.ui.selectedRevision,
+  hasSearchQuery: state.ui.searchQuery !== '',
+  hasSearchMatchesInNote:
+    !!state.ui.numberOfMatchesInNote && state.ui.numberOfMatchesInNote > 0,
   isSearchActive: !!state.ui.searchQuery.length,
   isSmallScreen: selectors.isSmallScreen(state),
 });

lib/search-results-bar/index.tsx

@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import React, { FunctionComponent, useEffect, useRef } from 'react';
+import { connect } from 'react-redux';
+
+/**
+ * Internal dependencies
+ */
+import IconButton from '../icon-button';
+import ChevronRightIcon from '../icons/chevron-right';
+
+import * as S from '../state';
+
+type StateProps = {
+  selectedSearchMatchIndex: number | null;
+  numberOfMatchesInNote: number;
+};
+
+type DispatchProps = {
+  setSearchSelection: (index: number) => any;
+};
+
+type Props = StateProps & DispatchProps;
+
+const SearchResultsBar: FunctionComponent<Props> = ({
+  selectedSearchMatchIndex: index,
+  numberOfMatchesInNote: total,
+  setSearchSelection,
+}) => {
+  const setPrev = (event: MouseEvent) => {
+    const newIndex = (total + (index ?? -1) - 1) % total;
+    setSearchSelection(newIndex);
+  };
+
+  const setNext = (event: MouseEvent) => {
+    const newIndex = (total + (index ?? -1) + 1) % total;
+    setSearchSelection(newIndex);
+  };
+
+  return (
+    <div className="search-results">
+      <div>
+        {index === null ? `${total} Results` : `${index + 1} of ${total}`}
+      </div>
+      <span className="search-results-next">
+        <IconButton
+          disabled={total <= 1}
+          icon={<ChevronRightIcon />}
+          onClick={setNext}
+          title="Next"
+        />
+      </span>
+      <span className="search-results-prev">
+        <IconButton
+          disabled={total <= 1}
+          icon={<ChevronRightIcon />}
+          onClick={setPrev}
+          title="Prev"
+        />
+      </span>
+    </div>
+  );
+};
+
+const mapStateToProps: S.MapState<StateProps> = ({
+  ui: { selectedSearchMatchIndex, numberOfMatchesInNote },
+}) => ({
+  selectedSearchMatchIndex,
+  numberOfMatchesInNote,
+});
+
+const mapDispatchToProps: S.MapDispatch<DispatchProps> = (dispatch) => ({
+  setSearchSelection: (index: number) =>
+    dispatch({
+      type: 'STORE_SEARCH_SELECTION',
+      index,
+    }),
+});
+
+SearchResultsBar.displayName = 'SearchResultsBar';
+
+export default connect(mapStateToProps, mapDispatchToProps)(SearchResultsBar);

lib/search-results-bar/style.scss

@@ -0,0 +1,35 @@
+.search-results {
+  height: 56px;
+  line-height: 56px;
+  z-index: 100;
+  border-top: 1px solid $studio-gray-5;
+  background-color: $studio-white;
+  text-align: center;
+  user-select: none;
+
+  div {
+    display: inline-block;
+  }
+
+  .search-results-next,
+  .search-results-prev {
+    float: right;
+    padding: 0 6px;
+    width: 42px;
+    height: 100%;
+
+    svg {
+      fill: $studio-simplenote-blue-50;
+    }
+  }
+  .search-results-next {
+    margin-right: 6px;
+  }
+  .search-results-prev svg {
+    transform: scaleX(-1);
+  }
+
+  @media only screen and (max-width: $single-column) {
+    left: 0;
+  }
+}

lib/state/action-types.ts

@@ -103,6 +103,14 @@ export type StoreEditorSelection = Action<
   'STORE_EDITOR_SELECTION',
   { noteId: T.EntityId; start: number; end: number; direction: 'RTL' | 'LTR' }
 >;
+export type StoreNumberOfMatchesInNote = Action<
+  'STORE_NUMBER_OF_MATCHES_IN_NOTE',
+  { matches: number }
+>;
+export type StoreSearchSelection = Action<
+  'STORE_SEARCH_SELECTION',
+  { index: number }
+>;
 export type SystemThemeUpdate = Action<
   'SYSTEM_THEME_UPDATE',
   { prefers: 'light' | 'dark' }
@@ -376,6 +384,8 @@ export type ActionType =
   | ShowAllNotes
   | ShowDialog
   | StoreEditorSelection
+  | StoreNumberOfMatchesInNote
+  | StoreSearchSelection
   | SubmitPendingChange
   | SystemThemeUpdate
   | TagBucketRemove