Merge pull request shakacode#78 from shakacode/revert-73-fetch-for-async-calls

Revert "Use fetch instead of $.ajax"

Author: justin808

client/.jscsrc

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

client/assets/javascripts/actions/CommentActionCreators.js

@@ -43,9 +43,10 @@ export function submitCommentFailure(error) {
 
 export function fetchComments() {
   return dispatch => {
-    return CommentsManager.fetchComments()
-      .then(comments => dispatch(fetchCommentsSuccess(comments)))
-      .catch(error => dispatch(fetchCommentsFailure(error)));
+    return CommentsManager.fetchComments().then(
+      comments => dispatch(fetchCommentsSuccess(comments)),
+      error => dispatch(fetchCommentsFailure(error))
+    );
   };
 }
 
@@ -57,8 +58,9 @@ export function submitComment(comment) {
   return dispatch => {
     dispatch(incrementAjaxCounter());
     return CommentsManager.submitComment(comment)
-      .then(commentFromServer => dispatch(submitCommentSuccess(commentFromServer)))
-      .catch(error => dispatch(submitCommentFailure(error)))
+      .then(
+        _comment => dispatch(submitCommentSuccess(_comment)),
+        error => dispatch(submitCommentFailure(error)))
       .then(() => dispatchDecrementAjaxCounter(dispatch));
   };
 }

client/assets/javascripts/utils/CommentsManager.js

@@ -1,48 +1,34 @@
-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;
-}
+import $ from 'jquery';
 
-function parseJSON(response) {
-  return response.json();
-}
+const API_URL = 'comments.json';
 
 const CommentsManager = {
 
   /**
    * Retrieve comments from server using AJAX call.
    *
-   * @returns {Promise} - response of fetch request.
+   * @returns {Promise} - jqXHR result of ajax call.
    */
   fetchComments() {
-    return fetch(API_URL).then(checkStatus).then(parseJSON);
+    return Promise.resolve($.ajax({
+      url: API_URL,
+      dataType: 'json',
+    }));
   },
 
   /**
    * Submit new comment to server using AJAX call.
    *
    * @param {Object} comment - Comment body to post.
-   * @returns {Promise} - response of fetch request.
+   * @returns {Promise} - jqXHR result of ajax call.
    */
-
   submitComment(comment) {
-    return fetch(API_URL, {
-      method: 'post',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({comment}),
-    }).then(checkStatus).then(parseJSON);
+    return Promise.resolve($.ajax({
+      url: API_URL,
+      dataType: 'json',
+      type: 'POST',
+      data: {comment: comment},
+    }));
   },
 };
 

client/package.json

@@ -40,8 +40,7 @@
     "redux-promise": "^0.5.0",
     "redux-thunk": "^0.1.0",
     "sleep": "^3.0.0",
-    "webpack": "^1.10.5",
-    "whatwg-fetch": "^0.9.0"
+    "webpack": "^1.10.5"
   },
   "devDependencies": {
     "babel-eslint": "^4.0.5",

client/webpack.common.config.js

@@ -6,7 +6,7 @@ module.exports = {
 
   // the project dir
   context: __dirname,
-  entry: ['whatwg-fetch', './assets/javascripts/App'],
+  entry: ['./assets/javascripts/App'],
 
   // In case you wanted to load jQuery from the CDN, this is how you would do it:
   // externals: {