Subdirectory: use instance static files from subdirectory

app/soapbox/actions/about.js

@@ -1,4 +1,4 @@
-import api from '../api';
+import { staticClient } from '../api';
 
 export const FETCH_ABOUT_PAGE_REQUEST = 'FETCH_ABOUT_PAGE_REQUEST';
 export const FETCH_ABOUT_PAGE_SUCCESS = 'FETCH_ABOUT_PAGE_SUCCESS';
@@ -7,9 +7,10 @@ export const FETCH_ABOUT_PAGE_FAIL    = 'FETCH_ABOUT_PAGE_FAIL';
 export function fetchAboutPage(slug = 'index', locale) {
   return (dispatch, getState) => {
     dispatch({ type: FETCH_ABOUT_PAGE_REQUEST, slug, locale });
-    return api(getState).get(`/instance/about/${slug}${locale ? `.${locale}` : ''}.html`).then(response => {
-      dispatch({ type: FETCH_ABOUT_PAGE_SUCCESS, slug, locale, html: response.data });
-      return response.data;
+    const filename = `${slug}${locale ? `.${locale}` : ''}.html`;
+    return staticClient.get(`/instance/about/${filename}`).then(({ data: html }) => {
+      dispatch({ type: FETCH_ABOUT_PAGE_SUCCESS, slug, locale, html });
+      return html;
     }).catch(error => {
       dispatch({ type: FETCH_ABOUT_PAGE_FAIL, slug, locale, error });
       throw error;

app/soapbox/actions/soapbox.js

@@ -1,4 +1,4 @@
-import api from '../api';
+import api, { staticClient } from '../api';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import { getFeatures } from 'soapbox/utils/features';
 import { createSelector } from 'reselect';
@@ -76,7 +76,7 @@ export function fetchSoapboxConfig() {
 
 export function fetchSoapboxJson() {
   return (dispatch, getState) => {
-    api(getState).get('/instance/soapbox.json').then(({ data }) => {
+    staticClient.get('/instance/soapbox.json').then(({ data }) => {
       if (!isObject(data)) throw 'soapbox.json failed';
       dispatch(importSoapboxConfig(data));
     }).catch(error => {

app/soapbox/api.js

@@ -1,12 +1,23 @@
+/**
+ * API: HTTP client and utilities.
+ * @see {@link https://github.com/axios/axios}
+ * @module soapbox/api
+ */
 'use strict';
 
 import axios from 'axios';
 import LinkHeader from 'http-link-header';
 import { getAccessToken, getAppToken, parseBaseURL } from 'soapbox/utils/auth';
 import { createSelector } from 'reselect';
-import { BACKEND_URL } from 'soapbox/build_config';
+import { BACKEND_URL, FE_BASE_PATH } from 'soapbox/build_config';
 import { isURL } from 'soapbox/utils/auth';
 
+/**
+ Parse Link headers, mostly for pagination.
+ @see {@link https://www.npmjs.com/package/http-link-header}
+ @param {object} response - Axios response object
+ @returns {object} Link object
+ */
 export const getLinks = response => {
   const value = response.headers.link;
   if (!value) return { refs: [] };
@@ -33,6 +44,12 @@ const getAuthBaseURL = createSelector([
   return baseURL !== window.location.origin ? baseURL : '';
 });
 
+/**
+ * Base client for HTTP requests.
+ * @param {string} accessToken
+ * @param {string} baseURL
+ * @returns {object} Axios instance
+ */
 export const baseClient = (accessToken, baseURL = '') => {
   return axios.create({
     // When BACKEND_URL is set, always use it.
@@ -45,6 +62,23 @@ export const baseClient = (accessToken, baseURL = '') => {
   });
 };
 
+/**
+ * Dumb client for grabbing static files.
+ * It uses FE_BASE_PATH and parses JSON if possible.
+ * No authorization is needed.
+ */
+export const staticClient = axios.create({
+  baseURL: FE_BASE_PATH,
+  transformResponse: [maybeParseJSON],
+});
+
+/**
+ * Stateful API client.
+ * Uses credentials from the Redux store if available.
+ * @param {function} getState - Must return the Redux state
+ * @param {string} authType - Either 'user' or 'app'
+ * @returns {object} Axios instance
+ */
 export default (getState, authType = 'user') => {
   const state = getState();
   const accessToken = getToken(state, authType);