kintone + Backlog API 連携やってみた（その２）

kintone2 Advent Calendar 2019 9日目の記事です。

kintone Advent Calendar 2019 ２日目の記事 kintone + Backlog API 連携やってみたの続きです。
前回は途中になってしまったのですが、今回もkintoneに入力するまで行きませんでした。クリスマスまでには何とかしたい

コード

とりあえず出来たとこまでのコードを載せておきます

App.js

import * as React from 'react';
import { Text, Button } from '@kintone/kintone-ui-component';
import '../css/index.css';
import 'bulma/css/bulma.css'

export class App extends React.Component {
  constructor (props) {
    super(props)
    // 親コンポーネントstate
    this.state = {
      account: '',
      apikey: '',
    }
  }
  accountChange(value) {
    console.log(value)
    this.setState({account: value})
  }
  apikeyChange(value) {
    this.setState({apikey: value})
  }  
  clickSubmit(event) {
    console.log(`Account: ${this.state.account} APIKey: ${this.state.apikey}`)
    getBacklogMyActivities(this.state.account, this.state.apikey)
  }  

  render () {
    return (
        <div class="container">
          <div class="notification">
            <div class="field">
                <h1 class="title">
                    Backlog設定
                </h1>
                <div class="control">
                    <label class="label">Backlog URL</label>
                    <UITextBacklogAccount
                    onAccountChange={(value) => this.accountChange(value)}
                    />
                </div>
            </div>
            <div class="field">
                <div class="control">
                    <label class="label">Backlog API Key</label>
                    <UITextBacklogAPIKey
                    onApikeyChange={(value) => this.apikeyChange(value)}
                    />
                </div>
            </div>
            <div class="field">
                <div class="control">
                    <UIButton
                    onClickSubmit={(event) => this.clickSubmit(event)}
                    />
                </div>
            </div>
          </div>  
        </div>
      )
  }
}

// Backlog URL用コンポーネント
export class UITextBacklogAccount extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
        }
    }
    render() {
        return (
            <Text
              value={this.state.value} class="input is-success"
              onChange={this.onChange.bind(this)}
            />
        );
    };
    onChange = (value) => {
        this.setState({value});
        this.props.onAccountChange(value);
        // console.log('onchange value: ' + value);
    }
};

// Backlog APIKey用コンポーネント
export class UITextBacklogAPIKey extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
        }
    }
    render() {
        return (
            <Text
              value={this.state.value}
              onChange={this.onChange.bind(this)}
            />
        );
    };
    onChange = (value) => {
        this.setState({value});
        this.props.onApikeyChange(value);
        // console.log('onchange value: ' + value);
    }
};

// Submitボタンコンポーネント
export class UIButton extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <Button text='Submit' type='submit' isDisabled={false} isVisible={true} onClick={this.handleButtonClick} />
        );
    }
    handleButtonClick = (event) => {
        this.props.onClickSubmit(event)
    }
}

// Backlog API を叩く
const getBacklogMyActivities = (url, apikey) => {
      const BACKLOG_URL = url; // https://<My Backlog Account>.backlog.jp or backlog.com
      const APIKEY = apikey;
      kintone.proxy('https://' + BACKLOG_URL + '/api/v2/users/myself?apiKey=' + APIKEY, 'GET', {}, {})
      .then(function(resp)
      {
        const body = JSON.parse(resp[0]);
        kintone.proxy('https://' + BACKLOG_URL + '/api/v2/users/' + body.id + '/activities?apiKey=' + APIKEY, 'GET', {}, {})
        .then(function(resp)
        {
          console.log(resp[1], JSON.parse(resp[0]), resp[2]);
          const body = JSON.parse(resp[0]);
          console.log(body[0].project.id);
          body.map( value => {
            console.log(value.id);
          });
        });
    }).catch(function(error) {
      console.log(error);
    });
}

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as App from './js/App';
import * as Common from './js/common';

(() => {
  kintone.events.on('app.record.index.show', event => {
    if (Common.getViewId(event) !== Common.VIEW_ID) {
      return;
    }
    ReactDOM.render(
      <App.App />,
      document.getElementById('backlog')
    );
    return event;
  });
})();

設定画面

次にやること

設定画面からパラメーターを入力して、kintoneにレコードを登録するまでがんばりたいです

参考

• Bulma