Merge pull request #105 from xsnippet/conf

Use API server passed during SPA build time

Author: lotrien

src/actions/index.js

@@ -1,4 +1,5 @@
 import parseLinkHeader from 'parse-link-header';
+import * as misc from '../misc';
 
 export const setRecentSnippets = snippets => ({
   type: 'SET_RECENT_SNIPPETS',
@@ -14,7 +15,7 @@ export const fetchRecentSnippets = marker => (dispatch) => {
   let qs = '';
   if (marker) { qs = `&marker=${marker}`; }
 
-  return fetch(`//api.xsnippet.org/snippets?limit=20${qs}`)
+  return fetch(misc.getApiUri(`/snippets?limit=20${qs}`))
     .then((response) => {
       const links = parseLinkHeader(response.headers.get('Link'));
 
@@ -30,7 +31,7 @@ export const setSnippet = snippet => ({
 });
 
 export const fetchSnippet = id => dispatch => (
-  fetch(`//api.xsnippet.org/snippets/${id}`)
+  fetch(misc.getApiUri(`/snippets/${id}`))
     .then(response => response.json())
     .then(json => dispatch(setSnippet(json)))
 );
@@ -41,13 +42,13 @@ export const setSyntaxes = syntaxes => ({
 });
 
 export const fetchSyntaxes = dispatch => (
-  fetch('//api.xsnippet.org/syntaxes')
+  fetch(misc.getApiUri('/syntaxes'))
     .then(response => response.json())
     .then(json => dispatch(setSyntaxes(json)))
 );
 
 export const postSnippet = (snippet, onSuccess) => dispatch => (
-  fetch('//api.xsnippet.org/snippets', {
+  fetch(misc.getApiUri('/snippets'), {
     method: 'POST',
     headers: {
       'Accept': 'application/json',

src/components/RecentSnippetItem.jsx

@@ -3,14 +3,15 @@ import { Link } from 'react-router-dom';
 import brace from 'brace';
 
 import * as misc from '../misc';
+import conf from '../conf';
 
 const RecentSnippetItem = ({ snippet }) => {
   const { modesByName } = brace.acequire('ace/ext/modelist');
   const mode = modesByName[snippet.get('syntax')] || modesByName.text;
   const syntax = mode.caption;
   const snippetTitle = snippet.get('title') || `#${snippet.get('id')}, Untitled`;
   const download = () => misc.downloadSnippet(snippet);
-  const rawUrl = process.env.RAW_SNIPPETS_URL_FORMAT.replace('%s', snippet.get('id'));
+  const rawUrl = conf.RAW_SNIPPET_URI_FORMAT.replace('%s', snippet.get('id'));
 
   return (
     <li className="recent-snippet-item">

src/components/Snippet.jsx

@@ -8,6 +8,7 @@ import 'brace/theme/textmate';
 import Spinner from './common/Spinner';
 import * as actions from '../actions';
 import * as misc from '../misc';
+import conf from '../conf';
 
 import '../styles/Snippet.styl';
 
@@ -50,7 +51,7 @@ export class Snippet extends React.Component {
     const snippetTitle = snippet.get('title') || `#${snippet.get('id')}, Untitled`;
     const mode = modesByName[snippet.get('syntax')] || modesByName.text;
     const syntax = mode.caption;
-    const rawUrl = process.env.RAW_SNIPPETS_URL_FORMAT.replace('%s', snippet.get('id'));
+    const rawUrl = conf.RAW_SNIPPET_URI_FORMAT.replace('%s', snippet.get('id'));
 
     return (
       <div className="snippet" key="Snippet">

src/conf/index.js

@@ -0,0 +1,9 @@
+export default {
+  // REST APIs have a base URI to which the endpoint paths are appended. This
+  // one sets a base URI for the XSnippet API we need to communicate with.
+  API_BASE_URI: process.env.API_BASE_URI || '//api.xsnippet.org',
+
+  // When expanded with a snippet ID, it points to a raw snippet page (i.e. a
+  // plain/text page with snippet content and without markup).
+  RAW_SNIPPET_URI_FORMAT: process.env.RAW_SNIPPET_URI_FORMAT || '//xsnippet.org/%s/raw',
+};

src/misc/index.js

@@ -1,6 +1,8 @@
 import brace from 'brace';
 import 'brace/ext/modelist';
 
+import conf from '../conf';
+
 export const regExpEscape = string => string.replace(/[-[\]{}()*+?.,\\^$|]/g, '\\$&');
 
 export function download(text, name, mime) {
@@ -49,3 +51,7 @@ export function formatDate(d) {
 
   return ISOdate.split('-').reverse().join('.');
 }
+
+export function getApiUri(endpoint) {
+  return `${conf.API_BASE_URI}${endpoint}`;
+}

tests/components/Snippet.test.jsx

@@ -35,7 +35,6 @@ describe('Snippet', () => {
   });
 
   it('should show snippet if snippet was passed as props', () => {
-    process.env.RAW_SNIPPETS_URL_FORMAT = '//xsnippet.org/%s/raw';
     const wrapper = shallow(<Snippet snippet={snippet} />, { disableLifecycleMethods: true });
 
     expect(wrapper.type()).not.toEqual(Spinner);

webpack.config.js

@@ -215,9 +215,11 @@ module.exports = () => {
       new CleanWebpackPlugin([path.resolve(__dirname, 'dist')]),
 
       // Propagate (and set) environment variables down to the application. We
-      // use them to configure application behaviour.
+      // use them to configure application behaviour. Please note, 'null' here
+      // means 'unset'.
       new webpack.EnvironmentPlugin({
-        RAW_SNIPPETS_URL_FORMAT: '//xsnippet.org/%s/raw',
+        API_BASE_URI: null,
+        RAW_SNIPPET_URI_FORMAT: null,
       }),
 
       // Similar to JavaScript, we use [chunkhash] in order to invalidate