From 370e6caedc8456de20eaa17aaace0873bc7d204f Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sun, 26 Jun 2016 02:05:41 -0700 Subject: [web] (mostly) remove jQuery --- web/src/js/actions.js | 2 -- .../js/components/ContentView/ContentLoader.jsx | 6 ++++- web/src/js/components/Header/FilterDocs.jsx | 9 ++++--- web/src/js/flow/utils.js | 7 +---- web/src/js/utils.js | 30 ++++------------------ 5 files changed, 16 insertions(+), 38 deletions(-) (limited to 'web') diff --git a/web/src/js/actions.js b/web/src/js/actions.js index e00e3cad..51b180ce 100644 --- a/web/src/js/actions.js +++ b/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 diff --git a/web/src/js/components/ContentView/ContentLoader.jsx b/web/src/js/components/ContentView/ContentLoader.jsx index f346dc01..1a23325c 100644 --- a/web/src/js/components/ContentView/ContentLoader.jsx +++ b/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 }) diff --git a/web/src/js/components/Header/FilterDocs.jsx b/web/src/js/components/Header/FilterDocs.jsx index efb4818c..c237e230 100644 --- a/web/src/js/components/Header/FilterDocs.jsx +++ b/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 }) }) diff --git a/web/src/js/flow/utils.js b/web/src/js/flow/utils.js index d64e2d55..1f9f3d07 100644 --- a/web/src/js/flow/utils.js +++ b/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, { diff --git a/web/src/js/utils.js b/web/src/js/utils.js index 2e25016e..eceda195 100644 --- a/web/src/js/utils.js +++ b/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 -- cgit v1.2.3