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

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']);

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() {

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')) {

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;

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 {