From a61525996186dcddeea0e220b572270a8e189770 Mon Sep 17 00:00:00 2001
From: Benjamin Elo <beneloca@fb.com>
Date: Mon, 2 Sep 2019 03:54:48 -0700
Subject: [PATCH] Migrated SearchBar to Typescript

Summary: Migrated SearchBar.js to SearchBar.tsx

Reviewed By: danielbuechele

Differential Revision: D17132221

fbshipit-source-id: ce1728bf06ba2a314c027e92456f947ab4781660
---
 .../{SearchBar.js => SearchBar.tsx}           | 51 ++++++++++---------
 src/plugins/navigation/components/index.js    |  2 +-
 2 files changed, 27 insertions(+), 26 deletions(-)
 rename src/plugins/navigation/components/{SearchBar.js => SearchBar.tsx} (77%)

diff --git a/src/plugins/navigation/components/SearchBar.js b/src/plugins/navigation/components/SearchBar.tsx
similarity index 77%
rename from src/plugins/navigation/components/SearchBar.js
rename to src/plugins/navigation/components/SearchBar.tsx
index a7dcb22a3..6464b8440 100644
--- a/src/plugins/navigation/components/SearchBar.js
+++ b/src/plugins/navigation/components/SearchBar.tsx
@@ -3,29 +3,30 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  * @format
- * @flow strict-local
  */
 
-import {Component, styled, SearchBox, SearchInput, Toolbar} from 'flipper';
-import {AutoCompleteSheet, IconButton, FavoriteButton} from './';
+import {styled, SearchBox, SearchInput, Toolbar} from 'flipper';
+import AutoCompleteSheet from './AutoCompleteSheet';
+import IconButton from './IconButton';
+import FavoriteButton from './FavoriteButton';
+import {AutoCompleteProvider, Bookmark, URI} from '../types';
+import React, {Component} from 'react';
 
-import type {AutoCompleteProvider, Bookmark} from '../flow-types';
+type Props = {
+  onFavorite: (query: URI) => void;
+  onNavigate: (query: URI) => void;
+  bookmarks: Map<URI, Bookmark>;
+  providers: Array<AutoCompleteProvider>;
+  uriFromAbove: URI;
+};
 
-type Props = {|
-  onFavorite: (query: string) => void,
-  onNavigate: (query: string) => void,
-  bookmarks: Map<string, Bookmark>,
-  providers: Array<AutoCompleteProvider>,
-  uriFromAbove: string,
-|};
-
-type State = {|
-  query: string,
-  inputFocused: boolean,
-  autoCompleteSheetOpen: boolean,
-  searchInputValue: string,
-  prevURIFromAbove: string,
-|};
+type State = {
+  query: URI;
+  inputFocused: boolean;
+  autoCompleteSheetOpen: boolean;
+  searchInputValue: URI;
+  prevURIFromAbove: URI;
+};
 
 const IconContainer = styled('div')({
   display: 'inline-flex',
@@ -74,7 +75,7 @@ class SearchBar extends Component<Props, State> {
     this.props.onNavigate(searchInputValue);
   };
 
-  queryInputChanged = (event: SyntheticInputEvent<>) => {
+  queryInputChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     this.setState({query: value, searchInputValue: value});
   };
@@ -103,7 +104,7 @@ class SearchBar extends Component<Props, State> {
     return (
       <ToolbarContainer>
         <Toolbar>
-          <SearchBox className={inputFocused ? 'drop-shadow' : null}>
+          <SearchBox className={inputFocused ? 'drop-shadow' : ''}>
             <SearchInputContainer>
               <SearchInput
                 value={searchInputValue}
@@ -113,7 +114,7 @@ class SearchBar extends Component<Props, State> {
                     inputFocused: false,
                   })
                 }
-                onFocus={event => {
+                onFocus={(event: React.FocusEvent<HTMLInputElement>) => {
                   event.target.select();
                   this.setState({
                     autoCompleteSheetOpen: true,
@@ -121,10 +122,10 @@ class SearchBar extends Component<Props, State> {
                   });
                 }}
                 onChange={this.queryInputChanged}
-                onKeyPress={e => {
+                onKeyPress={(e: React.KeyboardEvent<HTMLInputElement>) => {
                   if (e.key === 'Enter') {
                     this.navigateTo(this.state.searchInputValue);
-                    e.target.blur();
+                    (e.target as HTMLInputElement).blur();
                   }
                 }}
                 placeholder="Navigate To..."
@@ -133,7 +134,7 @@ class SearchBar extends Component<Props, State> {
                 <AutoCompleteSheet
                   providers={providers}
                   onNavigate={this.navigateTo}
-                  onHighlighted={newInputValue =>
+                  onHighlighted={(newInputValue: URI) =>
                     this.setState({searchInputValue: newInputValue})
                   }
                   query={query}
diff --git a/src/plugins/navigation/components/index.js b/src/plugins/navigation/components/index.js
index 34afe8d8e..719ff37e6 100644
--- a/src/plugins/navigation/components/index.js
+++ b/src/plugins/navigation/components/index.js
@@ -15,5 +15,5 @@ export {
   default as RequiredParametersDialog,
 } from './RequiredParametersDialog.tsx';
 export {default as SaveBookmarkDialog} from './SaveBookmarkDialog.tsx';
-export {default as SearchBar} from './SearchBar';
+export {default as SearchBar} from './SearchBar.tsx';
 export {default as Timeline} from './Timeline.tsx';