diff --git a/src/PluginContainer.js b/src/PluginContainer.js index 88898fd27..0fe5307d1 100644 --- a/src/PluginContainer.js +++ b/src/PluginContainer.js @@ -67,55 +67,40 @@ type State = { pluginKey: string, }; -function computeState(props: Props): State { - // plugin changed - let activePlugin = [NotificationsHub, ...devicePlugins].find( - (p: Class>) => p.id === props.selectedPlugin, - ); - let target = props.selectedDevice; - let pluginKey = 'unknown'; - if (activePlugin) { - pluginKey = `${props.selectedDevice.serial}#${activePlugin.id}`; - } else { - target = props.clients.find( - (client: Client) => client.id === props.selectedApp, - ); - activePlugin = clientPlugins.find( - (p: Class>) => p.id === props.selectedPlugin, - ); - if (!activePlugin || !target) { - throw new Error( - `Plugin "${props.selectedPlugin || ''}" could not be found.`, - ); - } - pluginKey = `${target.id}#${activePlugin.id}`; - } - - return { - activePlugin, - target, - pluginKey, - }; -} - class PluginContainer extends Component { - plugin: ?FlipperBasePlugin<>; - - constructor(props: Props) { - super(); - this.state = computeState(props); - } - - componentWillReceiveProps(nextProps: Props) { - if ( - nextProps.selectedDevice !== this.props.selectedDevice || - nextProps.selectedApp !== this.props.selectedApp || - nextProps.selectedPlugin !== this.props.selectedPlugin - ) { - this.setState(computeState(nextProps)); + static getDerivedStateFromProps(props: Props): State { + let activePlugin = [NotificationsHub, ...devicePlugins].find( + (p: Class>) => p.id === props.selectedPlugin, + ); + let target = props.selectedDevice; + let pluginKey = 'unknown'; + if (activePlugin) { + pluginKey = `${props.selectedDevice.serial}#${activePlugin.id}`; + } else { + target = props.clients.find( + (client: Client) => client.id === props.selectedApp, + ); + activePlugin = clientPlugins.find( + (p: Class>) => p.id === props.selectedPlugin, + ); + if (!activePlugin || !target) { + throw new Error( + `Plugin "${props.selectedPlugin || ''}" could not be found.`, + ); + } + pluginKey = `${target.id}#${activePlugin.id}`; } + + return { + activePlugin, + target, + pluginKey, + }; } + state: State = this.constructor.getDerivedStateFromProps(this.props); + plugin: ?FlipperBasePlugin<>; + refChanged = (ref: ?FlipperBasePlugin<>) => { if (this.plugin) { this.plugin._teardown();