show only one device in sidbar

Summary:
Refactors the plugin architecture of Sonar:
- Before plugin rendering had it's own implementation of the react lifecycle. This means the `render`-function was not called by react, but rather by the application it self. In this diff, the render method is now called from react, which enables better debugging and allows react to do optimizations.
- Business logic for querying emulators is moved away from the view components into its own dispatcher
- All plugin handling is moved from `App.js` to `PluginContainer`.
- The sidebar only shows one selected device. This allows us to add the screenshot feature as part of the Sonar main app and not a plugin.
- This also fixes the inconsistency between the devices button and the sidebar

Reviewed By: jknoxville

Differential Revision: D8186933

fbshipit-source-id: 46404443025bcf18d6eeba0679e098d5440822d5

src/reducers/connections.js

@@ -0,0 +1,148 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+import type BaseDevice from '../devices/BaseDevice';
+export type State = {
+  devices: Array<BaseDevice>,
+  androidEmulators: Array<string>,
+  selectedDeviceIndex: number,
+  selectedPlugin: ?string,
+  selectedApp: ?string,
+};
+
+export type Action =
+  | {
+      type: 'UNREGISTER_DEVICES',
+      payload: Set<string>,
+    }
+  | {
+      type: 'REGISTER_DEVICE',
+      payload: BaseDevice,
+    }
+  | {
+      type: 'REGISTER_ANDROID_EMULATORS',
+      payload: Array<string>,
+    }
+  | {
+      type: 'SELECT_DEVICE',
+      payload: number,
+    }
+  | {
+      type: 'SELECT_PLUGIN',
+      payload: {
+        selectedPlugin: ?string,
+        selectedApp: ?string,
+      },
+    };
+
+const DEFAULT_PLUGIN = 'DeviceLogs';
+
+const INITAL_STATE: State = {
+  devices: [],
+  androidEmulators: [],
+  selectedDeviceIndex: -1,
+  selectedApp: null,
+  selectedPlugin: DEFAULT_PLUGIN,
+};
+
+export default function reducer(
+  state: State = INITAL_STATE,
+  action: Action,
+): State {
+  switch (action.type) {
+    case 'SELECT_DEVICE': {
+      const {payload} = action;
+      return {
+        ...state,
+        selectedApp: null,
+        selectedPlugin: DEFAULT_PLUGIN,
+        selectedDeviceIndex: payload,
+      };
+    }
+    case 'REGISTER_ANDROID_EMULATORS': {
+      const {payload} = action;
+      return {
+        ...state,
+        androidEmulators: payload,
+      };
+    }
+    case 'REGISTER_DEVICE': {
+      const {payload} = action;
+      const devices = state.devices.concat(payload);
+      let {selectedDeviceIndex} = state;
+      let selection = {};
+      if (selectedDeviceIndex === -1) {
+        selectedDeviceIndex = devices.length - 1;
+        selection = {
+          selectedApp: null,
+          selectedPlugin: DEFAULT_PLUGIN,
+        };
+      }
+      return {
+        ...state,
+        devices,
+        // select device if none was selected before
+        selectedDeviceIndex,
+        ...selection,
+      };
+    }
+    case 'UNREGISTER_DEVICES': {
+      const {payload} = action;
+      const {selectedDeviceIndex} = state;
+      let selectedDeviceWasRemoved = false;
+      const devices = state.devices.filter((device: BaseDevice, i: number) => {
+        if (payload.has(device.serial)) {
+          if (selectedDeviceIndex === i) {
+            // removed device is the selected
+            selectedDeviceWasRemoved = true;
+          }
+          return false;
+        } else {
+          return true;
+        }
+      });
+
+      let selection = {};
+      if (selectedDeviceWasRemoved) {
+        selection = {
+          selectedDeviceIndex: devices.length - 1,
+          selectedApp: null,
+          selectedPlugin: DEFAULT_PLUGIN,
+        };
+      }
+
+      return {
+        ...state,
+        devices,
+        ...selection,
+      };
+    }
+    case 'SELECT_PLUGIN': {
+      const {payload} = action;
+
+      return {
+        ...state,
+        ...payload,
+      };
+    }
+    default:
+      return state;
+  }
+}
+
+export const selectDevice = (payload: number): Action => ({
+  type: 'SELECT_DEVICE',
+  payload,
+});
+
+export const selectPlugin = (payload: {
+  selectedPlugin: ?string,
+  selectedApp: ?string,
+}): Action => ({
+  type: 'SELECT_PLUGIN',
+  payload,
+});