Refactor /api/web APIs to use the centralized axios instance (#6223)

Also adds the ability to decouple the centralized axios logic from the
state dispatcher
This commit is contained in:
nightpool 2018-01-08 14:01:33 -05:00 committed by Eugen Rochko
parent ff6ca8bdc6
commit c235711ffe
5 changed files with 21 additions and 13 deletions

View File

@ -6,8 +6,8 @@ class Api::BaseController < ApplicationController
include RateLimitHeaders include RateLimitHeaders
skip_before_action :verify_authenticity_token
skip_before_action :store_current_location skip_before_action :store_current_location
protect_from_forgery with: :null_session
rescue_from ActiveRecord::RecordInvalid, Mastodon::ValidationError do |e| rescue_from ActiveRecord::RecordInvalid, Mastodon::ValidationError do |e|
render json: { error: e.to_s }, status: 422 render json: { error: e.to_s }, status: 422

View File

@ -1,4 +1,4 @@
import axios from 'axios'; import api from '../../api';
import { pushNotificationsSetting } from '../../settings'; import { pushNotificationsSetting } from '../../settings';
import { setBrowserSupport, setSubscription, clearSubscription } from './setter'; import { setBrowserSupport, setSubscription, clearSubscription } from './setter';
@ -35,7 +35,7 @@ const subscribe = (registration) =>
const unsubscribe = ({ registration, subscription }) => const unsubscribe = ({ registration, subscription }) =>
subscription ? subscription.unsubscribe().then(() => registration) : registration; subscription ? subscription.unsubscribe().then(() => registration) : registration;
const sendSubscriptionToBackend = (subscription, me) => { const sendSubscriptionToBackend = (getState, subscription, me) => {
const params = { subscription }; const params = { subscription };
if (me) { if (me) {
@ -45,7 +45,7 @@ const sendSubscriptionToBackend = (subscription, me) => {
} }
} }
return axios.post('/api/web/push_subscriptions', params).then(response => response.data); return api(getState).post('/api/web/push_subscriptions', params).then(response => response.data);
}; };
// Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload // Last one checks for payload support: https://web-push-book.gauntface.com/chapter-06/01-non-standards-browsers/#no-payload
@ -85,13 +85,13 @@ export function register () {
} else { } else {
// Something went wrong, try to subscribe again // Something went wrong, try to subscribe again
return unsubscribe({ registration, subscription }).then(subscribe).then( return unsubscribe({ registration, subscription }).then(subscribe).then(
subscription => sendSubscriptionToBackend(subscription, me)); subscription => sendSubscriptionToBackend(getState, subscription, me));
} }
} }
// No subscription, try to subscribe // No subscription, try to subscribe
return subscribe(registration).then( return subscribe(registration).then(
subscription => sendSubscriptionToBackend(subscription, me)); subscription => sendSubscriptionToBackend(getState, subscription, me));
}) })
.then(subscription => { .then(subscription => {
// If we got a PushSubscription (and not a subscription object from the backend) // If we got a PushSubscription (and not a subscription object from the backend)
@ -137,7 +137,7 @@ export function saveSettings() {
const alerts = state.get('alerts'); const alerts = state.get('alerts');
const data = { alerts }; const data = { alerts };
axios.put(`/api/web/push_subscriptions/${subscription.get('id')}`, { api(getState).put(`/api/web/push_subscriptions/${subscription.get('id')}`, {
data, data,
}).then(() => { }).then(() => {
const me = getState().getIn(['meta', 'me']); const me = getState().getIn(['meta', 'me']);

View File

@ -1,4 +1,4 @@
import axios from 'axios'; import api from '../api';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
export const SETTING_CHANGE = 'SETTING_CHANGE'; export const SETTING_CHANGE = 'SETTING_CHANGE';
@ -23,7 +23,7 @@ const debouncedSave = debounce((dispatch, getState) => {
const data = getState().get('settings').filter((_, path) => path !== 'saved').toJS(); const data = getState().get('settings').filter((_, path) => path !== 'saved').toJS();
axios.put('/api/web/settings', { data }).then(() => dispatch({ type: SETTING_SAVE })); api(getState).put('/api/web/settings', { data }).then(() => dispatch({ type: SETTING_SAVE }));
}, 5000, { trailing: true }); }, 5000, { trailing: true });
export function saveSettings() { export function saveSettings() {

View File

@ -1,4 +1,5 @@
import axios from 'axios'; import axios from 'axios';
import ready from './ready';
import LinkHeader from './link_header'; import LinkHeader from './link_header';
export const getLinks = response => { export const getLinks = response => {
@ -11,10 +12,17 @@ export const getLinks = response => {
return LinkHeader.parse(value); return LinkHeader.parse(value);
}; };
let csrfHeader = {};
function setCSRFHeader() {
const csrfToken = document.querySelector('meta[name=csrf-token]').content;
csrfHeader['X-CSRF-Token'] = csrfToken;
}
ready(setCSRFHeader);
export default getState => axios.create({ export default getState => axios.create({
headers: { headers: Object.assign(csrfHeader, getState ? {
'Authorization': `Bearer ${getState().getIn(['meta', 'access_token'], '')}`, 'Authorization': `Bearer ${getState().getIn(['meta', 'access_token'], '')}`,
}, } : {}),
transformResponse: [function (data) { transformResponse: [function (data) {
try { try {

View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage, injectIntl } from 'react-intl'; import { FormattedMessage, injectIntl } from 'react-intl';
import axios from 'axios'; import api from '../../../api';
@injectIntl @injectIntl
export default class EmbedModal extends ImmutablePureComponent { export default class EmbedModal extends ImmutablePureComponent {
@ -23,7 +23,7 @@ export default class EmbedModal extends ImmutablePureComponent {
this.setState({ loading: true }); this.setState({ loading: true });
axios.post('/api/web/embed', { url }).then(res => { api().post('/api/web/embed', { url }).then(res => {
this.setState({ loading: false, oembed: res.data }); this.setState({ loading: false, oembed: res.data });
const iframeDocument = this.iframe.contentWindow.document; const iframeDocument = this.iframe.contentWindow.document;