Helpers for config and API client

client/components/Nav.jsx

@@ -10,14 +10,13 @@ import * as projectActions from '../modules/IDE/actions/project';
 import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences';
 import { logoutUser } from '../modules/User/actions';
 
+import getConfig from '../utils/getConfig';
 import { metaKeyName, } from '../utils/metaKey';
 
 import CaretLeftIcon from '../images/left-arrow.svg';
 import TriangleIcon from '../images/down-filled-triangle.svg';
 import LogoIcon from '../images/p5js-logo-small.svg';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
-
 class Nav extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -272,7 +271,7 @@ class Nav extends React.PureComponent {
                 New
               </button>
             </li>
-            { __process.env.LOGIN_ENABLED && (!this.props.project.owner || this.isUserOwner()) &&
+            { getConfig('LOGIN_ENABLED') && (!this.props.project.owner || this.isUserOwner()) &&
             <li className="nav__dropdown-item">
               <button
                 onClick={this.handleSave}
@@ -324,7 +323,7 @@ class Nav extends React.PureComponent {
                 Open
               </Link>
             </li> }
-            {__process.env.UI_COLLECTIONS_ENABLED &&
+            {getConfig('UI_COLLECTIONS_ENABLED') &&
               this.props.user.authenticated &&
               this.props.project.id &&
               <li className="nav__dropdown-item">
@@ -337,7 +336,7 @@ class Nav extends React.PureComponent {
                   Add to Collection
                 </Link>
               </li>}
-            { __process.env.EXAMPLES_ENABLED &&
+            { getConfig('EXAMPLES_ENABLED') &&
             <li className="nav__dropdown-item">
               <Link
                 to="/p5/sketches"
@@ -587,7 +586,7 @@ class Nav extends React.PureComponent {
                 My sketches
               </Link>
             </li>
-            {__process.env.UI_COLLECTIONS_ENABLED &&
+            {getConfig('UI_COLLECTIONS_ENABLED') &&
               <li className="nav__dropdown-item">
                 <Link
                   to={`/${this.props.user.username}/collections`}
@@ -635,7 +634,7 @@ class Nav extends React.PureComponent {
   }
 
   renderUserMenu(navDropdownState) {
-    const isLoginEnabled = __process.env.LOGIN_ENABLED;
+    const isLoginEnabled = getConfig('LOGIN_ENABLED');
     const isAuthenticated = this.props.user.authenticated;
 
     if (isLoginEnabled && isAuthenticated) {

client/modules/App/App.jsx

@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
+import getConfig from '../../utils/getConfig';
 import DevTools from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
-
 class App extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -35,7 +34,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app">
-        {this.state.isMounted && !window.devToolsExtension && __process.env.NODE_ENV === 'development' && <DevTools />}
+        {this.state.isMounted && !window.devToolsExtension && getConfig('NODE_ENV') === 'development' && <DevTools />}
         {this.props.children}
       </div>
     );

client/modules/IDE/actions/assets.js

@@ -1,10 +1,7 @@
-import axios from 'axios';
+import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from './loader';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
-const ROOT_URL = __process.env.API_URL;
-
 function setAssets(assets, totalSize) {
   return {
     type: ActionTypes.SET_ASSETS,
@@ -16,7 +13,7 @@ function setAssets(assets, totalSize) {
 export function getAssets() {
   return (dispatch) => {
     dispatch(startLoader());
-    axios.get(`${ROOT_URL}/S3/objects`, { withCredentials: true })
+    apiClient.get('/S3/objects')
       .then((response) => {
         dispatch(setAssets(response.data.assets, response.data.totalSize));
         dispatch(stopLoader());
@@ -39,7 +36,7 @@ export function deleteAsset(assetKey) {
 
 export function deleteAssetRequest(assetKey) {
   return (dispatch) => {
-    axios.delete(`${ROOT_URL}/S3/${assetKey}`, { withCredentials: true })
+    apiClient.delete(`/S3/${assetKey}`)
       .then((response) => {
         dispatch(deleteAsset(assetKey));
       })

client/modules/IDE/actions/collections.js

@@ -1,11 +1,9 @@
-import axios from 'axios';
 import { browserHistory } from 'react-router';
+import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from './loader';
 import { setToastText, showToast } from './toast';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
-const ROOT_URL = __process.env.API_URL;
 
 const TOAST_DISPLAY_TIME_MS = 1500;
 
@@ -15,11 +13,11 @@ export function getCollections(username) {
     dispatch(startLoader());
     let url;
     if (username) {
-      url = `${ROOT_URL}/${username}/collections`;
+      url = `/${username}/collections`;
     } else {
-      url = `${ROOT_URL}/collections`;
+      url = '/collections';
     }
-    axios.get(url, { withCredentials: true })
+    apiClient.get(url)
       .then((response) => {
         dispatch({
           type: ActionTypes.SET_COLLECTIONS,
@@ -41,8 +39,8 @@ export function getCollections(username) {
 export function createCollection(collection) {
   return (dispatch) => {
     dispatch(startLoader());
-    const url = `${ROOT_URL}/collections`;
-    return axios.post(url, collection, { withCredentials: true })
+    const url = '/collections';
+    return apiClient.post(url, collection)
       .then((response) => {
         dispatch({
           type: ActionTypes.CREATE_COLLECTION
@@ -73,8 +71,8 @@ export function createCollection(collection) {
 export function addToCollection(collectionId, projectId) {
   return (dispatch) => {
     dispatch(startLoader());
-    const url = `${ROOT_URL}/collections/${collectionId}/${projectId}`;
-    return axios.post(url, { withCredentials: true })
+    const url = `/collections/${collectionId}/${projectId}`;
+    return apiClient.post(url)
       .then((response) => {
         dispatch({
           type: ActionTypes.ADD_TO_COLLECTION,
@@ -105,8 +103,8 @@ export function addToCollection(collectionId, projectId) {
 export function removeFromCollection(collectionId, projectId) {
   return (dispatch) => {
     dispatch(startLoader());
-    const url = `${ROOT_URL}/collections/${collectionId}/${projectId}`;
-    return axios.delete(url, { withCredentials: true })
+    const url = `/collections/${collectionId}/${projectId}`;
+    return apiClient.delete(url)
       .then((response) => {
         dispatch({
           type: ActionTypes.REMOVE_FROM_COLLECTION,
@@ -136,8 +134,8 @@ export function removeFromCollection(collectionId, projectId) {
 
 export function editCollection(collectionId, { name, description }) {
   return (dispatch) => {
-    const url = `${ROOT_URL}/collections/${collectionId}`;
-    return axios.patch(url, { name, description }, { withCredentials: true })
+    const url = `/collections/${collectionId}`;
+    return apiClient.patch(url, { name, description })
       .then((response) => {
         dispatch({
           type: ActionTypes.EDIT_COLLECTION,
@@ -159,8 +157,8 @@ export function editCollection(collectionId, { name, description }) {
 
 export function deleteCollection(collectionId) {
   return (dispatch) => {
-    const url = `${ROOT_URL}/collections/${collectionId}`;
-    return axios.delete(url, { withCredentials: true })
+    const url = `/collections/${collectionId}`;
+    return apiClient.delete(url)
       .then((response) => {
         dispatch({
           type: ActionTypes.DELETE_COLLECTION,

client/modules/IDE/actions/files.js

@@ -1,13 +1,11 @@
-import axios from 'axios';
 import objectID from 'bson-objectid';
 import blobUtil from 'blob-util';
 import { reset } from 'redux-form';
+import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { setUnsavedChanges, closeNewFolderModal, closeNewFileModal } from './ide';
 import { setProjectSavedTime } from './project';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
-const ROOT_URL = __process.env.API_URL;
 
 function appendToFilename(filename, string) {
   const dotIndex = filename.lastIndexOf('.');
@@ -50,7 +48,7 @@ export function createFile(formProps) {
         parentId,
         children: []
       };
-      axios.post(`${ROOT_URL}/projects/${state.project.id}/files`, postParams, { withCredentials: true })
+      apiClient.post(`/projects/${state.project.id}/files`, postParams)
         .then((response) => {
           dispatch({
             type: ActionTypes.CREATE_FILE,
@@ -106,7 +104,7 @@ export function createFolder(formProps) {
         parentId,
         fileType: 'folder'
       };
-      axios.post(`${ROOT_URL}/projects/${state.project.id}/files`, postParams, { withCredentials: true })
+      apiClient.post(`/projects/${state.project.id}/files`, postParams)
         .then((response) => {
           dispatch({
             type: ActionTypes.CREATE_FILE,
@@ -161,7 +159,7 @@ export function deleteFile(id, parentId) {
           parentId
         }
       };
-      axios.delete(`${ROOT_URL}/projects/${state.project.id}/files/${id}`, deleteConfig, { withCredentials: true })
+      apiClient.delete(`/projects/${state.project.id}/files/${id}`, deleteConfig)
         .then(() => {
           dispatch({
             type: ActionTypes.DELETE_FILE,

client/modules/IDE/actions/preferences.js

@@ -1,11 +1,8 @@
-import axios from 'axios';
+import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
-const ROOT_URL = __process.env.API_URL;
-
 function updatePreferences(formParams, dispatch) {
-  axios.put(`${ROOT_URL}/preferences`, formParams, { withCredentials: true })
+  apiClient.put('/preferences', formParams)
     .then(() => {
     })
     .catch((error) => {

client/modules/IDE/actions/project.js

@@ -1,8 +1,9 @@
 import { browserHistory } from 'react-router';
-import axios from 'axios';
 import objectID from 'bson-objectid';
 import each from 'async/each';
 import isEqual from 'lodash/isEqual';
+import apiClient from '../../../utils/apiClient';
+import getConfig from '../../../utils/getConfig';
 import * as ActionTypes from '../../../constants';
 import { showToast, setToastText } from './toast';
 import {
@@ -14,8 +15,7 @@ import {
 } from './ide';
 import { clearState, saveState } from '../../../persistState';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
-const ROOT_URL = __process.env.API_URL;
+const ROOT_URL = getConfig('API_URL');
 
 export function setProject(project) {
   return {
@@ -52,7 +52,7 @@ export function setNewProject(project) {
 export function getProject(id, username) {
   return (dispatch, getState) => {
     dispatch(justOpenedProject());
-    axios.get(`${ROOT_URL}/${username}/projects/${id}`, { withCredentials: true })
+    apiClient.get(`/${username}/projects/${id}`)
       .then((response) => {
         dispatch(setProject(response.data));
         dispatch(setUnsavedChanges(false));
@@ -142,7 +142,7 @@ export function saveProject(selectedFile = null, autosave = false) {
       fileToUpdate.content = selectedFile.content;
     }
     if (state.project.id) {
-      return axios.put(`${ROOT_URL}/projects/${state.project.id}`, formParams, { withCredentials: true })
+      return apiClient.put(`/projects/${state.project.id}`, formParams)
         .then((response) => {
           dispatch(endSavingProject());
           dispatch(setUnsavedChanges(false));
@@ -177,7 +177,7 @@ export function saveProject(selectedFile = null, autosave = false) {
         });
     }
 
-    return axios.post(`${ROOT_URL}/projects`, formParams, { withCredentials: true })
+    return apiClient.post('/projects', formParams)
       .then((response) => {
         dispatch(endSavingProject());
         const { hasChanges, synchedProject } = getSynchedProject(getState(), response.data);
@@ -260,7 +260,7 @@ export function cloneProject(id) {
       if (!id) {
         resolve(getState());
       } else {
-        fetch(`${ROOT_URL}/projects/${id}`)
+        apiClient.get(`/projects/${id}`)
           .then(res => res.json())
           .then(data => resolve({
             files: data.files,
@@ -287,7 +287,7 @@ export function cloneProject(id) {
           const formParams = {
             url: file.url
           };
-          axios.post(`${ROOT_URL}/S3/copy`, formParams, { withCredentials: true })
+          apiClient.post('/S3/copy', formParams)
             .then((response) => {
               file.url = response.data.url;
               callback(null);
@@ -298,7 +298,7 @@ export function cloneProject(id) {
       }, (err) => {
         // if not errors in duplicating the files on S3, then duplicate it
         const formParams = Object.assign({}, { name: `${state.project.name} copy` }, { files: newFiles });
-        axios.post(`${ROOT_URL}/projects`, formParams, { withCredentials: true })
+        apiClient.post('/projects', formParams)
           .then((response) => {
             browserHistory.push(`/${response.data.user.username}/sketches/${response.data.id}`);
             dispatch(setNewProject(response.data));
@@ -337,7 +337,7 @@ export function setProjectSavedTime(updatedAt) {
 export function changeProjectName(id, newName) {
   return (dispatch, getState) => {
     const state = getState();
-    axios.put(`${ROOT_URL}/projects/${id}`, { name: newName }, { withCredentials: true })
+    apiClient.put(`/projects/${id}`, { name: newName })
       .then((response) => {
         if (response.status === 200) {
           dispatch({
@@ -364,7 +364,7 @@ export function changeProjectName(id, newName) {
 
 export function deleteProject(id) {
   return (dispatch, getState) => {
-    axios.delete(`${ROOT_URL}/projects/${id}`, { withCredentials: true })
+    apiClient.delete(`/projects/${id}`)
       .then(() => {
         const state = getState();
         if (id === state.project.id) {

client/modules/IDE/actions/projects.js

@@ -1,21 +1,18 @@
-import axios from 'axios';
+import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from './loader';
 
-const __process = (typeof global !== 'undefined' ? global : window).process;
-const ROOT_URL = __process.env.API_URL;
-
 // eslint-disable-next-line
 export function getProjects(username) {
   return (dispatch) => {
     dispatch(startLoader());
     let url;
     if (username) {
-      url = `${ROOT_URL}/${username}/projects`;
+      url = `/${username}/projects`;
     } else {
-      url = `${ROOT_URL}/projects`;
+      url = '/projects';
     }
-    axios.get(url, { withCredentials: true })
+    apiClient.get(url)
       .then((response) => {
         dispatch({
           type: ActionTypes.SET_PROJECTS,