diff --git a/src/chrome/MainSidebar.tsx b/src/chrome/MainSidebar.tsx index afbf97603..10c5290a3 100644 --- a/src/chrome/MainSidebar.tsx +++ b/src/chrome/MainSidebar.tsx @@ -38,6 +38,7 @@ import { starPlugin, StaticView, setStaticView, + selectClient, } from '../reducers/connections'; import {setActiveSheet} from '../reducers/application'; import UserAccount from './UserAccount'; @@ -222,6 +223,7 @@ type StateFromProps = { selectedApp: string | null | undefined; userStarredPlugins: Store['connections']['userStarredPlugins']; clients: Array; + selectedClient: string; uninitializedClients: Array<{ client: UninitializedClient; deviceId?: string; @@ -237,6 +239,7 @@ type DispatchFromProps = { selectedApp: string | null; deepLinkPayload: string | null; }) => void; + selectClient: typeof selectClient; setActiveSheet: (activeSheet: ActiveSheet) => void; setStaticView: (payload: StaticView) => void; starPlugin: typeof starPlugin; @@ -245,14 +248,11 @@ type DispatchFromProps = { type Props = OwnProps & StateFromProps & DispatchFromProps; type State = { showSupportForm: boolean; - selectedClientIndex: number; showAllPlugins: boolean; }; class MainSidebar extends PureComponent { state: State = { showSupportForm: GK.get('flipper_support_requests'), - // Not to be confused with selectedApp prop, this one only used to remember the client drowdown selector - selectedClientIndex: 0, showAllPlugins: false, }; static getDerivedStateFromProps(props: Props, state: State) { @@ -271,6 +271,8 @@ class MainSidebar extends PureComponent { render() { const { selectedDevice, + selectedClient, + selectClient, selectedPlugin, staticView, selectPlugin, @@ -290,8 +292,9 @@ class MainSidebar extends PureComponent { client.query.device_id === 'unknown', ) .sort((a, b) => (a.query.app || '').localeCompare(b.query.app)); - const client: Client | null = - clients[this.state.selectedClientIndex] || null; + const client: Client | undefined = clients.find( + client => client.query.app === selectedClient, + ); return ( { ({ + dropdown={clients.map(c => ({ checked: client === c, label: c.query.app, type: 'checkbox', - click: () => this.setState({selectedClientIndex: index}), + click: () => selectClient(c.query.app), }))}> {clients.length === 0 ? ( - '(Not connected to app)' - ) : this.state.selectedClientIndex >= clients.length ? ( - '(Select app)' + '(Not connected clients)' + ) : !client ? ( + '(Select client)' ) : ( <> {client.query.app} @@ -463,7 +466,7 @@ class MainSidebar extends PureComponent { )); } - renderClientPlugins(client: Client | null) { + renderClientPlugins(client?: Client) { if (!client) { return null; } @@ -594,6 +597,7 @@ export default connect( selectedDevice, selectedPlugin, selectedApp, + selectedClient, userStarredPlugins, clients, uninitializedClients, @@ -610,6 +614,7 @@ export default connect( })(), windowIsFocused, selectedDevice, + selectedClient, staticView, selectedPlugin, selectedApp, @@ -621,6 +626,7 @@ export default connect( }), { selectPlugin, + selectClient, setStaticView, setActiveSheet, starPlugin, diff --git a/src/reducers/connections.tsx b/src/reducers/connections.tsx index 46c0795ad..f450a547b 100644 --- a/src/reducers/connections.tsx +++ b/src/reducers/connections.tsx @@ -47,6 +47,9 @@ export type State = { userStarredPlugins: {[key: string]: Array}; errors: FlipperError[]; clients: Array; + // refers to the client that is selected in the main side bar, not to be confused with + // selectedApp, which represents the app of the currently active plugin! + selectedClient: string; uninitializedClients: Array<{ client: UninitializedClient; deviceId?: string; @@ -131,6 +134,10 @@ export type Action = selectedPlugin: string; selectedApp: string; }; + } + | { + type: 'SELECT_CLIENT'; + payload: string; }; const DEFAULT_PLUGIN = 'DeviceLogs'; @@ -147,6 +154,7 @@ const INITAL_STATE: State = { userStarredPlugins: {}, errors: [], clients: [], + selectedClient: '', uninitializedClients: [], deepLinkPayload: null, staticView: WelcomeScreen, @@ -425,6 +433,12 @@ const reducer = (state: State = INITAL_STATE, action: Actions): State => { errors, }; } + case 'SELECT_CLIENT': { + return { + ...state, + selectedClient: action.payload, + }; + } default: return state; } @@ -514,14 +528,12 @@ export const userPreferredPlugin = (payload: string): Action => ({ payload, }); -function extractAppNameFromAppId(appId: string | null): string | null { - const nameRegex = /([^#]+)#/; - const matchedRegex = appId ? appId.match(nameRegex) : null; - // Expect the name of the app to be on the first matching - return matchedRegex && matchedRegex[1]; -} - export const dismissError = (index: number): Action => ({ type: 'DISMISS_ERROR', payload: index, }); + +export const selectClient = (clientId: string): Action => ({ + type: 'SELECT_CLIENT', + payload: clientId, +}); diff --git a/src/reducers/index.tsx b/src/reducers/index.tsx index a30f1e14f..66f3093d9 100644 --- a/src/reducers/index.tsx +++ b/src/reducers/index.tsx @@ -97,6 +97,7 @@ export default combineReducers({ 'userPreferredPlugin', 'userPreferredApp', 'userStarredPlugins', + 'selectedClient', ], }, connections,