Amazon-connect-streams を React FC / TypeScript で書く

## はじめに

タイトルのことを、最近の React / Function Conponents / TypeScript で書こうとして苦労したので備忘録



## 開発環境

1. Visual Studio Code
2. React 16.13
3. Create-React-App
4. AmazonConnect Streams

参照：https://github.com/amazon-connect/amazon-connect-streams

## 手順

まずは create-react-app でプロジェクトを作成
--typescript でオプションを指定

```
> create-react-app acs-samp --typescript
```

VS Code で作成したプロジェクトを開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141148/cf05da71-339a-bb4d-6ddc-16bc524ac893.png)

ターミナルから amazon-connect-stream を追加する。

```
> npm install amazon-connect-streams --save
```

App.tsx のソースに import 追加し、CCP を表示するdivコンポーネントを書く。
ref={El} としているところがみそ。（あとでuseRef でとってくる。）

```javascript:App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';
import 'amazon-connect-streams';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <main>
        <div className="ccp">
          {/* ccp */}
          <div style={style} ref={El} />
        </div>
        <div className="content" />
      </main>
    </div>
  );
}

export default App;
```

最後に初期化のコードを追加完成。

```javascript
import React, {useRef,useEffect} from 'react';
declare var connect: any;
```

ccpUrl はアマゾンコネクトで取得・作成したＵＲＬを指定。

```javascript

  const El = useRef<HTMLDivElement>(null);
  useEffect( ()=>{
    connect.core.initCCP(El.current, {
      ccpUrl: 'https://xxx.awsapps.com/connect/ccp-v2/',
      loginPopup: true,               // optional, defaults to `true`
      region: "ap-northeast-1",         // REQUIRED for `CHAT`, optional otherwise
      softphone: {                    // optional
        allowFramedSoftphone: true,   // optional
        disableRingtone: false,       // optional    });
      }
    });
  },);

```

合わせてスタイルも指定する。

```javascript
const style = {
  minWidth: 64,       // 数値は"64px"のように、pxとして扱われます
  lineHeight: "32px",
  borderRadius: 4,
  border: "none",
  padding: "0 16px",
  height: "500px",
  color: "#fff"
};
```

npm start で実行してみる。
ログイン後の画面。
ログイン画面はセキュリティの関係上、埋め込むことはできないので、ポップアップで表示しログイン後に
埋め込まれた形となる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141148/95129646-5c38-38d4-ebb4-af6025a51679.png)

スタイルは不格好ですが、React のサンプル下に入れてみました。

## 解説
完成したコード

```javascript:App.tsx

import React, {useRef,useEffect} from 'react';
import logo from './logo.svg';
import './App.css';
import 'amazon-connect-streams';

const style = {
  minWidth: 64,       // 数値は"64px"のように、pxとして扱われます
  lineHeight: "32px",
  borderRadius: 4,
  border: "none",
  padding: "0 16px",
  height: "500px",
  color: "#fff"
};
declare var connect: any;

function App() {
  const El = useRef<HTMLDivElement>(null);
  useEffect( ()=>{
    connect.core.initCCP(El.current, {
      ccpUrl: 'https://xxxx.awsapps.com/connect/ccp-v2/',
      loginPopup: true,               // optional, defaults to `true`
      region: "ap-northeast-1",         // REQUIRED for `CHAT`, optional otherwise
      softphone: {                    // optional
        allowFramedSoftphone: true,   // optional
        disableRingtone: false,       // optional    });
      }
    });
  },);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <main>
        <div className="ccp">
          {/* ccp */}
          <div style={style} ref={El} />
        </div>
        <div className="content" />
      </main>
    </div>
  );
}

export default App;
```

### ポイント１
div の参照は useRef を使う。
``` const El = useRef<HTMLDivElement>(null); ```

コンポーネントには下記 ref 属性をセット
```<div style={style} ref={El} />```

### ポイント２
connectの初期化にuseEffect を使って、初期化コードを書いている。


```javascript
  useEffect( ()=>{
    connect.core.initCCP(El.current, {
      ccpUrl: 'https://sangyo2nci.awsapps.com/connect/ccp-v2/',
      loginPopup: true,               // optional, defaults to `true`
      region: "ap-northeast-1",         // REQUIRED for `CHAT`, optional otherwise
      softphone: {                    // optional
        allowFramedSoftphone: true,   // optional
        disableRingtone: false,       // optional    });
      }
    });
  },);
```



## 最後に
自分のための備忘録です。

次はもう少しイベント処理を書いていきたいと思います。