From 0a9c4bdcf4389079843ba5141078f959754d8205 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 RequiredParametersDialog to TypeScript

Summary: Migrated RequiredParametersDialog.js to RequiredParametersDialog.tsx

Reviewed By: danielbuechele

Differential Revision: D17132223

fbshipit-source-id: a4a592ba58b8c8b94b3106c3a2c0916b2776697f
---
 ...Dialog.js => RequiredParametersDialog.tsx} | 30 +++++++++----------
 src/plugins/navigation/components/index.js    |  4 ++-
 .../navigation/hooks/requiredParameters.tsx   |  2 +-
 src/ui/components/Sheet.tsx                   |  2 +-
 4 files changed, 20 insertions(+), 18 deletions(-)
 rename src/plugins/navigation/components/{RequiredParametersDialog.js => RequiredParametersDialog.tsx} (89%)

diff --git a/src/plugins/navigation/components/RequiredParametersDialog.js b/src/plugins/navigation/components/RequiredParametersDialog.tsx
similarity index 89%
rename from src/plugins/navigation/components/RequiredParametersDialog.js
rename to src/plugins/navigation/components/RequiredParametersDialog.tsx
index cdf552997..28fea10ea 100644
--- a/src/plugins/navigation/components/RequiredParametersDialog.js
+++ b/src/plugins/navigation/components/RequiredParametersDialog.tsx
@@ -3,7 +3,6 @@
  * 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 {Button, FlexColumn, Input, Sheet, styled, Glyph, colors} from 'flipper';
@@ -13,18 +12,19 @@ import {
   parameterIsBooleanType,
   validateParameter,
   liveEdit,
-} from '../util/uri.tsx';
-import {useRequiredParameterFormValidator} from '../hooks/requiredParameters.tsx';
+} from '../util/uri';
+import {useRequiredParameterFormValidator} from '../hooks/requiredParameters';
+import React from 'react';
 
-import type {URI} from '../flow-types';
+import {URI} from '../types';
 
-type Props = {|
-  uri: string,
-  requiredParameters: Array<string>,
-  shouldShow: boolean,
-  onHide: ?() => void,
-  onSubmit: URI => void,
-|};
+type Props = {
+  uri: string;
+  requiredParameters: Array<string>;
+  shouldShow: boolean;
+  onHide?: () => void;
+  onSubmit: (uri: URI) => void;
+};
 
 const Container = styled(FlexColumn)({
   padding: 10,
@@ -72,7 +72,7 @@ const WarningIconContainer = styled('span')({
 
 export default (props: Props) => {
   const {shouldShow, onHide, onSubmit, uri, requiredParameters} = props;
-  const [isValid, values, setValuesArray] = useRequiredParameterFormValidator(
+  const {isValid, values, setValuesArray} = useRequiredParameterFormValidator(
     requiredParameters,
   );
   if (uri == null || !shouldShow) {
@@ -80,7 +80,7 @@ export default (props: Props) => {
   } else {
     return (
       <Sheet onHideSheet={onHide}>
-        {hide => {
+        {(hide: () => void) => {
           return (
             <Container>
               <Title>
@@ -99,7 +99,7 @@ export default (props: Props) => {
               {requiredParameters.map((paramater, idx) => (
                 <div key={idx}>
                   <RequiredParameterInput
-                    onChange={event =>
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                       setValuesArray([
                         ...values.slice(0, idx),
                         event.target.value,
@@ -138,7 +138,7 @@ export default (props: Props) => {
                   Cancel
                 </Button>
                 <Button
-                  type={isValid ? 'primary' : null}
+                  type={isValid ? 'primary' : undefined}
                   onClick={() => {
                     onSubmit(replaceRequiredParametersWithValues(uri, values));
                     if (onHide != null) {
diff --git a/src/plugins/navigation/components/index.js b/src/plugins/navigation/components/index.js
index 9ec61f441..d484ea56c 100644
--- a/src/plugins/navigation/components/index.js
+++ b/src/plugins/navigation/components/index.js
@@ -11,7 +11,9 @@ export {default as BookmarksSidebar} from './BookmarksSidebar.tsx';
 export {default as FavoriteButton} from './FavoriteButton.tsx';
 export {default as IconButton} from './IconButton.tsx';
 export {default as NavigationInfoBox} from './NavigationInfoBox.tsx';
-export {default as RequiredParametersDialog} from './RequiredParametersDialog';
+export {
+  default as RequiredParametersDialog,
+} from './RequiredParametersDialog.tsx';
 export {default as SaveBookmarkDialog} from './SaveBookmarkDialog';
 export {default as ScrollableFlexColumn} from './ScrollableFlexColumn';
 export {default as SearchBar} from './SearchBar';
diff --git a/src/plugins/navigation/hooks/requiredParameters.tsx b/src/plugins/navigation/hooks/requiredParameters.tsx
index ae8acaba6..ae8290ffe 100644
--- a/src/plugins/navigation/hooks/requiredParameters.tsx
+++ b/src/plugins/navigation/hooks/requiredParameters.tsx
@@ -29,5 +29,5 @@ export const useRequiredParameterFormValidator = (
       setIsValid(false);
     }
   });
-  return [isValid, values, setValuesArray];
+  return {isValid, values, setValuesArray};
 };
diff --git a/src/ui/components/Sheet.tsx b/src/ui/components/Sheet.tsx
index af2648389..e6bbb1908 100644
--- a/src/ui/components/Sheet.tsx
+++ b/src/ui/components/Sheet.tsx
@@ -24,7 +24,7 @@ type OwnProps = {
    * the sheet.
    */
   children: (onHide: () => void) => React.ReactNode | undefined;
-  onHideSheet: () => void;
+  onHideSheet?: () => void;
 };
 
 type StateFromProps = {