move constants to separated file

web/app/common/constants.js

@@ -0,0 +1,9 @@
+const BASE_URL = 'https://demo.remark42.com';
+const API_BASE = '/api/v1';
+const NODE_ID = 'remark42';
+
+module.exports = {
+  BASE_URL,
+  API_BASE,
+  NODE_ID,
+};

web/app/common/fetcher.js

@@ -3,7 +3,8 @@ import 'common/promises';
 // TODO: i think we need to use unfetch here instead of heavy axios
 import axios from 'axios';
 
-import { baseUrl, apiBase, siteId } from './settings';
+import { BASE_URL, API_BASE } from './constants';
+import { siteId } from './settings';
 
 const fetcher = {};
 const methods = ['get', 'post', 'put', 'patch', 'delete', 'head'];
@@ -25,9 +26,9 @@ methods.forEach(method => {
       url,
       body = {},
       withCredentials = false,
-      overriddenApiBase = apiBase,
+      overriddenApiBase = API_BASE,
     } = (typeof data === 'string' ? { url: data } : data);
-    const basename = `${baseUrl}${overriddenApiBase}`;
+    const basename = `${BASE_URL}${overriddenApiBase}`;
 
     return new Promise((resolve, reject) => {
       const headers = {

web/app/components/root/root.jsx

@@ -1,7 +1,8 @@
 import { h, Component } from 'preact';
 import api from 'common/api';
 
-import { baseUrl, url, id } from 'common/settings';
+import { BASE_URL, NODE_ID } from 'common/constants';
+import { url } from 'common/settings';
 import store from 'common/store';
 
 import AuthPanel from 'components/auth-panel';
@@ -54,7 +55,7 @@ export default class Root extends Component {
   }
 
   onSignIn(provider) {
-    const newWindow = window.open(`${baseUrl}/auth/${provider}/login?from=${encodeURIComponent(location.href)}`);
+    const newWindow = window.open(`${BASE_URL}/auth/${provider}/login?from=${encodeURIComponent(location.href)}`);
 
     let secondsPass = 0;
     const checkMsDelay = 200;
@@ -89,7 +90,7 @@ export default class Root extends Component {
   render({}, { config = {}, comments = [], user, loaded }) {
     if (!loaded) {
       return (
-        <div id={id}>
+        <div id={NODE_ID}>
           <div className="root root_loading"/>
         </div>
       );
@@ -99,8 +100,8 @@ export default class Root extends Component {
     const pinnedComments = store.getPinnedComments();
 
     return (
-      <div id={id}>
-        <div className="root root__loading" id={id}>
+      <div id={NODE_ID}>
+        <div className="root root__loading">
           <AuthPanel
             mix="root__auth-panel"
             user={user}

web/app/remark.js

@@ -4,12 +4,12 @@ import 'common/polyfills'; // TODO: check it
 import { h, render } from 'preact';
 import Root from './components/root';
 
-import { id } from './common/settings';
+import { NODE_ID } from './common/constants';
 
 init();
 
 function init() {
-  const node = document.getElementById(id);
+  const node = document.getElementById(NODE_ID);
 
   if (!node) {
     console.error('Remark42: Can\'t find root node.');

web/webpack.config.js

@@ -9,7 +9,7 @@ const Html = require('html-webpack-plugin');
 const Provide = webpack.ProvidePlugin;
 const Define = webpack.DefinePlugin;
 
-const { id } = require('./app/common/settings');
+const { NODE_ID } = require('./app/common/constants');
 const publicFolder = path.resolve(__dirname, 'public');
 const env = process.env.NODE_ENV || 'dev';
 const hash = env === 'production' ? '' : '.[hash]';
@@ -22,7 +22,7 @@ const commonStyleLoaders = [
       plugins: [
         require('autoprefixer')({ browsers: ['> 1%'] }),
         require('postcss-url')({ url: 'inline', maxSize: 5 }),
-        require('postcss-wrap')({ selector: `#${id}` }),
+        require('postcss-wrap')({ selector: `#${NODE_ID}` }),
         require('postcss-csso'),
       ]
     }