jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor ShareSheetExportFile

Browse Source 
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
This commit is contained in:
Pascal Hartig
2019-10-08 00:17:23 -07:00
committed by Facebook Github Bot
parent 7f2f2febcf
commit a41625e176
3 changed files with 109 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -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}
/>

2
src/chrome/ExportDataPluginSheet.tsx
View File

@@ -23,7 +23,7 @@ import SelectPluginSheet from './SelectPluginSheet';
import {Dispatch, Action} from 'redux';
type OwnProps = {
onHide: () => any;
onHide: () => void;
};
type StateFromProps = {

202
src/chrome/ShareSheetExportFile.tsx
View File

@@ -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>