esa api 403 error

src/client/js/components/Admin/Importer.jsx

@@ -2,142 +2,56 @@ import React, { Fragment } from 'react';
 import axios from 'axios';
 import ReactDOM from 'react-dom';
 
-
-const GEOCODE_ENDPOINT = 'https://maps.googleapis.com/maps/api/geocode/json';
-
 class Importer extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      place: '通天閣', // ここに好きな場所を指定。
-
+      esaTeamName: '',
+      esaAccessToken: '',
+      qiitaTeamName: '',
+      qiitaAccessToken: '',
     };
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleInputValue = this.handleInputValue.bind(this);
   }
 
-  handleGetLatAndLng() {
-    // Google Maps APIが指定した必須パラメータ(この場合はaddress)をparamsに渡す。
-    axios
-      .POST("/_api/admin/settings/importerEsa", { params: { address: this.state.place } })
-      .then((results) => {
-        // 以下のGoogle API のレスポンスの例を元に欲しいデータを取得
-        const data = results.data;
-        const result = data.results[0];
-        const location = result.geometry.location;
-        this.setState({
-          address: result.formatted_address,
-          lat: location.lat,
-          lng: location.lng,
-        });
+
+  handleInputValue(event) {
+    this.setState({
+      [event.target.name]: event.target.value,
+    });
+  }
+
+  handleSubmit() {
+    axios({
+      method: 'POST',
+      url: '/_api/admin/settings/importerEsa',
+      data: { esaTeamName: this.state.esaTeamName, esaAccessToken: this.state.esaAccessToken },
+    })
+      .then((response) => {
+        console.log(this.props);
+        this.props.history.push('/');
       })
-      .catch(() => {
-        console.log('通信に失敗しました。');
+      .catch((error) => {
+        console.error(error);
       });
   }
 
   render() {
+    const { esaTeamName, esaAccessToken } = this.state;
     return (
+      <Fragment>
+        <label>偉人 : </label>
+        <input type="text" name="esaTeamName" value={esaTeamName} onChange={this.handleInputValue} />
+        <label>名言 : </label>
+        <input type="text" name="esaAccessToken" value={esaAccessToken} onChange={this.handleInputValue} />
+        <input type="button" onClick={this.handleSubmit} value="Submit" />
+      </Fragment>
+
+    );
+  }
 
-      <div>
-        <div className="app">
-          <h1 className="app-title">緯度軽度検索</h1>
-          <p> 土地名: {this.state.place} </p>
-          <p> 経度: {this.state.lat}</p>
-          <p> 経度: {this.state.lng}</p>
-          <input
-            type="button"
-            value="経度・緯度を検索"
-            onClick={() => { return this.handleGetLatAndLng() }}
-          />
-        </div>
-
-        <div className="form-horizontal" method="post" className="form-horizontal" id="importerSettingFormEsa" role="form">
-          <fieldset>
-            <legend>
-              {/* {{ t('importer_management.import_from', 'esa.io') }} */}を表示する
-          </legend>
-            <table className="table table-bordered table-mapping">
-              <thead>
-                <tr>
-                  <th width="45%">esa.io</th>
-                  <th width="10%"></th>
-                  <th>GROWI</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <th>
-                    {/* {{ t('Article') }} */}
-                    を表示する
-                </th>
-                  <th><i className="icon-arrow-right-circle text-success"></i></th>
-                  <th>
-                    {/* {{ t('Page') }} */}
-                    を表示する
-                </th>
-                </tr>
-                <tr>
-                  <th>
-                    {/* {{ t('Category') }} */}
-                    を表示する
-                </th>
-                  <th>
-                    <i className="icon-arrow-right-circle text-success"></i>
-                  </th>
-                  <th>
-                    {/* {{ t('Page Path') }} */}
-                    を表示する
-                </th>
-                </tr>
-                <tr>
-                  <th>
-                    {/* {{ t('User') }} */}
-                    を表示する
-                </th>
-                  <th></th>
-                  <th>(TBD)</th>
-                </tr>
-              </tbody>
-            </table>
-            <div className="well well-sm mb-0 small">
-              <ul>
-                <li>
-                  {/* {{ t("importer_management.page_skip") }} */}
-                  を表示する
-              </li>
-              </ul>
-            </div>
-            <div className="form-group">
-              <input type="password" name="dummypass" style="display:none; top: -100px; left: -100px;" />
-            </div>
-
-            <div class="form-group">
-              <label for="settingForm[importer:esa:team_name]" class="col-xs-3 control-label">{{ t('importer_management.esa_settings.team_name') }}</label>
-              <div class="col-xs-6">
-                <input class="form-control" type="text" name="settingForm[importer:esa:team_name]" value="{{ settingForm['importer:esa:team_name'] | default('') }}">
-            </div>
-              </div>
-
-          </fieldset>
-        </div>
-
-        </div>
-        );
-      }
-
-    }
-
-    export default Importer;
+}
 
-{ /* <div>
-        <div className="app">
-          <h1 className="app-title">緯度軽度検索</h1>
-          <p> 土地名: {this.state.place} </p>
-          <p> 経度: {this.state.lat}</p>
-          <p> 経度: {this.state.lng}</p>
-          <input
-            type="button"
-            value="経度・緯度を検索"
-            onClick={() => { return this.handleGetLatAndLng() }}
-          />
-        </div> */ }
+export default Importer;