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

selected device

Browse Source 
Summary: The redux store keeps a list of devices. For the active device, it stored the index in that list. This diff now stores a reference to the active device instead of the index in that array. This changes makes it easier to get the reference to the active device in a component.

Reviewed By: jknoxville

Differential Revision: D8767514

fbshipit-source-id: c740cf98d6039223ce8d5a47bcd277989fe70bc3
This commit is contained in:
Daniel Büchele
2018-07-09 07:12:46 -07:00
committed by Facebook Github Bot
parent 540776f172
commit 7ed154c510
8 changed files with 74 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.js
View File

@@ -19,6 +19,7 @@ import PluginManager from './chrome/PluginManager.js';
import type Logger from './fb-stubs/Logger.js'; import type Logger from './fb-stubs/Logger.js';
import type BugReporter from './fb-stubs/BugReporter.js'; import type BugReporter from './fb-stubs/BugReporter.js';
import type BaseDevice from './devices/BaseDevice.js';
type Props = { type Props = {
logger: Logger, logger: Logger,
@@ -26,7 +27,7 @@ type Props = {
leftSidebarVisible: boolean, leftSidebarVisible: boolean,
bugDialogVisible: boolean, bugDialogVisible: boolean,
pluginManagerVisible: boolean, pluginManagerVisible: boolean,
selectedDeviceIndex: number, selectedDevice: ?BaseDevice,
error: ?string, error: ?string,
toggleBugDialogVisible: (visible?: boolean) => void, toggleBugDialogVisible: (visible?: boolean) => void,
}; };
@@ -51,7 +52,7 @@ export class App extends React.Component<Props> {
close={() => this.props.toggleBugDialogVisible(false)} close={() => this.props.toggleBugDialogVisible(false)}
/> />
)} )}
{this.props.selectedDeviceIndex > -1 ? ( {this.props.selectedDevice ? (
<FlexRow fill={true}> <FlexRow fill={true}>
{this.props.leftSidebarVisible && <MainSidebar />} {this.props.leftSidebarVisible && <MainSidebar />}
<PluginContainer logger={this.props.logger} /> <PluginContainer logger={this.props.logger} />
@@ -70,13 +71,13 @@ export class App extends React.Component<Props> {
export default connect( export default connect(
({ ({
application: {pluginManagerVisible, bugDialogVisible, leftSidebarVisible}, application: {pluginManagerVisible, bugDialogVisible, leftSidebarVisible},
connections: {selectedDeviceIndex}, connections: {selectedDevice},
server: {error}, server: {error},
}) => ({ }) => ({
pluginManagerVisible, pluginManagerVisible,
bugDialogVisible, bugDialogVisible,
leftSidebarVisible, leftSidebarVisible,
selectedDeviceIndex, selectedDevice,
error, error,
}), }),
{toggleBugDialogVisible}, {toggleBugDialogVisible},

13
src/PluginContainer.js
View File

@@ -34,12 +34,11 @@ const SidebarContainer = FlexRow.extends({
type Props = { type Props = {
logger: LogManager, logger: LogManager,
selectedDeviceIndex: number, selectedDevice: BaseDevice,
selectedPlugin: ?string, selectedPlugin: ?string,
selectedApp: ?string, selectedApp: ?string,
pluginStates: Object, pluginStates: Object,
clients: Array<Client>, clients: Array<Client>,
devices: Array<BaseDevice>,
setPluginState: (payload: { setPluginState: (payload: {
pluginKey: string, pluginKey: string,
state: Object, state: Object,
@@ -96,11 +95,10 @@ class PluginContainer extends Component<Props, State> {
let activePlugin = devicePlugins.find( let activePlugin = devicePlugins.find(
(p: Class<SonarDevicePlugin<>>) => p.id === props.selectedPlugin, (p: Class<SonarDevicePlugin<>>) => p.id === props.selectedPlugin,
); );
const device: BaseDevice = props.devices[props.selectedDeviceIndex]; let target = props.selectedDevice;
let target = device;
let pluginKey = 'unknown'; let pluginKey = 'unknown';
if (activePlugin) { if (activePlugin) {
pluginKey = `${device.serial}#${activePlugin.id}`; pluginKey = `${props.selectedDevice.serial}#${activePlugin.id}`;
} else { } else {
target = props.clients.find( target = props.clients.find(
(client: Client) => client.id === props.selectedApp, (client: Client) => client.id === props.selectedApp,
@@ -164,13 +162,12 @@ class PluginContainer extends Component<Props, State> {
export default connect( export default connect(
({ ({
application: {rightSidebarVisible, rightSidebarAvailable}, application: {rightSidebarVisible, rightSidebarAvailable},
connections: {selectedPlugin, devices, selectedDeviceIndex, selectedApp}, connections: {selectedPlugin, selectedDevice, selectedApp},
pluginStates, pluginStates,
server: {clients}, server: {clients},
}) => ({ }) => ({
selectedPlugin, selectedPlugin,
devices, selectedDevice,
selectedDeviceIndex,
pluginStates, pluginStates,
selectedApp, selectedApp,
clients, clients,

20
src/chrome/DevicesButton.js
View File

@@ -12,10 +12,10 @@ import {selectDevice} from '../reducers/connections.js';
import type BaseDevice from '../devices/BaseDevice.js'; import type BaseDevice from '../devices/BaseDevice.js';
type Props = { type Props = {
selectedDeviceIndex: number, selectedDevice: ?BaseDevice,
androidEmulators: Array<string>, androidEmulators: Array<string>,
devices: Array<BaseDevice>, devices: Array<BaseDevice>,
selectDevice: (i: number) => void, selectDevice: (device: BaseDevice) => void,
}; };
class DevicesButton extends Component<Props> { class DevicesButton extends Component<Props> {
@@ -31,14 +31,14 @@ class DevicesButton extends Component<Props> {
const { const {
devices, devices,
androidEmulators, androidEmulators,
selectedDeviceIndex, selectedDevice,
selectDevice, selectDevice,
} = this.props; } = this.props;
let text = 'No device selected'; let text = 'No device selected';
let icon = 'minus-circle'; let icon = 'minus-circle';
if (selectedDeviceIndex > -1) { if (selectedDevice) {
text = devices[selectedDeviceIndex].title; text = selectedDevice.title;
icon = 'mobile'; icon = 'mobile';
} }
@@ -50,9 +50,9 @@ class DevicesButton extends Component<Props> {
label: 'Running devices', label: 'Running devices',
enabled: false, enabled: false,
}, },
...devices.map((device: BaseDevice, i: number) => ({ ...devices.map((device: BaseDevice) => ({
click: () => selectDevice(i), click: () => selectDevice(device),
checked: i === selectedDeviceIndex, checked: device === selectedDevice,
label: `${device.deviceType === 'physical' ? '📱 ' : ''}${ label: `${device.deviceType === 'physical' ? '📱 ' : ''}${
device.title device.title
}`, }`,
@@ -91,10 +91,10 @@ class DevicesButton extends Component<Props> {
} }
} }
export default connect( export default connect(
({connections: {devices, androidEmulators, selectedDeviceIndex}}) => ({ ({connections: {devices, androidEmulators, selectedDevice}}) => ({
devices, devices,
androidEmulators, androidEmulators,
selectedDeviceIndex, selectedDevice,
}), }),
{selectDevice}, {selectDevice},
)(DevicesButton); )(DevicesButton);

20
src/chrome/MainSidebar.js
View File

@@ -134,30 +134,27 @@ class PluginSidebarListItem extends Component<{
type MainSidebarProps = {| type MainSidebarProps = {|
selectedPlugin: ?string, selectedPlugin: ?string,
selectedApp: ?string, selectedApp: ?string,
selectedDeviceIndex: number, selectedDevice: BaseDevice,
selectPlugin: (payload: { selectPlugin: (payload: {
selectedPlugin: ?string, selectedPlugin: ?string,
selectedApp: ?string, selectedApp: ?string,
}) => void, }) => void,
devices: Array<BaseDevice>,
clients: Array<Client>, clients: Array<Client>,
|}; |};
class MainSidebar extends Component<MainSidebarProps> { class MainSidebar extends Component<MainSidebarProps> {
render() { render() {
const { const {
devices, selectedDevice,
selectedDeviceIndex,
selectedPlugin, selectedPlugin,
selectedApp, selectedApp,
selectPlugin, selectPlugin,
} = this.props; } = this.props;
let {clients} = this.props; let {clients} = this.props;
const device: BaseDevice = devices[selectedDeviceIndex];
let enabledPlugins = []; let enabledPlugins = [];
for (const devicePlugin of devicePlugins) { for (const devicePlugin of devicePlugins) {
if (device.supportsPlugin(devicePlugin)) { if (selectedDevice.supportsPlugin(devicePlugin)) {
enabledPlugins.push(devicePlugin); enabledPlugins.push(devicePlugin);
} }
} }
@@ -168,9 +165,9 @@ class MainSidebar extends Component<MainSidebarProps> {
clients = clients clients = clients
.filter((client: Client) => { .filter((client: Client) => {
if ( if (
(device instanceof AndroidDevice && (selectedDevice instanceof AndroidDevice &&
client.query.os.toLowerCase() !== 'android') || client.query.os.toLowerCase() !== 'android') ||
(device instanceof IOSDevice && (selectedDevice instanceof IOSDevice &&
client.query.os.toLowerCase() !== 'ios') client.query.os.toLowerCase() !== 'ios')
) { ) {
return false; return false;
@@ -183,7 +180,7 @@ class MainSidebar extends Component<MainSidebarProps> {
return ( return (
<Sidebar position="left" width={200}> <Sidebar position="left" width={200}>
{devicePlugins {devicePlugins
.filter(device.supportsPlugin) .filter(selectedDevice.supportsPlugin)
.map((plugin: Class<SonarDevicePlugin<>>) => ( .map((plugin: Class<SonarDevicePlugin<>>) => (
<PluginSidebarListItem <PluginSidebarListItem
key={plugin.id} key={plugin.id}
@@ -230,11 +227,10 @@ class MainSidebar extends Component<MainSidebarProps> {
export default connect( export default connect(
({ ({
connections: {devices, selectedDeviceIndex, selectedPlugin, selectedApp}, connections: {selectedDevice, selectedPlugin, selectedApp},
server: {clients}, server: {clients},
}) => ({ }) => ({
devices, selectedDevice,
selectedDeviceIndex,
selectedPlugin, selectedPlugin,
selectedApp, selectedApp,
clients, clients,

59
src/chrome/ScreenCaptureButtons.js
View File

@@ -29,8 +29,7 @@ import type BaseDevice from '../devices/BaseDevice';
type PullTransfer = any; type PullTransfer = any;
type Props = {| type Props = {|
devices: Array<BaseDevice>, selectedDevice: ?BaseDevice,
selectedDeviceIndex: number,
|}; |};
type State = {| type State = {|
@@ -93,12 +92,11 @@ class ScreenCaptureButtons extends Component<Props, State> {
} }
checkIfRecordingIsAvailable = (props: Props = this.props): void => { checkIfRecordingIsAvailable = (props: Props = this.props): void => {
const {devices, selectedDeviceIndex} = props; const {selectedDevice} = props;
const device: BaseDevice = devices[selectedDeviceIndex];
if (device instanceof AndroidDevice) { if (selectedDevice instanceof AndroidDevice) {
this.executeShell( this.executeShell(
device, selectedDevice,
`[ ! -f /system/bin/screenrecord ] && echo "File does not exist"`, `[ ! -f /system/bin/screenrecord ] && echo "File does not exist"`,
).then(output => ).then(output =>
this.setState({ this.setState({
@@ -106,8 +104,8 @@ class ScreenCaptureButtons extends Component<Props, State> {
}), }),
); );
} else if ( } else if (
device instanceof IOSDevice && selectedDevice instanceof IOSDevice &&
device.deviceType === 'emulator' selectedDevice.deviceType === 'emulator'
) { ) {
this.setState({ this.setState({
recordingEnabled: true, recordingEnabled: true,
@@ -120,16 +118,15 @@ class ScreenCaptureButtons extends Component<Props, State> {
}; };
captureScreenshot = () => { captureScreenshot = () => {
const {devices, selectedDeviceIndex} = this.props; const {selectedDevice} = this.props;
const device: BaseDevice = devices[selectedDeviceIndex];
if (device instanceof AndroidDevice) { if (selectedDevice instanceof AndroidDevice) {
return device.adb return selectedDevice.adb
.screencap(device.serial) .screencap(selectedDevice.serial)
.then(writePngStreamToFile) .then(writePngStreamToFile)
.then(openFile) .then(openFile)
.catch(console.error); .catch(console.error);
} else if (device instanceof IOSDevice) { } else if (selectedDevice instanceof IOSDevice) {
exec( exec(
`xcrun simctl io booted screenshot ${SCREENSHOT_PATH}`, `xcrun simctl io booted screenshot ${SCREENSHOT_PATH}`,
(err, data) => { (err, data) => {
@@ -144,15 +141,14 @@ class ScreenCaptureButtons extends Component<Props, State> {
}; };
startRecording = () => { startRecording = () => {
const {devices, selectedDeviceIndex} = this.props; const {selectedDevice} = this.props;
const device: BaseDevice = devices[selectedDeviceIndex];
if (device instanceof AndroidDevice) { if (selectedDevice instanceof AndroidDevice) {
this.setState({ this.setState({
recording: true, recording: true,
}); });
this.executeShell( this.executeShell(
device, selectedDevice,
`screenrecord --bugreport /sdcard/${VIDEO_FILE_NAME}`, `screenrecord --bugreport /sdcard/${VIDEO_FILE_NAME}`,
) )
.then(output => { .then(output => {
@@ -169,7 +165,7 @@ class ScreenCaptureButtons extends Component<Props, State> {
.then( .then(
(): Promise<string> => { (): Promise<string> => {
return this.pullFromDevice( return this.pullFromDevice(
device, selectedDevice,
`/sdcard/${VIDEO_FILE_NAME}`, `/sdcard/${VIDEO_FILE_NAME}`,
VIDEO_PATH, VIDEO_PATH,
); );
@@ -177,7 +173,7 @@ class ScreenCaptureButtons extends Component<Props, State> {
) )
.then(openFile) .then(openFile)
.then(() => { .then(() => {
this.executeShell(device, `rm /sdcard/${VIDEO_FILE_NAME}`); this.executeShell(selectedDevice, `rm /sdcard/${VIDEO_FILE_NAME}`);
}) })
.then(() => { .then(() => {
this.setState({ this.setState({
@@ -191,7 +187,7 @@ class ScreenCaptureButtons extends Component<Props, State> {
pullingData: false, pullingData: false,
}); });
}); });
} else if (device instanceof IOSDevice) { } else if (selectedDevice instanceof IOSDevice) {
this.setState({ this.setState({
recording: true, recording: true,
}); });
@@ -218,10 +214,10 @@ class ScreenCaptureButtons extends Component<Props, State> {
}; };
stopRecording = () => { stopRecording = () => {
const {devices, selectedDeviceIndex} = this.props; const {selectedDevice} = this.props;
const device: BaseDevice = devices[selectedDeviceIndex];
if (device instanceof AndroidDevice) { if (selectedDevice instanceof AndroidDevice) {
this.executeShell(device, `pgrep 'screenrecord' -L 2`); this.executeShell(selectedDevice, `pgrep 'screenrecord' -L 2`);
} else if (this.iOSRecorder) { } else if (this.iOSRecorder) {
this.iOSRecorder.kill(); this.iOSRecorder.kill();
this.setState({ this.setState({
@@ -248,9 +244,7 @@ class ScreenCaptureButtons extends Component<Props, State> {
render() { render() {
const {recordingEnabled} = this.state; const {recordingEnabled} = this.state;
const {devices, selectedDeviceIndex} = this.props; const {selectedDevice} = this.props;
const device: ?BaseDevice =
selectedDeviceIndex > -1 ? devices[selectedDeviceIndex] : null;
return ( return (
<ButtonGroup> <ButtonGroup>
@@ -259,7 +253,7 @@ class ScreenCaptureButtons extends Component<Props, State> {
onClick={this.captureScreenshot} onClick={this.captureScreenshot}
icon="camera" icon="camera"
title="Take Screenshot" title="Take Screenshot"
disabled={!device} disabled={!selectedDevice}
/> />
<Button <Button
compact={true} compact={true}
@@ -268,14 +262,13 @@ class ScreenCaptureButtons extends Component<Props, State> {
pulse={this.state.recording} pulse={this.state.recording}
selected={this.state.recording} selected={this.state.recording}
title="Make Screen Recording" title="Make Screen Recording"
disabled={!device || !recordingEnabled} disabled={!selectedDevice || !recordingEnabled}
/> />
</ButtonGroup> </ButtonGroup>
); );
} }
} }
export default connect(({connections: {devices, selectedDeviceIndex}}) => ({ export default connect(({connections: {selectedDevice}}) => ({
devices, selectedDevice,
selectedDeviceIndex,
}))(ScreenCaptureButtons); }))(ScreenCaptureButtons);

3
src/devices/BaseDevice.js
View File

@@ -57,9 +57,8 @@ export default class BaseDevice {
return this.supportedPlugins.includes(DevicePlugin.id); return this.supportedPlugins.includes(DevicePlugin.id);
}; };
// ensure that we don't serialise devices
toJSON() { toJSON() {
return null; return `<${this.constructor.name}#${this.title}>`;
} }
teardown() {} teardown() {}

17
src/dispatcher/tracking.js
View File

@@ -7,37 +7,32 @@
import {ipcRenderer} from 'electron'; import {ipcRenderer} from 'electron';
import type BaseDevice from '../devices/BaseDevice.js';
import type {Store} from '../reducers/index.js'; import type {Store} from '../reducers/index.js';
import type Logger from '../fb-stubs/Logger.js'; import type Logger from '../fb-stubs/Logger.js';
export default (store: Store, logger: Logger) => { export default (store: Store, logger: Logger) => {
ipcRenderer.on('trackUsage', () => { ipcRenderer.on('trackUsage', () => {
const { const {
devices, selectedDevice,
selectedDeviceIndex,
selectedPlugin, selectedPlugin,
selectedApp, selectedApp,
} = store.getState().connections; } = store.getState().connections;
const device: ?BaseDevice = if (!selectedDevice || !selectedPlugin) {
selectedDeviceIndex > -1 ? devices[selectedDeviceIndex] : null;
console.log(1, 2, 3);
if (!device || !selectedPlugin) {
return; return;
} }
if (selectedApp) { if (selectedApp) {
logger.track('usage', 'ping', { logger.track('usage', 'ping', {
app: selectedApp, app: selectedApp,
device, device: selectedDevice,
os: device.os, os: selectedDevice.os,
plugin: selectedPlugin, plugin: selectedPlugin,
}); });
} else { } else {
logger.track('usage', 'ping', { logger.track('usage', 'ping', {
os: device.os, os: selectedDevice.os,
plugin: selectedPlugin, plugin: selectedPlugin,
device: device.title, device: selectedDevice.title,
}); });
} }
}); });

26
src/reducers/connections.js
View File

@@ -9,7 +9,7 @@ import type BaseDevice from '../devices/BaseDevice';
export type State = { export type State = {
devices: Array<BaseDevice>, devices: Array<BaseDevice>,
androidEmulators: Array<string>, androidEmulators: Array<string>,
selectedDeviceIndex: number, selectedDevice: ?BaseDevice,
selectedPlugin: ?string, selectedPlugin: ?string,
selectedApp: ?string, selectedApp: ?string,
}; };
@@ -29,7 +29,7 @@ export type Action =
} }
| { | {
type: 'SELECT_DEVICE', type: 'SELECT_DEVICE',
payload: number, payload: BaseDevice,
} }
| { | {
type: 'SELECT_PLUGIN', type: 'SELECT_PLUGIN',
@@ -44,7 +44,7 @@ const DEFAULT_PLUGIN = 'DeviceLogs';
const INITAL_STATE: State = { const INITAL_STATE: State = {
devices: [], devices: [],
androidEmulators: [], androidEmulators: [],
selectedDeviceIndex: -1, selectedDevice: null,
selectedApp: null, selectedApp: null,
selectedPlugin: DEFAULT_PLUGIN, selectedPlugin: DEFAULT_PLUGIN,
}; };
@@ -60,7 +60,7 @@ export default function reducer(
...state, ...state,
selectedApp: null, selectedApp: null,
selectedPlugin: DEFAULT_PLUGIN, selectedPlugin: DEFAULT_PLUGIN,
selectedDeviceIndex: payload, selectedDevice: payload,
}; };
} }
case 'REGISTER_ANDROID_EMULATORS': { case 'REGISTER_ANDROID_EMULATORS': {
@@ -73,10 +73,10 @@ export default function reducer(
case 'REGISTER_DEVICE': { case 'REGISTER_DEVICE': {
const {payload} = action; const {payload} = action;
const devices = state.devices.concat(payload); const devices = state.devices.concat(payload);
let {selectedDeviceIndex} = state; let {selectedDevice} = state;
let selection = {}; let selection = {};
if (selectedDeviceIndex === -1) { if (!selectedDevice) {
selectedDeviceIndex = devices.length - 1; selectedDevice = payload;
selection = { selection = {
selectedApp: null, selectedApp: null,
selectedPlugin: DEFAULT_PLUGIN, selectedPlugin: DEFAULT_PLUGIN,
@@ -86,17 +86,17 @@ export default function reducer(
...state, ...state,
devices, devices,
// select device if none was selected before // select device if none was selected before
selectedDeviceIndex, selectedDevice,
...selection, ...selection,
}; };
} }
case 'UNREGISTER_DEVICES': { case 'UNREGISTER_DEVICES': {
const {payload} = action; const {payload} = action;
const {selectedDeviceIndex} = state; const {selectedDevice} = state;
let selectedDeviceWasRemoved = false; let selectedDeviceWasRemoved = false;
const devices = state.devices.filter((device: BaseDevice, i: number) => { const devices = state.devices.filter((device: BaseDevice) => {
if (payload.has(device.serial)) { if (payload.has(device.serial)) {
if (selectedDeviceIndex === i) { if (selectedDevice === device) {
// removed device is the selected // removed device is the selected
selectedDeviceWasRemoved = true; selectedDeviceWasRemoved = true;
} }
@@ -109,7 +109,7 @@ export default function reducer(
let selection = {}; let selection = {};
if (selectedDeviceWasRemoved) { if (selectedDeviceWasRemoved) {
selection = { selection = {
selectedDeviceIndex: devices.length - 1, selectedDevice: devices[devices.length - 1],
selectedApp: null, selectedApp: null,
selectedPlugin: DEFAULT_PLUGIN, selectedPlugin: DEFAULT_PLUGIN,
}; };
@@ -134,7 +134,7 @@ export default function reducer(
} }
} }
export const selectDevice = (payload: number): Action => ({ export const selectDevice = (payload: BaseDevice): Action => ({
type: 'SELECT_DEVICE', type: 'SELECT_DEVICE',
payload, payload,
}); });