Skip to content

Commit 65aefcd

Browse files
andrewnandrewn
committed
Replace getConfig helper to read value from process.env
1 parent 11511a8 commit 65aefcd

File tree

10 files changed

+68
-24
lines changed

10 files changed

+68
-24
lines changed

‎client/components/Nav.jsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,13 @@ import * as projectActions from '../modules/IDE/actions/project';
1010
import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
1111
import { logoutUser } from '../modules/User/actions';
1212

13+
import getConfig from '../utils/getConfig';
1314
import { metaKeyName, } from '../utils/metaKey';
1415

1516
import CaretLeftIcon from '../images/left-arrow.svg';
1617
import TriangleIcon from '../images/down-filled-triangle.svg';
1718
import LogoIcon from '../images/p5js-logo-small.svg';
1819

19-
const __process = (typeof global !== 'undefined' ? global : window).process;
20-
2120
class Nav extends React.PureComponent {
2221
constructor(props) {
2322
super(props);
@@ -272,7 +271,7 @@ class Nav extends React.PureComponent {
272271
New
273272
</button>
274273
</li>
275-
{ __process.env.LOGIN_ENABLED && (!this.props.project.owner || this.isUserOwner()) &&
274+
{ getConfig('LOGIN_ENABLED') && (!this.props.project.owner || this.isUserOwner()) &&
276275
<li className="nav__dropdown-item">
277276
<button
278277
onClick={this.handleSave}
@@ -324,7 +323,7 @@ class Nav extends React.PureComponent {
324323
Open
325324
</Link>
326325
</li> }
327-
{__process.env.UI_COLLECTIONS_ENABLED &&
326+
{getConfig('UI_COLLECTIONS_ENABLED') &&
328327
this.props.user.authenticated &&
329328
this.props.project.id &&
330329
<li className="nav__dropdown-item">
@@ -337,7 +336,7 @@ class Nav extends React.PureComponent {
337336
Add to Collection
338337
</Link>
339338
</li>}
340-
{ __process.env.EXAMPLES_ENABLED &&
339+
{ getConfig('EXAMPLES_ENABLED') &&
341340
<li className="nav__dropdown-item">
342341
<Link
343342
to="/p5/sketches"
@@ -587,7 +586,7 @@ class Nav extends React.PureComponent {
587586
My sketches
588587
</Link>
589588
</li>
590-
{__process.env.UI_COLLECTIONS_ENABLED &&
589+
{getConfig('UI_COLLECTIONS_ENABLED') &&
591590
<li className="nav__dropdown-item">
592591
<Link
593592
to={`/${this.props.user.username}/collections`}
@@ -635,7 +634,7 @@ class Nav extends React.PureComponent {
635634
}
636635

637636
renderUserMenu(navDropdownState) {
638-
const isLoginEnabled = __process.env.LOGIN_ENABLED;
637+
const isLoginEnabled = getConfig('LOGIN_ENABLED');
639638
const isAuthenticated = this.props.user.authenticated;
640639

641640
if (isLoginEnabled && isAuthenticated) {

‎client/modules/App/App.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
33
import { connect } from 'react-redux';
4+
import getConfig from '../../utils/getConfig';
45
import DevTools from './components/DevTools';
56
import { setPreviousPath } from '../IDE/actions/ide';
67

7-
const __process = (typeof global !== 'undefined' ? global : window).process;
8-
98
class App extends React.Component {
109
constructor(props, context) {
1110
super(props, context);
@@ -35,7 +34,7 @@ class App extends React.Component {
3534
render() {
3635
return (
3736
<div className="app">
38-
{this.state.isMounted && !window.devToolsExtension && __process.env.NODE_ENV === 'development' && <DevTools />}
37+
{this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
3938
{this.props.children}
4039
</div>
4140
);

‎client/modules/IDE/actions/uploader.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import axios from 'axios';
2+
import getConfig from '../../../utils/getConfig';
23
import { createFile } from './files';
34
import { TEXT_FILE_REGEX } from '../../../../server/utils/fileUtils';
45

56
const __process = (typeof global !== 'undefined' ? global : window).process;
6-
const s3BucketHttps = __process.env.S3_BUCKET_URL_BASE ||
7-
`https://s3-${__process.env.AWS_REGION}.amazonaws.com/${__process.env.S3_BUCKET}/`;
7+
const s3BucketHttps = getConfig('S3_BUCKET_URL_BASE') ||
8+
`https://s3-${getConfig('AWS_REGION')}.amazonaws.com/${getConfig('S3_BUCKET')}/`;
89
const ROOT_URL = __process.env.API_URL;
910
const MAX_LOCAL_FILE_SIZE = 80000; // bytes, aka 80 KB
1011

‎client/modules/IDE/components/AssetSize.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import React from 'react';
33
import { connect } from 'react-redux';
44
import prettyBytes from 'pretty-bytes';
55

6-
const __process = (typeof global !== 'undefined' ? global : window).process;
7-
const limit = __process.env.UPLOAD_LIMIT || 250000000;
6+
import getConfig from '../../../utils/getConfig';
7+
8+
const limit = getConfig('UPLOAD_LIMIT') || 250000000;
89
const MAX_SIZE_B = limit;
910

1011
const formatPercent = (percent) => {

‎client/modules/IDE/components/FileUploader.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import Dropzone from 'dropzone';
44
import { bindActionCreators } from 'redux';
55
import { connect } from 'react-redux';
66
import * as UploaderActions from '../actions/uploader';
7+
import getConfig from '../../../utils/getConfig';
78
import { fileExtensionsAndMimeTypes } from '../../../../server/utils/fileUtils';
89

9-
const __process = (typeof global !== 'undefined' ? global : window).process;
10-
const s3Bucket = __process.env.S3_BUCKET_URL_BASE ||
11-
`https://s3-${__process.env.AWS_REGION}.amazonaws.com/${__process.env.S3_BUCKET}/`;
10+
const s3Bucket = getConfig('S3_BUCKET_URL_BASE') ||
11+
`https://s3-${getConfig('AWS_REGION')}.amazonaws.com/${getConfig('S3_BUCKET')}/`;
1212

1313
class FileUploader extends React.Component {
1414
componentDidMount() {

‎client/modules/IDE/components/UploadFileModal.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
33
import { connect } from 'react-redux';
44
import { Link } from 'react-router';
55
import prettyBytes from 'pretty-bytes';
6+
import getConfig from '../../../utils/getConfig';
67
import FileUploader from './FileUploader';
78
import { getreachedTotalSizeLimit } from '../selectors/users';
89
import ExitIcon from '../../../images/exit.svg';
910

10-
const __process = (typeof global !== 'undefined' ? global : window).process;
11-
const limit = __process.env.UPLOAD_LIMIT || 250000000;
11+
const limit = getConfig('UPLOAD_LIMIT') || 250000000;
1212
const limitText = prettyBytes(limit);
1313

1414
class UploadFileModal extends React.Component {

‎client/modules/IDE/selectors/users.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { createSelector } from 'reselect';
2+
import getConfig from '../../../utils/getConfig';
23

3-
const __process = (typeof global !== 'undefined' ? global : window).process;
44
const getAuthenticated = state => state.user.authenticated;
55
const getTotalSize = state => state.user.totalSize;
66
const getAssetsTotalSize = state => state.assets.totalSize;
7-
const limit = __process.env.UPLOAD_LIMIT || 250000000;
7+
const limit = getConfig('UPLOAD_LIMIT') || 250000000;
88

99
export const getCanUploadMedia = createSelector(
1010
getAuthenticated,

‎client/store.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@ import thunk from 'redux-thunk';
33
import DevTools from './modules/App/components/DevTools';
44
import rootReducer from './reducers';
55
import { clearState, loadState } from './persistState';
6-
7-
const __process = (typeof global !== 'undefined' ? global : window).process;
6+
import getConfig from './utils/getConfig';
87

98
export default function configureStore(initialState) {
109
const enhancers = [
1110
applyMiddleware(thunk),
1211
];
1312

14-
if (__process.env.CLIENT && __process.env.NODE_ENV === 'development') {
13+
if (getConfig('CLIENT') && getConfig('NODE_ENV') === 'development') {
1514
// Enable DevTools only when rendering on client and during development.
1615
enhancers.push(window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument());
1716
}

‎client/utils/getConfig.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* Returns config item from environment
3+
*/
4+
export default function getConfig(key) {
5+
if (key == null) {
6+
throw new Error('"key" must be provided to getConfig()');
7+
}
8+
9+
const __process = (typeof global !== 'undefined' ? global : window).process;
10+
const value = __process.env[key];
11+
12+
if (value == null) {
13+
console.warn(`getConfig("${key}") returned null`);
14+
}
15+
16+
return value;
17+
}

‎client/utils/getConfig.test.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import getConfig from './getConfig';
2+
3+
describe('utils/getConfig()', () => {
4+
beforeEach(() => {
5+
delete global.process.env.CONFIG_TEST_KEY_NAME;
6+
delete window.process.env.CONFIG_TEST_KEY_NAME;
7+
});
8+
9+
it('throws if key is not defined', () => {
10+
expect(() => getConfig(/* key is missing */)).toThrow(/must be provided/);
11+
});
12+
13+
it('fetches from global.process', () => {
14+
global.process.env.CONFIG_TEST_KEY_NAME = 'editor.p5js.org';
15+
16+
expect(getConfig('CONFIG_TEST_KEY_NAME')).toBe('editor.p5js.org');
17+
});
18+
19+
it('fetches from window.process', () => {
20+
window.process.env.CONFIG_TEST_KEY_NAME = 'editor.p5js.org';
21+
22+
expect(getConfig('CONFIG_TEST_KEY_NAME')).toBe('editor.p5js.org');
23+
});
24+
25+
it('warns but does not throw if no value found', () => {
26+
expect(() => getConfig('CONFIG_TEST_KEY_NAME')).not.toThrow();
27+
});
28+
});

0 commit comments

Comments
 (0)