export function AppSelector()

in desktop/flipper-ui-core/src/sandy-chrome/appinspect/AppSelector.tsx [51:142]
89 lines of code
4 McCabe index (conditional complexity)

export function AppSelector() {
  const dispatch = useDispatch();
  const selectableDevices = useSelector(getSelectableDevices);
  const {selectedDevice, clients, uninitializedClients, selectedAppId} =
    useStore((state) => state.connections);
  useValue(selectedDevice?.connected, false); // subscribe to future archived state changes

  const onSelectDevice = useTrackedCallback(
    'select-device',
    (device: BaseDevice) => {
      batch(() => {
        dispatch(selectDevice(device));
      });
    },
    [],
  );
  const onSelectApp = useTrackedCallback(
    'select-app',
    (_device: BaseDevice, client: Client) => {
      batch(() => {
        dispatch(selectClient(client.id));
      });
    },
    [],
  );

  const entries = computeEntries(
    selectableDevices,
    clients,
    uninitializedClients,
    onSelectDevice,
    onSelectApp,
  );
  const client = clients.get(selectedAppId!);

  return (
    <>
      {entries.length ? (
        <Radio.Group
          value={selectedAppId}
          size="small"
          style={{
            display: 'flex',
            flex: 1,
          }}>
          <Dropdown
            trigger={['click']}
            overlay={
              <Menu selectedKeys={selectedAppId ? [selectedAppId] : []}>
                {entries}
              </Menu>
            }>
            <AppInspectButton title="Select the device / app to inspect">
              <Layout.Horizontal gap center>
                {client?.query.rsocket ? (
                  <DeprecationIcon />
                ) : (
                  <AppIcon
                    appname={client?.query.app}
                    device={selectedDevice}
                  />
                )}
                <Layout.Container grow shrink>
                  <Text strong>{client?.query.app ?? ''}</Text>
                  <Text>{selectedDevice?.title || 'Available devices'}</Text>
                </Layout.Container>
                <CaretDownOutlined />
              </Layout.Horizontal>
            </AppInspectButton>
          </Dropdown>
        </Radio.Group>
      ) : (
        <Layout.Horizontal gap center>
          <ExclamationCircleOutlined style={{color: theme.warningColor}} />
          <Text
            type="secondary"
            style={{
              textTransform: 'uppercase',
              fontSize: '0.8em',
              color: theme.errorColor,
            }}>
            No devices found
          </Text>
        </Layout.Horizontal>
      )}
      <TroubleshootingGuide
        showGuide={getRenderHostInstance().GK('flipper_self_sufficiency')}
        devicesDetected={entries.length}
      />
    </>
  );
}