From d07993ea6b02f1a5ff87114c9205c0df96133e6f Mon Sep 17 00:00:00 2001
From: Stephen Tseng <hytseng0109@fb.com>
Date: Thu, 21 Nov 2019 02:57:51 -0800
Subject: [PATCH] Convert Flipper plugin "Sandbox" to TypeScript

Summary: As title

Reviewed By: jknoxville

Differential Revision: D18573661

fbshipit-source-id: 2e26e9feee60543df6155046c52e5a03fa233286
---
 src/plugins/sandbox/{index.js => index.tsx} | 37 ++++++++++-----------
 src/plugins/sandbox/package.json            |  2 +-
 2 files changed, 18 insertions(+), 21 deletions(-)
 rename src/plugins/sandbox/{index.js => index.tsx} (85%)

diff --git a/src/plugins/sandbox/index.js b/src/plugins/sandbox/index.tsx
similarity index 85%
rename from src/plugins/sandbox/index.js
rename to src/plugins/sandbox/index.tsx
index d17c81ba8..993367047 100644
--- a/src/plugins/sandbox/index.js
+++ b/src/plugins/sandbox/index.tsx
@@ -10,17 +10,18 @@
 import {FlipperPlugin} from 'flipper';
 import {FlexColumn} from 'flipper';
 import {ButtonGroup, Button, styled, colors} from 'flipper';
+import React, {ChangeEvent} from 'react';
 
 export type Sandbox = {
-  name: string,
-  value: string,
+  name: string;
+  value: string;
 };
 
-type SandboxState = {|
-  sandboxes: Array<Sandbox>,
-  customSandbox: string,
-  showFeedback: boolean,
-|};
+type SandboxState = {
+  sandboxes: Array<Sandbox>;
+  customSandbox: string;
+  showFeedback: boolean;
+};
 
 const BigButton = styled(Button)({
   flexGrow: 1,
@@ -33,8 +34,12 @@ const ButtonContainer = styled(FlexColumn)({
   padding: 20,
 });
 
-export default class SandboxView extends FlipperPlugin<SandboxState> {
-  state = {
+export default class SandboxView extends FlipperPlugin<
+  SandboxState,
+  any,
+  unknown
+> {
+  state: SandboxState = {
     sandboxes: [],
     customSandbox: '',
     showFeedback: false,
@@ -66,14 +71,6 @@ export default class SandboxView extends FlipperPlugin<SandboxState> {
     marginLeft: 15,
   });
 
-  reducers = {
-    UpdateSandboxes(state: SandboxState, results: Object) {
-      return {
-        sandboxes: results.results,
-      };
-    },
-  };
-
   init() {
     this.client.call('getSandbox', {}).then((results: Array<Sandbox>) => {
       this.dispatchAction({results, type: 'UpdateSandboxes'});
@@ -85,7 +82,7 @@ export default class SandboxView extends FlipperPlugin<SandboxState> {
       .call('setSandbox', {
         sandbox: sandbox,
       })
-      .then((result: Object) => {
+      .then((result: {result: boolean}) => {
         setTimeout(() => {
           this.setState({showFeedback: false});
         }, 3000);
@@ -93,7 +90,7 @@ export default class SandboxView extends FlipperPlugin<SandboxState> {
       });
   };
 
-  onChangeSandbox = (e: SyntheticInputEvent<>) => {
+  onChangeSandbox = (e: ChangeEvent<HTMLInputElement>) => {
     this.setState({customSandbox: e.target.value});
   };
 
@@ -101,7 +98,7 @@ export default class SandboxView extends FlipperPlugin<SandboxState> {
     return (
       <FlexColumn>
         <SandboxView.TextInputLayout>
-          <ButtonGroup flexgrow={true}>
+          <ButtonGroup>
             <SandboxView.TextInput
               type="text"
               placeholder="Sandbox URL (e.g. unixname.sb.facebook.com)"
diff --git a/src/plugins/sandbox/package.json b/src/plugins/sandbox/package.json
index c2c2f1c00..452183565 100644
--- a/src/plugins/sandbox/package.json
+++ b/src/plugins/sandbox/package.json
@@ -2,7 +2,7 @@
   "name": "Sandbox",
   "title": "Sandbox",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "index.tsx",
   "license": "MIT",
   "keywords": ["flipper-plugin"],
   "icon": "translate",