フロントエンド初心者がNEM Library使ってメッセージから文字列検索できるようにしてみた(その3)

前回は、TransferTransactionを取得し、一覧表示までやりました。
今回は、検索文字列の入力と、該当Transactionのみの表示、選択するとトランザクション情報が出力されるようにします。

# 概要
1．検索文字をTextFieldで取得する
　　[その2](https://qiita.com/kihaku_dol/items/35198aa8f197932c03f2)の内容の使いまわし
2．レンダリングでTransferTransaction[ ]から検索文字を含んでいるTransferTransactionを抽出する
　　特に目新しい要素なし
3．Tableから行選択するとTransaction情報をConsoleに出力する
　　Tableでの行選択のイベント処理

## 1．検索文字をTextFieldで取得する
```tsx:render()のreturn()のJSXに追加
    render() {
        this.updateIncomingTx();
        return (
            省略
            <TextField
                 id="SerchString in Message"
                 value={this.state.serchStr}
                 floatingLabelText="SerchString"
                 onChange={this.handleChange_serchStr}
                 style={{
                     margin: '0 auto',
                 }} 
            />
            省略
```
stateにserchStrを追加、ハンドルとしてhandleChange_serchStrを追加します。
前回もやった通りの処理追加です。

```tsx:stateの定義への追加
interface IState {
    address: string;
    serchStr: string;
    updatedTransferTxs: boolean;
}
```

```tsx:コンストラクタへの追加
constructor(props) {
        super(props);
        this.state={
            address:"",
            serchStr:"",
            updatedTransferTxs:false,
        }
        
        this.handleChange_address = this.handleChange_address.bind(this);
        this.handleChange_serchStr = this.handleChange_serchStr.bind(this);
    }
```

```tsx:ハンドラの定義
    handleChange_serchStr = (event :React.FormEvent<HTMLInputElement>) => {
        this.setState({
            serchStr:event.currentTarget.value,
        });
    }
```

## 2．TransferTransaction[ ]から検索文字を含んでいるTransferTransactionを抽出する
取得した検索文字列をメッセージに含んでいるTransferTransactionを抽出しますが、
検索文字列の入力がない状態(空文字)の時は、全表示させることにします。

```tsx:TransferTransaction[]から検索文字を含んでいるTransferTransactionを抽出する
    private filterTransferTxsBySerchStr():TransferTransaction[] {
        if(this.state.serchStr === ""){
            return this.transferTxs;
        }

        return this.transferTxs.filter(x => (x.message as PlainMessage).plain().search(this.state.serchStr) != -1)
    }
```

これをrender( )でのJSXで行います。

```tsx:renderする
    render() {
        this.updateIncomingTx();
        return (
            省略
            <TableBody >
                {this.filterTransferTxsBySerchStr().map(
                    (row, index) => (
                        <TableRow key={index}>
                             <TableRowColumn>{row.timeWindow.timeStamp.toString()}</TableRowColumn>
                             <TableRowColumn>{(row.message as PlainMessage).plain()}</TableRowColumn>
                        </TableRow>
                    ))
                }
            </TableBody>  
```
rowにはthis.filterTransferTxsBySerchStr( ) の戻り値のTransferTransaction[ ]が入ります。

## 3．Tableから行選択するとTransaction情報をConsoleに出力する
[Material-uiのTable](https://v0.material-ui.com/#/components/table)を参照すると、onRowSelectionがそれっぽいですね。

```tsx:onRowSelectionにハンドルを設定する
    render() {
        this.updateIncomingTx();
        return (
            省略
                <Table onRowSelection={indexes => {this.handleOnRowSelection(indexes)}}>
                省略
```

```tsx:コンストラクタでハンドルにthisをバインドする
    constructor(props) {
        省略
        this.handleOnRowSelection = this.handleOnRowSelection.bind(this);
    }
```

onRowSelectionの引数は `(indexes:number[] | "all")`となっています。
indexesは選択された行番号です。
TableのmultiSelectableプロパティ(デフォルトfalse)をtrueにしたときには、配列やallが生きてきます。
今回はデフォルト状態ですのでUI上は1つしか選べませんが、一応対応しておきます。
ちなみにunion型ですので、使うときには型で処理をわけます。(個人的にあまり好きじゃない)

```tsx:ハンドル内でconsole出力
    handleOnRowSelection = (indexes:number[] | string) =>{
        if('string' != typeof indexes){
            for(let i = 0; i < indexes.length; i++){
                console.log(this.transferTxs[indexes[i]]);
            }
        }else{
            console.log(this.transferTxs);
        }
    }
```

これでメッセージから文字列検索できるようになりました。
ここでは平文のみを対象としましたが、暗号化文を表示する場合には、おそらくAccount.decryptMessageで復号するのだと思います。
当然、privateKeyが必要になるでしょうね。
AccountのメンバにprivateKeyがありますので。

---
やっと簡単回でした。
これくらいの初心者になれば、記法でわからないことはネットであさりつつでも、実装できる感じですね。
ライブラリ等を全く使いこなせてはいませんが、とりあえずはなんとかなってます。
・union側は型毎で処理を変える

次はマルチシグアカウントの作成とその譲渡あたりをやってみようかと思います。
あとは流行りのPWAを使ってみたいですねぇ。

[フロントエンド初心者がNEM Library使ってメッセージから文字列検索できるようにしてみた(その2)](https://qiita.com/kihaku_dol/items/35198aa8f197932c03f2)
[フロントエンド初心者がNEM Library使ってメッセージから文字列検索できるようにしてみた(その1)](https://qiita.com/kihaku_dol/items/9da5057267c8ed4dec71)

---
**変更履歴**
2018/05/28 メッセージ抽出のフィルター処理を修正
2018/05/26 新規作成