From 07f4f35736320a6bb2a7a832ba8119cb10f140e6 Mon Sep 17 00:00:00 2001
From: ma3tk <masataka0227@gmail.com>
Date: Wed, 27 Jul 2016 16:45:10 +0900
Subject: [PATCH] Added ajax function

---
 app/controllers/test_controller.rb               |  6 ++++++
 config/routes.rb                                 |  2 ++
 frontend/src/javascripts/actions/Article.js      | 16 ++++++++++++++++
 .../src/javascripts/components/article/index.js  |  8 ++++++++
 4 files changed, 32 insertions(+)

diff --git a/app/controllers/test_controller.rb b/app/controllers/test_controller.rb
index cd92987..a7d4fde 100644
--- a/app/controllers/test_controller.rb
+++ b/app/controllers/test_controller.rb
@@ -1,4 +1,10 @@
 class TestController < ApplicationController
   def index
   end
+
+  def ajax
+    render json: {
+        title: 'Bun Bun Hello YouTube!',
+    }
+  end
 end
diff --git a/config/routes.rb b/config/routes.rb
index 939a7cb..76133fc 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -2,6 +2,8 @@
   root 'test#index'
   resources :test
 
+  get 'ajax' => 'test#ajax'
+
   # React のルーティングを使いたいので記載
   get '*path', to: 'test#index'
 
diff --git a/frontend/src/javascripts/actions/Article.js b/frontend/src/javascripts/actions/Article.js
index d050e3a..5b5d705 100644
--- a/frontend/src/javascripts/actions/Article.js
+++ b/frontend/src/javascripts/actions/Article.js
@@ -7,3 +7,19 @@ export function updateArticleInfo(updateText) {
     }
 }
 
+export function fetchArticleInfo() {
+    return function (dispatch) {
+        return fetch('/ajax', {
+            credentials: 'include',
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+            }
+        })
+            .then(response => response.json())
+            .then(json => {
+                dispatch(updateArticleInfo(json.title));
+            });
+    }
+}
+
diff --git a/frontend/src/javascripts/components/article/index.js b/frontend/src/javascripts/components/article/index.js
index e4db8d2..0e6ee3e 100644
--- a/frontend/src/javascripts/components/article/index.js
+++ b/frontend/src/javascripts/components/article/index.js
@@ -15,6 +15,9 @@ class Article extends Component {
                     <input type="text" ref="update_text" name="update_box" />
                     <button onClick={(e) => this.updateArticleInfo(e)}>Update Info</button>
                 </div>
+                <div>
+                    <button onClick={(e) => this.fetchArticleInfo(e)}>Update Info With Ajax</button>
+                </div>
                 {this.props.children}
             </div>
         );
@@ -25,6 +28,11 @@ class Article extends Component {
         const updateText = this.refs.update_text.value;
         dispatch(ArticleActions.updateArticleInfo(updateText));
     }
+
+    fetchArticleInfo(e) {
+        const { dispatch } = this.props;
+        dispatch(ArticleActions.fetchArticleInfo());
+    }
 }
 
 function mapStateToProps(state) {