public componentWillMount()

in packages/extensions/qnamaker/client/src/App.tsx [112:190]
72 lines of code
9 McCabe index (conditional complexity)

  public componentWillMount() {
    // Attach a handler to listen on inspect events
    if (!this.runningDetached()) {
      $host.on('inspect', async (obj: any) => {
        const appState = new AppStateAdapter(obj);
        appState.qnaService = App.getQnAServiceFromBot($host.bot, appState.traceInfo.knowledgeBaseId);
        appState.persistentState = this.state.persistentState;
        this.setState(appState);
        if (appState.qnaService !== null) {
          this.client = new QnAMakerClient({
            kbId: appState.traceInfo.knowledgeBaseId,
            baseUri: QnAApiBasePath,
            subscriptionKey: appState.qnaService.subscriptionKey,
          } as QnAKbInfo);
        }
        $host.setInspectorTitle('QnAMaker');
        $host.setAccessoryState(TrainAccessoryId, AccessoryDefaultState);
        $host.setAccessoryState(PublishAccessoryId, AccessoryDefaultState);
        $host.enableAccessory(
          TrainAccessoryId,
          this.state.persistentState[this.state.id] &&
            this.state.persistentState[this.state.id].pendingTrain &&
            this.state.selectedAnswer !== null
        );
        $host.enableAccessory(
          PublishAccessoryId,
          this.state.persistentState[this.state.id] && this.state.persistentState[this.state.id].pendingPublish
        );
      });

      $host.on('accessory-click', async (id: string) => {
        switch (id) {
          case TrainAccessoryId:
            await this.train();
            break;
          case PublishAccessoryId:
            await this.publish();
            break;
          default:
            break;
        }
      });

      $host.on('bot-updated', (bot: IBotConfiguration) => {
        this.setState({
          qnaService: App.getQnAServiceFromBot(bot, this.state.traceInfo.knowledgeBaseId),
        });
      });

      $host.on('theme', async (themeInfo: { themeName: string; themeComponents: string[] }) => {
        const oldThemeComponents = document.querySelectorAll<HTMLLinkElement>('[data-theme-component="true"]');
        const head = document.querySelector<HTMLHeadElement>('head') as HTMLHeadElement;
        const fragment = document.createDocumentFragment();
        const promises: Promise<any>[] = [];
        // Create the new links for each theme component
        themeInfo.themeComponents.forEach(themeComponent => {
          const link = document.createElement<'link'>('link');
          promises.push(
            new Promise(resolve => {
              link.addEventListener('load', resolve);
            })
          );
          link.href = themeComponent;
          link.rel = 'stylesheet';
          link.setAttribute('data-theme-component', 'true');
          fragment.appendChild(link);
        });
        head.insertBefore(fragment, head.firstElementChild);
        // Wait for all the links to load their css
        await Promise.all(promises);
        // Remove the old links
        Array.prototype.forEach.call(oldThemeComponents, (themeComponent: HTMLLinkElement) => {
          if (themeComponent.parentElement) {
            themeComponent.parentElement.removeChild(themeComponent);
          }
        });
      });
    }
  }