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

13
src/PluginContainer.js
View File

@@ -34,12 +34,11 @@ const SidebarContainer = FlexRow.extends({
type Props = {
logger: LogManager,
selectedDeviceIndex: number,
selectedDevice: BaseDevice,
selectedPlugin: ?string,
selectedApp: ?string,
pluginStates: Object,
clients: Array<Client>,
devices: Array<BaseDevice>,
setPluginState: (payload: {
pluginKey: string,
state: Object,
@@ -96,11 +95,10 @@ class PluginContainer extends Component<Props, State> {
let activePlugin = devicePlugins.find(
(p: Class<SonarDevicePlugin<>>) => p.id === props.selectedPlugin,
);
const device: BaseDevice = props.devices[props.selectedDeviceIndex];
let target = device;
let target = props.selectedDevice;
let pluginKey = 'unknown';
if (activePlugin) {
pluginKey = `${device.serial}#${activePlugin.id}`;
pluginKey = `${props.selectedDevice.serial}#${activePlugin.id}`;
} else {
target = props.clients.find(
(client: Client) => client.id === props.selectedApp,
@@ -164,13 +162,12 @@ class PluginContainer extends Component<Props, State> {
export default connect(
({
application: {rightSidebarVisible, rightSidebarAvailable},
connections: {selectedPlugin, devices, selectedDeviceIndex, selectedApp},
connections: {selectedPlugin, selectedDevice, selectedApp},
pluginStates,
server: {clients},
}) => ({
selectedPlugin,
devices,
selectedDeviceIndex,
selectedDevice,
pluginStates,
selectedApp,
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';
type Props = {
selectedDeviceIndex: number,
selectedDevice: ?BaseDevice,
androidEmulators: Array<string>,
devices: Array<BaseDevice>,
selectDevice: (i: number) => void,
selectDevice: (device: BaseDevice) => void,
};
class DevicesButton extends Component<Props> {
@@ -31,14 +31,14 @@ class DevicesButton extends Component<Props> {
const {
devices,
androidEmulators,
selectedDeviceIndex,
selectedDevice,
selectDevice,
} = this.props;
let text = 'No device selected';
let icon = 'minus-circle';
if (selectedDeviceIndex > -1) {
text = devices[selectedDeviceIndex].title;
if (selectedDevice) {
text = selectedDevice.title;
icon = 'mobile';
}
@@ -50,9 +50,9 @@ class DevicesButton extends Component<Props> {
label: 'Running devices',
enabled: false,
},
...devices.map((device: BaseDevice, i: number) => ({
click: () => selectDevice(i),
checked: i === selectedDeviceIndex,
...devices.map((device: BaseDevice) => ({
click: () => selectDevice(device),
checked: device === selectedDevice,
label: `${device.deviceType === 'physical' ? '📱 ' : ''}${
device.title
}`,
@@ -91,10 +91,10 @@ class DevicesButton extends Component<Props> {
}
}
export default connect(
({connections: {devices, androidEmulators, selectedDeviceIndex}}) => ({
({connections: {devices, androidEmulators, selectedDevice}}) => ({
devices,
androidEmulators,
selectedDeviceIndex,
selectedDevice,
}),
{selectDevice},
)(DevicesButton);

20
src/chrome/MainSidebar.js
View File

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

59
src/chrome/ScreenCaptureButtons.js
View File

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

3
src/devices/BaseDevice.js
View File

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

17
src/dispatcher/tracking.js
View File

@@ -7,37 +7,32 @@
import {ipcRenderer} from 'electron';
import type BaseDevice from '../devices/BaseDevice.js';
import type {Store} from '../reducers/index.js';
import type Logger from '../fb-stubs/Logger.js';
export default (store: Store, logger: Logger) => {
ipcRenderer.on('trackUsage', () => {
const {
devices,
selectedDeviceIndex,
selectedDevice,
selectedPlugin,
selectedApp,
} = store.getState().connections;
const device: ?BaseDevice =
selectedDeviceIndex > -1 ? devices[selectedDeviceIndex] : null;
console.log(1, 2, 3);
if (!device || !selectedPlugin) {
if (!selectedDevice || !selectedPlugin) {
return;
}
if (selectedApp) {
logger.track('usage', 'ping', {
app: selectedApp,
device,
os: device.os,
device: selectedDevice,
os: selectedDevice.os,
plugin: selectedPlugin,
});
} else {
logger.track('usage', 'ping', {
os: device.os,
os: selectedDevice.os,
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 = {
devices: Array<BaseDevice>,
androidEmulators: Array<string>,
selectedDeviceIndex: number,
selectedDevice: ?BaseDevice,
selectedPlugin: ?string,
selectedApp: ?string,
};
@@ -29,7 +29,7 @@ export type Action =
}
| {
type: 'SELECT_DEVICE',
payload: number,
payload: BaseDevice,
}
| {
type: 'SELECT_PLUGIN',
@@ -44,7 +44,7 @@ const DEFAULT_PLUGIN = 'DeviceLogs';
const INITAL_STATE: State = {
devices: [],
androidEmulators: [],
selectedDeviceIndex: -1,
selectedDevice: null,
selectedApp: null,
selectedPlugin: DEFAULT_PLUGIN,
};
@@ -60,7 +60,7 @@ export default function reducer(
...state,
selectedApp: null,
selectedPlugin: DEFAULT_PLUGIN,
selectedDeviceIndex: payload,
selectedDevice: payload,
};
}
case 'REGISTER_ANDROID_EMULATORS': {
@@ -73,10 +73,10 @@ export default function reducer(
case 'REGISTER_DEVICE': {
const {payload} = action;
const devices = state.devices.concat(payload);
let {selectedDeviceIndex} = state;
let {selectedDevice} = state;
let selection = {};
if (selectedDeviceIndex === -1) {
selectedDeviceIndex = devices.length - 1;
if (!selectedDevice) {
selectedDevice = payload;
selection = {
selectedApp: null,
selectedPlugin: DEFAULT_PLUGIN,
@@ -86,17 +86,17 @@ export default function reducer(
...state,
devices,
// select device if none was selected before
selectedDeviceIndex,
selectedDevice,
...selection,
};
}
case 'UNREGISTER_DEVICES': {
const {payload} = action;
const {selectedDeviceIndex} = state;
const {selectedDevice} = state;
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 (selectedDeviceIndex === i) {
if (selectedDevice === device) {
// removed device is the selected
selectedDeviceWasRemoved = true;
}
@@ -109,7 +109,7 @@ export default function reducer(
let selection = {};
if (selectedDeviceWasRemoved) {
selection = {
selectedDeviceIndex: devices.length - 1,
selectedDevice: devices[devices.length - 1],
selectedApp: null,
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',
payload,
});