From 3b7a5c7f678db56e8f02355db08140b9b0ae80de Mon Sep 17 00:00:00 2001
From: Mario Perez <mapreal19@gmail.com>
Date: Wed, 2 Sep 2015 12:57:51 +0200
Subject: [PATCH] Use fetch instead of $.ajax. Resolves #69

---
 client/.jscsrc                                |  3 +-
 .../actions/CommentActionCreators.js          | 12 +++---
 .../javascripts/utils/CommentsManager.js      | 42 ++++++++++++-------
 client/package.json                           |  3 +-
 client/webpack.common.config.js               |  2 +-
 5 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/client/.jscsrc b/client/.jscsrc
index 0be7eea16..bb03b57cf 100644
--- a/client/.jscsrc
+++ b/client/.jscsrc
@@ -1,5 +1,6 @@
 {
   "preset": "airbnb",
   "fileExtensions": [".js", ".jsx"],
-  "excludeFiles": ["build/**", "node_modules/**"]
+  "excludeFiles": ["build/**", "node_modules/**"],
+  "disallowQuotedKeysInObjects": false
 }
diff --git a/client/assets/javascripts/actions/CommentActionCreators.js b/client/assets/javascripts/actions/CommentActionCreators.js
index 4b4c38e15..9b9b7108a 100644
--- a/client/assets/javascripts/actions/CommentActionCreators.js
+++ b/client/assets/javascripts/actions/CommentActionCreators.js
@@ -43,10 +43,9 @@ export function submitCommentFailure(error) {
 
 export function fetchComments() {
   return dispatch => {
-    return CommentsManager.fetchComments().then(
-      comments => dispatch(fetchCommentsSuccess(comments)),
-      error => dispatch(fetchCommentsFailure(error))
-    );
+    return CommentsManager.fetchComments()
+      .then(comments => dispatch(fetchCommentsSuccess(comments)))
+      .catch(error => dispatch(fetchCommentsFailure(error)));
   };
 }
 
@@ -58,9 +57,8 @@ export function submitComment(comment) {
   return dispatch => {
     dispatch(incrementAjaxCounter());
     return CommentsManager.submitComment(comment)
-      .then(
-        _comment => dispatch(submitCommentSuccess(_comment)),
-        error => dispatch(submitCommentFailure(error)))
+      .then(commentFromServer => dispatch(submitCommentSuccess(commentFromServer)))
+      .catch(error => dispatch(submitCommentFailure(error)))
       .then(() => dispatchDecrementAjaxCounter(dispatch));
   };
 }
diff --git a/client/assets/javascripts/utils/CommentsManager.js b/client/assets/javascripts/utils/CommentsManager.js
index 4348018cb..c8500c638 100644
--- a/client/assets/javascripts/utils/CommentsManager.js
+++ b/client/assets/javascripts/utils/CommentsManager.js
@@ -1,34 +1,48 @@
-import $ from 'jquery';
-
 const API_URL = 'comments.json';
 
+// fetch won't reject on HTTP error status
+// https://github.com/github/fetch#handling-http-error-statuses
+function checkStatus(response) {
+  if (response.status >= 200 && response.status < 300) {
+    return response;
+  }
+
+  const error = new Error(response.statusText);
+  error.response = response;
+  throw error;
+}
+
+function parseJSON(response) {
+  return response.json();
+}
+
 const CommentsManager = {
 
   /**
    * Retrieve comments from server using AJAX call.
    *
-   * @returns {Promise} - jqXHR result of ajax call.
+   * @returns {Promise} - response of fetch request.
    */
   fetchComments() {
-    return Promise.resolve($.ajax({
-      url: API_URL,
-      dataType: 'json',
-    }));
+    return fetch(API_URL).then(checkStatus).then(parseJSON);
   },
 
   /**
    * Submit new comment to server using AJAX call.
    *
    * @param {Object} comment - Comment body to post.
-   * @returns {Promise} - jqXHR result of ajax call.
+   * @returns {Promise} - response of fetch request.
    */
+
   submitComment(comment) {
-    return Promise.resolve($.ajax({
-      url: API_URL,
-      dataType: 'json',
-      type: 'POST',
-      data: {comment: comment},
-    }));
+    return fetch(API_URL, {
+      method: 'post',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({comment}),
+    }).then(checkStatus).then(parseJSON);
   },
 };
 
diff --git a/client/package.json b/client/package.json
index 93e6bde9a..b7126cf7f 100644
--- a/client/package.json
+++ b/client/package.json
@@ -40,7 +40,8 @@
     "redux-promise": "^0.5.0",
     "redux-thunk": "^0.1.0",
     "sleep": "^3.0.0",
-    "webpack": "^1.10.5"
+    "webpack": "^1.10.5",
+    "whatwg-fetch": "^0.9.0"
   },
   "devDependencies": {
     "babel-eslint": "^4.0.5",
diff --git a/client/webpack.common.config.js b/client/webpack.common.config.js
index 50471f39c..91370cb6b 100644
--- a/client/webpack.common.config.js
+++ b/client/webpack.common.config.js
@@ -6,7 +6,7 @@ module.exports = {
 
   // the project dir
   context: __dirname,
-  entry: ['./assets/javascripts/App'],
+  entry: ['whatwg-fetch', './assets/javascripts/App'],
 
   // In case you wanted to load jQuery from the CDN, this is how you would do it:
   // externals: {