Use fetch instead of $.ajax

client/.jscsrc

@@ -1,5 +1,6 @@
 {
   "preset": "airbnb",
   "fileExtensions": [".js", ".jsx"],
-  "excludeFiles": ["build/**", "node_modules/**"]
+  "excludeFiles": ["build/**", "node_modules/**"],
+  "disallowQuotedKeysInObjects": false
 }

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));
   };
 }

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);
   },
 };
 

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",

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: {