From a41625e176d4971b47e2833020f568df5826f9fd Mon Sep 17 00:00:00 2001
From: Pascal Hartig <realpassy@fb.com>
Date: Tue, 8 Oct 2019 00:17:23 -0700
Subject: [PATCH] Refactor ShareSheetExportFile

Summary:
Wanted to make a small change and found it a bit difficult to
follow, so I tried to make it a bit more TypeScript-y.

Logic should be unchanged.

Reviewed By: priteshrnandgaonkar

Differential Revision: D17762346

fbshipit-source-id: d0d8b2e25b532b7b10079907d6da86bdd878a75c
---
 src/App.tsx                          |   2 +-
 src/chrome/ExportDataPluginSheet.tsx |   2 +-
 src/chrome/ShareSheetExportFile.tsx  | 202 ++++++++++++++-------------
 3 files changed, 109 insertions(+), 97 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 204e1c829..2f4cc84b7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -101,7 +101,7 @@ export class App extends React.Component<Props> {
             file={
               this.props.share && this.props.share.type === 'file'
                 ? this.props.share.file
-                : undefined
+                : null
             }
             logger={this.props.logger}
           />
diff --git a/src/chrome/ExportDataPluginSheet.tsx b/src/chrome/ExportDataPluginSheet.tsx
index a2410939a..b8de64537 100644
--- a/src/chrome/ExportDataPluginSheet.tsx
+++ b/src/chrome/ExportDataPluginSheet.tsx
@@ -23,7 +23,7 @@ import SelectPluginSheet from './SelectPluginSheet';
 import {Dispatch, Action} from 'redux';
 
 type OwnProps = {
-  onHide: () => any;
+  onHide: () => void;
 };
 
 type StateFromProps = {
diff --git a/src/chrome/ShareSheetExportFile.tsx b/src/chrome/ShareSheetExportFile.tsx
index de6ead067..06df500f5 100644
--- a/src/chrome/ShareSheetExportFile.tsx
+++ b/src/chrome/ShareSheetExportFile.tsx
@@ -61,8 +61,8 @@ const InfoText = styled(Text)({
 });
 
 type Props = {
-  onHide: () => any;
-  file: string | null | undefined;
+  onHide: () => void;
+  file: string | null;
   logger: Logger;
 };
 
@@ -70,12 +70,16 @@ type State = {
   errorArray: Array<Error>;
   result:
     | {
-        success: boolean;
-        error: Error | null | undefined;
+        kind: 'success';
       }
-    | null
-    | undefined;
-  statusUpdate: string | null | undefined;
+    | {
+        kind: 'error';
+        error: Error;
+      }
+    | {
+        kind: 'pending';
+      };
+  statusUpdate: string | null;
   runInBackground: boolean;
 };
 
@@ -86,7 +90,7 @@ export default class ShareSheetExportFile extends Component<Props, State> {
 
   state: State = {
     errorArray: [],
-    result: null,
+    result: {kind: 'pending'},
     statusUpdate: null,
     runInBackground: false,
   };
@@ -137,107 +141,115 @@ export default class ShareSheetExportFile extends Component<Props, State> {
         });
         return;
       }
-      this.setState({errorArray, result: {success: true, error: null}});
+      this.setState({errorArray, result: {kind: 'success'}});
       this.props.logger.trackTimeSince(mark, 'export:file-success');
     } catch (err) {
       if (!this.state.runInBackground) {
-        this.setState({errorArray: [], result: {success: false, error: err}});
+        this.setState({errorArray: [], result: {kind: 'error', error: err}});
       }
       this.props.logger.trackTimeSince(mark, 'export:file-error');
     }
   }
 
-  render() {
-    const onHide = () => {
-      this.context.store.dispatch(unsetShare());
-      this.props.onHide();
-      this.idler.cancel();
-    };
+  renderSuccess(context: any) {
+    return (
+      <Container>
+        <FlexColumn>
+          <Title bold>Data Exported Successfully</Title>
+          <InfoText>
+            When sharing your Flipper data, consider that the captured data
+            might contain sensitive information like access tokens used in
+            network requests.
+          </InfoText>
+          <ShareSheetErrorList errors={this.state.errorArray} />
+        </FlexColumn>
+        <FlexRow>
+          <Spacer />
+          <Button compact padded onClick={() => this.onHide(context)}>
+            Close
+          </Button>
+        </FlexRow>
+      </Container>
+    );
+  }
 
+  renderError(context: any, result: {kind: 'error'; error: Error}) {
+    return (
+      <Container>
+        <Title bold>Error</Title>
+        <ErrorMessage code>
+          {result.error.message || 'File could not be saved.'}
+        </ErrorMessage>
+        <FlexRow>
+          <Spacer />
+          <Button compact padded onClick={() => this.onHide(context)}>
+            Close
+          </Button>
+        </FlexRow>
+      </Container>
+    );
+  }
+
+  renderPending(context: any, statusUpdate: string | null) {
+    return (
+      <Container>
+        <Center>
+          <LoadingIndicator size={30} />
+          {statusUpdate && statusUpdate.length > 0 ? (
+            <Uploading bold color={colors.macOSTitleBarIcon}>
+              {statusUpdate}
+            </Uploading>
+          ) : (
+            <Uploading bold color={colors.macOSTitleBarIcon}>
+              Exporting Flipper trace...
+            </Uploading>
+          )}
+        </Center>
+        <FlexRow>
+          <Spacer />
+          <Button
+            compact
+            padded
+            onClick={() => {
+              this.setState({runInBackground: true});
+              const {statusUpdate} = this.state;
+              if (statusUpdate) {
+                this.dispatchAndUpdateToolBarStatus(statusUpdate);
+              }
+              this.props.onHide();
+            }}>
+            Run In Background
+          </Button>
+          <Button compact padded onClick={() => this.onHide(context)}>
+            Cancel
+          </Button>
+        </FlexRow>
+      </Container>
+    );
+  }
+
+  onHide(context: any) {
+    context.store.dispatch(unsetShare());
+    this.props.onHide();
+    this.idler.cancel();
+  }
+
+  render() {
     if (!this.props.file) {
-      return this.renderNoFileError(onHide);
+      return this.renderNoFileError();
     }
     const {result, statusUpdate} = this.state;
-    if (result) {
-      const {success, error} = result;
-      if (success) {
-        return (
-          <Container>
-            <FlexColumn>
-              <Title bold>Data Exported Successfully</Title>
-              <InfoText>
-                When sharing your Flipper data, consider that the captured data
-                might contain sensitive information like access tokens used in
-                network requests.
-              </InfoText>
-              <ShareSheetErrorList errors={this.state.errorArray} />
-            </FlexColumn>
-            <FlexRow>
-              <Spacer />
-              <Button compact padded onClick={onHide}>
-                Close
-              </Button>
-            </FlexRow>
-          </Container>
-        );
-      }
-      if (error) {
-        return (
-          <Container>
-            <Title bold>Error</Title>
-            <ErrorMessage code>
-              {(error && error.message) || 'File could not be saved.'}
-            </ErrorMessage>
-            <FlexRow>
-              <Spacer />
-              <Button compact padded onClick={onHide}>
-                Close
-              </Button>
-            </FlexRow>
-          </Container>
-        );
-      }
-      return null;
-    } else {
-      return (
-        <Container>
-          <Center>
-            <LoadingIndicator size={30} />
-            {statusUpdate && statusUpdate.length > 0 ? (
-              <Uploading bold color={colors.macOSTitleBarIcon}>
-                {statusUpdate}
-              </Uploading>
-            ) : (
-              <Uploading bold color={colors.macOSTitleBarIcon}>
-                Exporting Flipper trace...
-              </Uploading>
-            )}
-          </Center>
-          <FlexRow>
-            <Spacer />
-            <Button
-              compact
-              padded
-              onClick={() => {
-                this.setState({runInBackground: true});
-                const {statusUpdate} = this.state;
-                if (statusUpdate) {
-                  this.dispatchAndUpdateToolBarStatus(statusUpdate);
-                }
-                this.props.onHide();
-              }}>
-              Run In Background
-            </Button>
-            <Button compact padded onClick={onHide}>
-              Cancel
-            </Button>
-          </FlexRow>
-        </Container>
-      );
+    switch (result.kind) {
+      case 'success':
+        return this.renderSuccess(this.context);
+      case 'error':
+        return this.renderError(this.context, result);
+      case 'pending':
+        return this.renderPending(this.context, statusUpdate);
     }
   }
 
-  renderNoFileError(onHide: () => void) {
+  renderNoFileError() {
     return (
       <Container>
         <Center>
@@ -245,7 +257,7 @@ export default class ShareSheetExportFile extends Component<Props, State> {
         </Center>
         <FlexRow>
           <Spacer />
-          <Button compact padded onClick={onHide}>
+          <Button compact padded onClick={this.onHide}>
             Close
           </Button>
         </FlexRow>