2

I am using Twilio Flex plugin to customize flex ui version 2 (beta.1) in react js. I want to add one custom link in a sidebar with a new custom component.

I tried to write code to switch the icon to Active when the created sidebar icon is selected, but I get the following error.

Original error: "activeView is not defined"

The code is as follows.

import React from 'react';
import { FlexPlugin } from '@twilio/flex-plugin';
import TaskView from './components/TaskView/TaskView';
import { SideLink, Actions } from '@twilio/flex-ui';

const PLUGIN_NAME = 'TaskViewPlugin';

export default class TaskViewPlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  /**
   * This code is run when your plugin is being started
   * Use this to modify any UI components or attach to the actions framework
   *
   * @param flex { typeof import('@twilio/flex-ui') }
   */
  async init(flex, manager) {
    flex.ViewCollection.Content.add(
      <flex.View name='taskView' key='TaskViewPlugin-component'>
        <TaskView key='TaskViewPlugin-component' />
      </flex.View>,
    );

    flex.SideNav.Content.add(
      <SideLink
        key='taskViewSideLink'
        icon='Supervisor'
        iconActive='SupervisorBold'
        isActive={activeView === 'taskView'}
        onClick={() =>
          Actions.invokeAction('NavigateToView', { viewName: 'TaskView' })
        }
      >
        Pending Tasks
      </SideLink>,
      { sortOrder: 2 },
    );
  }
}

Thanks in advance for a help.

Katsumi Takahashi
  • 23
  • 3
  • This answer suggests doing the same thing: https://stackoverflow.com/a/55103617/2193968 and it links to a video. Not sure if it will help. – Jerry Jeremiah Sep 06 '22 at 01:00
  • @JerryJeremiah Thank you for pointing this out. I had already checked this article. I would like to get the name of the currently displayed view with isActive, as mentioned in the answer to this article. I checked SideLink.definitions.d.ts in @twilio/flex-ui (2.0.0-beta.1) and it seems that activeView is defined. – Katsumi Takahashi Sep 06 '22 at 02:18

1 Answers1

2

The issue here is that activeView hasn't been defined anywhere. From what I gathered from the video that Jerry linked to, activeView is a property passed into components within Flex. However, you are trying to use it directly in the FlexPlugin object.

Instead, you should create a custom component that returns the new SideLink component, like this:

import React from 'react';
import { SideLink, Actions } from '@twilio/flex-ui';

const TaskViewSidebarButton = ({ activeView } => {
  return <SideLink
           key='taskViewSideLink'
           icon='Supervisor'
           iconActive='SupervisorBold'
           isActive={activeView === 'taskView'}
           onClick={() =>
             Actions.invokeAction('NavigateToView', { viewName: 'TaskView' })
           }
         >
           Pending Tasks
         </SideLink>;
});

export default TaskViewSidebarButton;

Then in your plugin you can import this TaskViewSidebarButton component and use it in the SideNav.Content:

import React from 'react';
import { FlexPlugin } from '@twilio/flex-plugin';
import TaskView from './components/TaskView/TaskView';
import TaskViewSidebarButton from './components/TaskView/TaskViewSidebarButton';

const PLUGIN_NAME = 'TaskViewPlugin';

export default class TaskViewPlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  /**
   * This code is run when your plugin is being started
   * Use this to modify any UI components or attach to the actions framework
   *
   * @param flex { typeof import('@twilio/flex-ui') }
   */
  async init(flex, manager) {
    flex.ViewCollection.Content.add(
      <flex.View name='TaskView' key='TaskViewPlugin-component'>
        <TaskView key='TaskViewPlugin-component' />
      </flex.View>,
    );

    flex.SideNav.Content.add(
      <TaskViewSidebarButton key="task-view-sidebar-button" />,
      { sortOrder: 2 },
    );
  }
}

That way the correct props are passed to your TaskViewSidebarButton and you can extract activeView from the props and use it to render the active state of the button.

philnash
  • 70,667
  • 10
  • 60
  • 88