How to use the babel/actions/AppActions.hideComponent function in babel

checkOverlayComponentVisibility() {
    const featuresInExtent = lang.getObject('appState.app.map.featuresInExtent',false,this);
    const selectedFeatureId = lang.getObject('appState.app.map.selectedFeatureId',false,this);
    const contributing = lang.getObject('appState.app.contributing.active',false,this);

    if (!contributing && selectedFeatureId && featuresInExtent.length > 0 && this.visibleComponents.indexOf(componentNames.SELECTED_SHARES) < 0) {
      AppActions.changeComponentsVisibility({show: componentNames.SELECTED_SHARES, hide: componentNames.INTRO});
    } else if (!selectedFeatureId && this.visibleComponents.indexOf(componentNames.SELECTED_SHARES) >= 0) {
      AppActions.hideComponent(componentNames.SELECTED_SHARES);
    }

    if (contributing && this.visibleComponents.indexOf(componentNames.CONTRIBUTE) < 0) {
      AppActions.changeComponentsVisibility({show: [componentNames.CONTRIBUTE,componentNames.MAP], hide: [componentNames.INTRO, componentNames.SELECTED_SHARES]});
    } else if (!contributing && this.visibleComponents.indexOf(componentNames.CONTRIBUTE) >= 0) {
      AppActions.hideComponent(componentNames.CONTRIBUTE);
    }
  }

updateAppState() {
    this.appState = AppStore.getState();

    const currentLayout = lang.getObject('appState.items.app.data.values.settings.layout.id',false,this);

    if (!this.checkedAdminPanel && !lang.getObject('appState.mode.isMobile',false,this) && !lang.getObject('appState.mode.isBuilder',false,this) && lang.getObject('appState.user.editor',false,this)) {
      this.checkedAdminPanel = true;
      AppActions.showComponent(componentNames.ADMIN_BANNER);
    }
    if (lang.getObject('appState.mode.isMobile',false,this) && lang.getObject('appState.app.layout.visibleComponents',false,this).indexOf(componentNames.ADMIN_BANNER) >= 0) {
      this.checkedAdminPanel = false;
      AppActions.hideComponent(componentNames.ADMIN_BANNER);
    }

    if (!this.resizedViewer && lang.getObject('appState.app.loading.data',false,this)) {
      this.resizeViewer();
    }

    if (this.resizeViewer) {
      this.resizeViewer();
    }

    if (!this.resizedViewer && lang.getObject('appState.app.loading.map',false,this)) {
      this.resizedViewer = true;
      this.resizeViewer();
    }

    if (lang.getObject('appState.app.layout.visibleComponents',false,this) && lang.getObject('appState.app.layout.visibleComponents',false,this).indexOf('admin-banner') < 0 && this.adminShown === true) {

adds.forEach((component) => {

        switch (component) {
          case componentNames.INTRO:
            this.showIntro(options);
            MapActions.selectFeature(false);
            AppActions.hideComponent([componentNames.MAP,componentNames.GALLERY,componentNames.SELECTED_SHARES]);
            break;
          case componentNames.MAP:
            this.showMap(options);
            AppActions.hideComponent([componentNames.INTRO,componentNames.GALLERY]);
            break;
          case componentNames.GALLERY:
            if (this.visibleComponents.indexOf(componentNames.CONTRIBUTE) < 0) {
              this.showGallery(options);
              AppActions.hideComponent([componentNames.INTRO,componentNames.MAP]);
            } else {
              AppActions.hideComponent(componentNames.GALLERY);
            }
            break;
        }

      });