From aef4b1af666f3fe66778bff0bab83b780fc71732 Mon Sep 17 00:00:00 2001 From: cwm Date: Tue, 9 Jan 2018 10:51:14 -0600 Subject: [PATCH] Refactor /api/web APIs to use the centralized axios instance (tootsuite pr #6223) --- .../glitch/actions/push_notifications/registerer.js | 12 ++++++------ app/javascript/flavours/glitch/actions/settings.js | 4 ++-- .../glitch/features/getting_started/index.js | 2 +- .../glitch/features/ui/components/embed_modal.js | 4 ++-- app/javascript/flavours/glitch/util/api.js | 12 ++++++++++-- 5 files changed, 21 insertions(+), 13 deletions(-) diff --git a/app/javascript/flavours/glitch/actions/push_notifications/registerer.js b/app/javascript/flavours/glitch/actions/push_notifications/registerer.js index 3003d41493..5ad11f73ff 100644 --- a/app/javascript/flavours/glitch/actions/push_notifications/registerer.js +++ b/app/javascript/flavours/glitch/actions/push_notifications/registerer.js @@ -1,4 +1,4 @@ -import axios from 'axios'; +import api from 'flavours/glitch/util/api'; import { pushNotificationsSetting } from 'flavours/glitch/util/settings'; import { setBrowserSupport, setSubscription, clearSubscription } from './setter'; @@ -35,7 +35,7 @@ const subscribe = (registration) => const unsubscribe = ({ registration, subscription }) => subscription ? subscription.unsubscribe().then(() => registration) : registration; -const sendSubscriptionToBackend = (subscription, me) => { +const sendSubscriptionToBackend = (getState, subscription, me) => { const params = { subscription }; 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 @@ -85,13 +85,13 @@ export function register () { } else { // Something went wrong, try to subscribe again return unsubscribe({ registration, subscription }).then(subscribe).then( - subscription => sendSubscriptionToBackend(subscription, me)); + subscription => sendSubscriptionToBackend(getState, subscription, me)); } } // No subscription, try to subscribe return subscribe(registration).then( - subscription => sendSubscriptionToBackend(subscription, me)); + subscription => sendSubscriptionToBackend(getState, subscription, me)); }) .then(subscription => { // 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 data = { alerts }; - axios.put(`/api/web/push_subscriptions/${subscription.get('id')}`, { + api(getState).put(`/api/web/push_subscriptions/${subscription.get('id')}`, { data, }).then(() => { const me = getState().getIn(['meta', 'me']); diff --git a/app/javascript/flavours/glitch/actions/settings.js b/app/javascript/flavours/glitch/actions/settings.js index aeef43527e..87b2ae76d9 100644 --- a/app/javascript/flavours/glitch/actions/settings.js +++ b/app/javascript/flavours/glitch/actions/settings.js @@ -1,4 +1,4 @@ -import axios from 'axios'; +import api from 'flavours/glitch/util/api'; import { debounce } from 'lodash'; 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(); - 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 }); export function saveSettings() { diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js index 0337e7a43b..0077f193bc 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.js +++ b/app/javascript/flavours/glitch/features/getting_started/index.js @@ -80,7 +80,7 @@ export default class GettingStarted extends ImmutablePureComponent { const { intl, myAccount, columns, multiColumn, lists } = this.props; const navItems = []; - const listItems = []; + let listItems = []; if (multiColumn) { if (!columns.find(item => item.get('id') === 'HOME')) { diff --git a/app/javascript/flavours/glitch/features/ui/components/embed_modal.js b/app/javascript/flavours/glitch/features/ui/components/embed_modal.js index 1afffb51bc..f3553f4a9f 100644 --- a/app/javascript/flavours/glitch/features/ui/components/embed_modal.js +++ b/app/javascript/flavours/glitch/features/ui/components/embed_modal.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { FormattedMessage, injectIntl } from 'react-intl'; -import axios from 'axios'; +import api from 'flavours/glitch/util/api'; @injectIntl export default class EmbedModal extends ImmutablePureComponent { @@ -23,7 +23,7 @@ export default class EmbedModal extends ImmutablePureComponent { 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 }); const iframeDocument = this.iframe.contentWindow.document; diff --git a/app/javascript/flavours/glitch/util/api.js b/app/javascript/flavours/glitch/util/api.js index ecc703c0aa..0be08d7fdd 100644 --- a/app/javascript/flavours/glitch/util/api.js +++ b/app/javascript/flavours/glitch/util/api.js @@ -1,4 +1,5 @@ import axios from 'axios'; +import ready from './ready'; import LinkHeader from './link_header'; export const getLinks = response => { @@ -11,10 +12,17 @@ export const getLinks = response => { 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({ - headers: { + headers: Object.assign(csrfHeader, getState ? { 'Authorization': `Bearer ${getState().getIn(['meta', 'access_token'], '')}`, - }, + } : {}), transformResponse: [function (data) { try {