Merge branch 'rename-subdir-var' into 'develop'

Rename FE_BASE_PATH to FE_SUBDIRECTORY

See merge request soapbox-pub/soapbox-fe!720

.eslintignore

@@ -1,6 +1,7 @@
 /node_modules/**
 /static/**
 /static-test/**
+/public/**
 /tmp/**
 /coverage/**
 !.eslintrc.js

app/soapbox/__mocks__/api.js

@@ -1,6 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 
-const api = jest.requireActual('../api').default;
+const api = jest.requireActual('../api');
 let mocks = [];
 
 export const __stub = func => mocks.push(func);
@@ -11,8 +11,10 @@ const setupMock = axios => {
   mocks.map(func => func(mock));
 };
 
+export const staticClient = api.staticClient;
+
 export default (...params) => {
-  const axios = api(...params);
+  const axios = api.default(...params);
   setupMock(axios);
   return axios;
 };

app/soapbox/actions/__tests__/about-test.js

@@ -5,15 +5,17 @@ import {
   fetchAboutPage,
 } from '../about';
 import { Map as ImmutableMap } from 'immutable';
-import { __stub as stubApi } from 'soapbox/api';
+import MockAdapter from 'axios-mock-adapter';
+import { staticClient } from 'soapbox/api';
 import { mockStore } from 'soapbox/test_helpers';
 
 describe('fetchAboutPage()', () => {
   it('creates the expected actions on success', () => {
 
-    stubApi(mock => {
+    const mock = new MockAdapter(staticClient);
-      mock.onGet('/instance/about/index.html').reply(200, '<h1>Hello world</h1>');
+
-    });
+    mock.onGet('/instance/about/index.html')
+      .reply(200, '<h1>Hello world</h1>');
 
     const expectedActions = [
       { type: FETCH_ABOUT_PAGE_REQUEST, slug: 'index' },

app/soapbox/api.js

@@ -9,7 +9,7 @@ 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, FE_BASE_PATH } from 'soapbox/build_config';
+import { BACKEND_URL, FE_SUBDIRECTORY } from 'soapbox/build_config';
 import { isURL } from 'soapbox/utils/auth';
 
 /**
@@ -64,11 +64,11 @@ export const baseClient = (accessToken, baseURL = '') => {
 
 /**
  * Dumb client for grabbing static files.
- * It uses FE_BASE_PATH and parses JSON if possible.
+ * It uses FE_SUBDIRECTORY and parses JSON if possible.
  * No authorization is needed.
  */
 export const staticClient = axios.create({
-  baseURL: FE_BASE_PATH,
+  baseURL: FE_SUBDIRECTORY,
   transformResponse: [maybeParseJSON],
 });
 

app/soapbox/build_config.js

@@ -8,7 +8,7 @@ const { trim } = require('lodash');
 
 const {
   BACKEND_URL,
-  FE_BASE_PATH,
+  FE_SUBDIRECTORY,
   FE_BUILD_DIR,
 } = process.env;
 
@@ -34,6 +34,6 @@ const sanitize = obj => JSON.parse(JSON.stringify(obj));
 
 module.exports = sanitize({
   BACKEND_URL: sanitizeURL(BACKEND_URL),
-  FE_BASE_PATH: sanitizeBasename(FE_BASE_PATH),
+  FE_SUBDIRECTORY: sanitizeBasename(FE_SUBDIRECTORY),
   FE_BUILD_DIR: sanitizePath(FE_BUILD_DIR) || 'static',
 });

app/soapbox/components/autosuggest_emoji.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
 import { join } from 'path';
-import { FE_BASE_PATH } from 'soapbox/build_config';
+import { FE_SUBDIRECTORY } from 'soapbox/build_config';
 
 export default class AutosuggestEmoji extends React.PureComponent {
 
@@ -23,7 +23,7 @@ export default class AutosuggestEmoji extends React.PureComponent {
         return null;
       }
 
-      url = join(FE_BASE_PATH, 'emoji', `${mapping.filename}.svg`);
+      url = join(FE_SUBDIRECTORY, 'emoji', `${mapping.filename}.svg`);
     }
 
     return (

app/soapbox/containers/soapbox.js

@@ -26,7 +26,7 @@ import { getSettings } from 'soapbox/actions/settings';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { generateThemeCss } from 'soapbox/utils/theme';
 import messages from 'soapbox/locales/messages';
-import { FE_BASE_PATH } from 'soapbox/build_config';
+import { FE_SUBDIRECTORY } from 'soapbox/build_config';
 
 const validLocale = locale => Object.keys(messages).includes(locale);
 
@@ -148,7 +148,7 @@ class SoapboxMount extends React.PureComponent {
             ))}
             <meta name='theme-color' content={this.props.brandColor} />
           </Helmet>
-          <BrowserRouter basename={FE_BASE_PATH}>
+          <BrowserRouter basename={FE_SUBDIRECTORY}>
             <ScrollContext shouldUpdateScroll={this.shouldUpdateScroll}>
               <Switch>
                 {!me && <Route exact path='/' component={PublicLayout} />}

app/soapbox/features/compose/components/emoji_picker_dropdown.js

@@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import { buildCustomEmojis } from '../../emoji/emoji';
 import { join } from 'path';
-import { FE_BASE_PATH } from 'soapbox/build_config';
+import { FE_SUBDIRECTORY } from 'soapbox/build_config';
 
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@@ -29,7 +29,7 @@ const messages = defineMessages({
 
 let EmojiPicker, Emoji; // load asynchronously
 
-const backgroundImageFn = () => join(FE_BASE_PATH, 'emoji', 'sheet_13.png');
+const backgroundImageFn = () => join(FE_SUBDIRECTORY, 'emoji', 'sheet_13.png');
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
 const categoriesSort = [
@@ -359,7 +359,7 @@ class EmojiPickerDropdown extends React.PureComponent {
           <img
             className={classNames('emojione', { 'pulse-loading': active && loading })}
             alt='🙂'
-            src={join(FE_BASE_PATH, 'emoji', '1f602.svg')}
+            src={join(FE_SUBDIRECTORY, 'emoji', '1f602.svg')}
           />
         </div>
 

app/soapbox/features/emoji/emoji.js

@@ -1,7 +1,7 @@
 import unicodeMapping from './emoji_unicode_mapping_light';
 import Trie from 'substring-trie';
 import { join } from 'path';
-import { FE_BASE_PATH } from 'soapbox/build_config';
+import { FE_SUBDIRECTORY } from 'soapbox/build_config';
 
 const trie = new Trie(Object.keys(unicodeMapping));
 
@@ -62,7 +62,7 @@ const emojify = (str, customEmojis = {}, autoplay = false) => {
     } else { // matched to unicode emoji
       const { filename, shortCode } = unicodeMapping[match];
       const title = shortCode ? `:${shortCode}:` : '';
-      replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${join(FE_BASE_PATH, 'emoji', `${filename}.svg`)}" />`;
+      replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${join(FE_SUBDIRECTORY, 'emoji', `${filename}.svg`)}" />`;
       rend = i + match.length;
       // If the matched character was followed by VS15 (for selecting text presentation), skip it.
       if (str.codePointAt(rend) === 65038) {

app/soapbox/middleware/sounds.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import { join } from 'path';
-import { FE_BASE_PATH } from 'soapbox/build_config';
+import { FE_SUBDIRECTORY } from 'soapbox/build_config';
 
 const createAudio = sources => {
   const audio = new Audio();
@@ -31,21 +31,21 @@ export default function soundsMiddleware() {
   const soundCache = {
     boop: createAudio([
       {
-        src: join(FE_BASE_PATH, '/sounds/boop.ogg'),
+        src: join(FE_SUBDIRECTORY, '/sounds/boop.ogg'),
         type: 'audio/ogg',
       },
       {
-        src: join(FE_BASE_PATH, '/sounds/boop.mp3'),
+        src: join(FE_SUBDIRECTORY, '/sounds/boop.mp3'),
         type: 'audio/mpeg',
       },
     ]),
     chat: createAudio([
       {
-        src: join(FE_BASE_PATH, '/sounds/chat.oga'),
+        src: join(FE_SUBDIRECTORY, '/sounds/chat.oga'),
         type: 'audio/ogg',
       },
       {
-        src: join(FE_BASE_PATH, '/sounds/chat.mp3'),
+        src: join(FE_SUBDIRECTORY, '/sounds/chat.mp3'),
         type: 'audio/mpeg',
       },
     ]),

app/soapbox/reducers/auth.js

@@ -11,7 +11,7 @@ import { ME_FETCH_SKIP } from '../actions/me';
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 import { validId, isURL } from 'soapbox/utils/auth';
 import { trim } from 'lodash';
-import { FE_BASE_PATH } from 'soapbox/build_config';
+import { FE_SUBDIRECTORY } from 'soapbox/build_config';
 
 const defaultState = ImmutableMap({
   app: ImmutableMap(),
@@ -23,7 +23,7 @@ const defaultState = ImmutableMap({
 const buildKey = parts => parts.join(':');
 
 // For subdirectory support
-const NAMESPACE = trim(FE_BASE_PATH, '/') ? `soapbox@${FE_BASE_PATH}` : 'soapbox';
+const NAMESPACE = trim(FE_SUBDIRECTORY, '/') ? `soapbox@${FE_SUBDIRECTORY}` : 'soapbox';
 
 const STORAGE_KEY = buildKey([NAMESPACE, 'auth']);
 const SESSION_KEY = buildKey([NAMESPACE, 'auth', 'me']);

docs/development/build-config.md

@@ -4,7 +4,7 @@ When compiling Soapbox FE, environment variables may be passed to change the bui
 For example:
 
 ```sh
-NODE_ENV="production" FE_BUILD_DIR="public" FE_BASE_PATH="/soapbox" yarn build
+NODE_ENV="production" FE_BUILD_DIR="public" FE_SUBDIRECTORY="/soapbox" yarn build
 ```
 
 ### `NODE_ENV`
@@ -43,7 +43,7 @@ Options:
 
 Default: `"static"`
 
-### `FE_BASE_PATH`
+### `FE_SUBDIRECTORY`
 
 Subdirectory to host Soapbox FE out of.
 When hosting on a subdirectory, you must create a custom build for it.
@@ -58,5 +58,5 @@ Default: `"/"`
 For example, if you want to host the build on `https://gleasonator.com/soapbox`, you can compile it like this:
 
 ```sh
-NODE_ENV="production" FE_BASE_PATH="/soapbox" yarn build
+NODE_ENV="production" FE_SUBDIRECTORY="/soapbox" yarn build
 ```

webpack/configuration.js

@@ -2,7 +2,7 @@ const { join } = require('path');
 const { env } = require('process');
 
 const {
-  FE_BASE_PATH,
+  FE_SUBDIRECTORY,
   FE_BUILD_DIR,
 } = require(join(__dirname, '..', 'app', 'soapbox', 'build_config'));
 
@@ -19,7 +19,7 @@ const settings = {
 const outputDir = env.NODE_ENV === 'test' ? settings.test_root_path : settings.public_root_path;
 
 const output = {
-  path: join(__dirname, '..', outputDir, FE_BASE_PATH),
+  path: join(__dirname, '..', outputDir, FE_SUBDIRECTORY),
 };
 
 module.exports = {

webpack/shared.js

@@ -11,7 +11,7 @@ const { UnusedFilesWebpackPlugin } = require('unused-files-webpack-plugin');
 const { env, settings, output } = require('./configuration');
 const rules = require('./rules');
 
-const { FE_BASE_PATH } = require(join(__dirname, '..', 'app', 'soapbox', 'build_config'));
+const { FE_SUBDIRECTORY } = require(join(__dirname, '..', 'app', 'soapbox', 'build_config'));
 
 const htmlWebpackPluginConfig = {
   template: 'app/index.ejs',
@@ -39,7 +39,7 @@ module.exports = {
     chunkFilename: 'packs/js/[name]-[chunkhash].chunk.js',
     hotUpdateChunkFilename: 'packs/js/[id]-[hash].hot-update.js',
     path: output.path,
-    publicPath: join(FE_BASE_PATH, '/'),
+    publicPath: join(FE_SUBDIRECTORY, '/'),
   },
 
   optimization: {