Webex SDK Component Adapter

Webex adapter to share SDK data with the components

Webex SDK Adapter is a library of adapters to provide live data from Webex JavaScript SDK to Webex Components.

Install
Usage
- Setup
  - Connect
  - Disconnect
- Components
  - React Component With Hooks
  - React Class Component
Contributing
License
Support
Team

Install

npm install --save @webex/components @webex/sdk-component-adapter

Usage

Setup

When using the Webex SDK Adapter, it is expected to have a fully authenticated SDK instance passed to it:

const webex = new Webex({
  credentials: `<YOUR WEBEX ACCESS_TOKEN>`,
});

const adapter = new WebexSDKAdapter(webex);

Connect

The Webex SDK requires different connections to be setup in order for it to be usable. Some examples of these connections include device registration and web socket connections.

These connections are handled by the SDK Adapter, but require the connect function to be manually called.

const webex = new Webex({
  credentials: `<YOUR WEBEX ACCESS_TOKEN>`,
});

const adapter = new WebexSDKAdapter(webex);

await adapter.connect();

// Adapter is now ready to make requests.

Disconnect

When the adapter is no longer going to be used, the disconnect function will do the necessary tear-down of all the connections created in the connect function:

await adapter.disconnect();

// Adapter is now disconnected.

Components

The Webex SDK Adapter is meant to be used with Webex Components.

For more information on how to use Webex Components, visit this page.

The following examples display how you can utilize the Webex SDK Adapter along with Webex Components to provide a fully connected component:

React Component With Hooks

Utilizing the useEffect hook, we can connect our adapter in a deferred event after initial render.

import '@webex/components/dist/webexComponents.css';

import React, {useEffect, useState} from 'react';
import Webex from 'webex';
import WebexSDKAdapter from '@webex/sdk-component-adapter';
import {WebexAvatar, WebexDataProvider} from '@webex/components';

const webex = new Webex({
  credentials: `<YOUR_ACCESS_TOKEN>`,
});
const adapter = new WebexSDKAdapter(webex);

function App() {
  const [adapterConnected, setAdapterConnected] = useState(false);

  useEffect(() => {
    // This is the suggested way to do async hooks.
    // Ref: https://github.com/facebook/react/issues/14326
    async function doConnect() {
      // Wait for the adapter to connect before rendering.
      await adapter.connect();
      setAdapterConnected(true);
    }

    doConnect();

    // On teardown, disconnect the adapter
    return () => {
      adapter.disconnect();
    }
  }, []);


  return (
    <div className="App">
      {
        adapterConnected && (
          <WebexDataProvider adapter={adapter} >
            <WebexAvatar personID="<AVATAR_ID>" />
          </WebexDataProvider>
        )
      }
    </div>
  );
}

export default App;

React Class Component

For traditional React class components, the adapter should connect once the component mounts.

import '@webex/components/dist/webexComponents.css';

import React, { Component } from 'react'
import Webex from 'webex';
import WebexSDKAdapter from '@webex/sdk-component-adapter';
import {WebexAvatar, WebexDataProvider} from '@webex/components';

const credentials = `<YOUR_ACCESS_TOKEN>`;

const webex = new Webex({
  credentials,
});

export default class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      adapterConnected: false
    };

    this.adapter = new WebexSDKAdapter(webex);
  }

  async componentDidMount() {
    await adapter.connect();
    // Once adapter connects, set our app state to ready.
    this.setState({adapterConnected: true});
  }

  async componentWillUnmount() {
    // On teardown, disconnect the adapter.
    await this.adapter.disconnect();
  }

  render() {
    return (
      <div className="App">
        {
          this.state.adapterConnected && (
            <WebexDataProvider adapter={this.adapter} >
              <WebexAvatar personID="<AVATAR_ID>" />
            </WebexDataProvider>
          )
        }
      </div>
    )
  }
}

Contributing

We'd love for you to contribute to our source code and to make Webex SDK Adapter even better than it is today! Here are some guidelines that we'd like you to follow.

Issues

Please open an issue and we will get to it in an orderly manner. Please leave as much as information as possible for a better understanding.

Contributing Code

We are using Webex Style Guide eslint rule and prettier to lint the code style. You can "prettify" your code before committing via:

npm run prettier:write

Release Process

There is a list of commit types provided here. However, not all commits trigger our release process. We are using semantic-release to fully automate the version management and package publishing. By default semantic-release uses the Angular Commit Message Conventions and triggers release and publishing based on the following rules:

Commit	Release type
Commit with type `BREAKING CHANGE`	Major release
Commit with type `feat`	Minor release
Commit with type `fix`	Patch release
Commit with type `perf`	Patch release