[web] (mostly) remove jQuery

web/src/js/actions.js

@@ -1,6 +1,4 @@
-import $ from "jquery";
 import {AppDispatcher} from "./dispatcher.js";
-import {fetchApi} from "./utils.js";
 
 export var ActionTypes = {
     // Connection

web/src/js/components/ContentView/ContentLoader.jsx

@@ -1,5 +1,8 @@
 import React, { Component, PropTypes } from 'react'
 import { MessageUtils } from '../../flow/utils.js'
+// This is the only place where we use jQuery.
+// Remove when possible.
+import $ from "jquery"
 
 export default class ContentLoader extends Component {
 
@@ -18,7 +21,8 @@ export default class ContentLoader extends Component {
             this.state.request.abort()
         }
 
-        const request = MessageUtils.getContent(nextProps.flow, nextProps.message)
+        const requestUrl = MessageUtils.getContentURL(nextProps.flow, nextProps.message)
+        const request = $.get(requestUrl)
 
         this.setState({ content: null, request })
 

web/src/js/components/Header/FilterDocs.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
-import $ from 'jquery'
+import { fetchApi } from "../../utils";
+
 
 export default class FilterDocs extends Component {
 
@@ -15,13 +16,13 @@ export default class FilterDocs extends Component {
 
     componentWillMount() {
         if (!FilterDocs.xhr) {
-            FilterDocs.xhr = $.getJSON('/filter-help')
-            FilterDocs.xhr.fail(() => {
+            FilterDocs.xhr = fetchApi('/filter-help').then(response => response.json())
+            FilterDocs.xhr.catch(() => {
                 FilterDocs.xhr = null
             })
         }
         if (!this.state.doc) {
-            FilterDocs.xhr.done(doc => {
+            FilterDocs.xhr.then(doc => {
                 FilterDocs.doc = doc
                 this.setState({ doc })
             })

web/src/js/flow/utils.js

@@ -1,5 +1,4 @@
-import _ from "lodash";
-import $ from "jquery";
+import _ from "lodash"
 
 var defaultPorts = {
     "http": 80,
@@ -52,10 +51,6 @@ export var MessageUtils = {
         }
         return "/flows/" + flow.id + "/" + message + "/content";
     },
-    getContent: function (flow, message) {
-        var url = MessageUtils.getContentURL(flow, message);
-        return $.get(url);
-    }
 };
 
 export var RequestUtils = _.extend(MessageUtils, {

web/src/js/utils.js

@@ -1,8 +1,5 @@
-import $ from "jquery";
 import _ from "lodash";
-import actions from "./actions.js";
 
-window.$ = $;
 window._ = _;
 window.React = require("react");
 
@@ -82,32 +79,15 @@ function getCookie(name) {
 }
 const xsrf = `_xsrf=${getCookie("_xsrf")}`;
 
-//Tornado XSRF Protection.
-$.ajaxPrefilter(function (options) {
-    if (["post", "put", "delete"].indexOf(options.type.toLowerCase()) >= 0 && options.url[0] === "/") {
-        if(options.url.indexOf("?") === -1){
-            options.url += "?" + xsrf;
+export function fetchApi(url, options={}) {
+    if (options.method && options.method !== "GET") {
+        if (url.indexOf("?") === -1) {
+            url += "?" + xsrf;
         } else {
-            options.url += "&" + xsrf;
+            url += "&" + xsrf;
         }
     }
-});
-// Log AJAX Errors
-$(document).ajaxError(function (event, jqXHR, ajaxSettings, thrownError) {
-    if (thrownError === "abort") {
-        return;
-    }
-    var message = jqXHR.responseText;
-    console.error(thrownError, message, arguments);
-    alert(message);
-});
 
-export function fetchApi(url, options) {
-    if(url.indexOf("?") === -1){
-        url += "?" + xsrf;
-    } else {
-        url += "&" + xsrf;
-    }
     return fetch(url, {
         credentials: 'same-origin',
         ...options