diff --git a/src/App.js b/src/App.js index 4b5f17c6d..c6e95fb9b 100644 --- a/src/App.js +++ b/src/App.js @@ -11,7 +11,7 @@ import {connect} from 'react-redux'; import WelcomeScreen from './chrome/WelcomeScreen.tsx'; import TitleBar from './chrome/TitleBar.tsx'; import MainSidebar from './chrome/MainSidebar.js'; -import BugReporterDialog from './chrome/BugReporterDialog.js'; +import BugReporterDialog from './chrome/BugReporterDialog.tsx'; import ErrorBar from './chrome/ErrorBar.tsx'; import ShareSheet from './chrome/ShareSheet.js'; import SignInSheet from './chrome/SignInSheet.js'; diff --git a/src/chrome/BugReporterDialog.js b/src/chrome/BugReporterDialog.tsx similarity index 81% rename from src/chrome/BugReporterDialog.js rename to src/chrome/BugReporterDialog.tsx index 2df1853a0..708562f4b 100644 --- a/src/chrome/BugReporterDialog.js +++ b/src/chrome/BugReporterDialog.tsx @@ -5,9 +5,9 @@ * @format */ -import type BugReporter from '../fb-stubs/BugReporter.tsx'; -import type {FlipperDevicePlugin, FlipperPlugin} from '../plugin.tsx'; -import {Fragment, Component} from 'react'; +import BugReporter from '../fb-stubs/BugReporter'; +import {FlipperPlugin, FlipperDevicePlugin} from '../plugin'; +import React, {Fragment, Component} from 'react'; import {connect} from 'react-redux'; import { Button, @@ -22,6 +22,7 @@ import { Glyph, styled, } from 'flipper'; +import {State as Store} from '../reducers'; const Container = styled(FlexColumn)({ padding: 10, @@ -82,20 +83,30 @@ const InfoBox = styled(FlexRow)({ lineHeight: '130%', }); -type State = {| - description: string, - title: string, - submitting: boolean, - success: ?number, - error: ?string, -|}; +type State = { + description: string; + title: string; + submitting: boolean; + success: number | null | undefined; + error: string | null | undefined; +}; -type Props = {| - bugReporter: BugReporter, - activePlugin: ?Class | FlipperDevicePlugin<>>, - onHide: () => mixed, -|}; +type OwnProps = { + bugReporter: BugReporter; + onHide: () => any; +}; +type DispatchFromProps = {}; + +type StateFromProps = { + activePlugin: + | typeof FlipperPlugin + | typeof FlipperDevicePlugin + | null + | undefined; +}; + +type Props = OwnProps & StateFromProps & DispatchFromProps; class BugReporterDialog extends Component { state = { description: '', @@ -108,11 +119,11 @@ class BugReporterDialog extends Component { titleRef: HTMLElement; descriptionRef: HTMLElement; - onDescriptionChange = (e: SyntheticInputEvent) => { + onDescriptionChange = (e: React.ChangeEvent) => { this.setState({description: e.target.value}); }; - onTitleChange = (e: SyntheticInputEvent) => { + onTitleChange = (e: React.ChangeEvent) => { this.setState({title: e.target.value}); }; @@ -187,6 +198,7 @@ class BugReporterDialog extends Component { render() { let content; const {title, success, error, description, submitting} = this.state; + const {activePlugin} = this.props; if (success) { content = ( @@ -234,32 +246,28 @@ class BugReporterDialog extends Component { onChange={this.onDescriptionChange} disabled={submitting} /> - {this.props.activePlugin?.bugs && ( + {activePlugin && activePlugin.bugs && ( If you bug is related to the{' '} - {this.props.activePlugin?.title || - this.props.activePlugin?.id}{' '} + {(activePlugin && activePlugin.title) || activePlugin.id}{' '} plugin - {this.props.activePlugin?.bugs?.url && ( + {activePlugin && activePlugin.bugs && activePlugin.bugs.url && ( , you might find useful information about it here:{' '} - - {this.props.activePlugin?.bugs?.url} + + {activePlugin.bugs.url} )} - {this.props.activePlugin?.bugs?.email && ( + {activePlugin && activePlugin.bugs && activePlugin.bugs.email && ( , you might also want contact{' '} - - {this.props.activePlugin?.bugs?.email} + + {activePlugin.bugs.email} , the author/oncall of this plugin, directly @@ -297,8 +305,7 @@ class BugReporterDialog extends Component { } } -// $FlowFixMe -export default connect( +export default connect( ({ plugins: {devicePlugins, clientPlugins}, connections: {selectedPlugin},