前回は、TransferTransactionを取得し、一覧表示までやりました。
今回は、検索文字列の入力と、該当Transactionのみの表示、選択するとトランザクション情報が出力されるようにします。
概要
1．検索文字をTextFieldで取得する
その2の内容の使いまわし
2．レンダリングでTransferTransaction[ ]から検索文字を含んでいるTransferTransactionを抽出する
特に目新しい要素なし
3．Tableから行選択するとTransaction情報をConsoleに出力する
Tableでの行選択のイベント処理
1．検索文字をTextFieldで取得する
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を追加します。
前回もやった通りの処理追加です。
interface IState {
address: string;
serchStr: string;
updatedTransferTxs: boolean;
}
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);
}
handleChange_serchStr = (event :React.FormEvent<HTMLInputElement>) => {
this.setState({
serchStr:event.currentTarget.value,
});
}
2．TransferTransaction[ ]から検索文字を含んでいる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で行います。
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を参照すると、onRowSelectionがそれっぽいですね。
render() {
this.updateIncomingTx();
return (
省略
<Table onRowSelection={indexes => {this.handleOnRowSelection(indexes)}}>
省略
constructor(props) {
省略
this.handleOnRowSelection = this.handleOnRowSelection.bind(this);
}
onRowSelectionの引数は (indexes:number[] | "all")となっています。
indexesは選択された行番号です。
TableのmultiSelectableプロパティ(デフォルトfalse)をtrueにしたときには、配列やallが生きてきます。
今回はデフォルト状態ですのでUI上は1つしか選べませんが、一応対応しておきます。
ちなみにunion型ですので、使うときには型で処理をわけます。(個人的にあまり好きじゃない)
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)
フロントエンド初心者がNEM Library使ってメッセージから文字列検索できるようにしてみた(その1)
変更履歴
2018/05/28 メッセージ抽出のフィルター処理を修正
2018/05/26 新規作成