public componentWillMount()

in packages/extensions/luis/client/src/App.tsx [137:223]
76 lines of code
8 McCabe index (conditional complexity)

  public componentWillMount() {
    // Attach a handler to listen on inspect events
    if (!$host) {
      return;
    }
    $host.on('inspect', async (obj: any) => {
      const appState = new AppStateAdapter(obj);
      appState.persistentState = this.loadAppPersistentState();
      appState.authoringKey = App.getLuisAuthoringKey($host.bot, appState.traceInfo.luisModel.ModelID);
      this.setState(appState);
      await this.populateLuisInfo();
      $host.setInspectorTitle(this.state.appInfo.isDispatchApp ? 'Dispatch' : 'LUIS');
      $host.setAccessoryState(TrainAccessoryId, AccessoryDefaultState);
      $host.setAccessoryState(PublishAccessoryId, AccessoryDefaultState);
      $host.enableAccessory(
        TrainAccessoryId,
        this.state.persistentState[this.state.id] && this.state.persistentState[this.state.id].pendingTrain
      );
      $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({
        authoringKey: App.getLuisAuthoringKey(bot, this.state.appInfo.appId),
      });
    });

    $host.on('theme', async (themeInfo: { themeName: string; themeComponents: string[] }) => {
      const { themeName = '' } = themeInfo;
      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);
      });
      // Create the link for luis-specific themed styles
      const luisStyleLink = document.createElement<'link'>('link');
      promises.push(
        new Promise(resolve => {
          luisStyleLink.addEventListener('load', resolve);
        })
      );
      luisStyleLink.href = `./themes/${themeName.toLowerCase()}-luis.css`;
      luisStyleLink.rel = 'stylesheet';
      luisStyleLink.setAttribute('data-theme-component', 'true');
      fragment.appendChild(luisStyleLink);
      // insert links into document
      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);
        }
      });
    });
  }