freeCodeCamp/client/index.js

110 lines
2.6 KiB
JavaScript

import initOpbeat from 'opbeat-react';
import { createOpbeatMiddleware } from 'opbeat-react/redux';
import Rx from 'rx';
import debug from 'debug';
import { render } from 'redux-epic';
import createHistory from 'history/createBrowserHistory';
import useLangRoutes from './utils/use-lang-routes';
import sendPageAnalytics from './utils/send-page-analytics';
import { App, createApp, provideStore } from '../common/app';
import { getLangFromPath } from '../common/app/utils/lang';
// client specific epics
import epics from './epics';
import {
isColdStored,
getColdStorage,
saveToColdStorage
} from './cold-reload';
const {
__OPBEAT__ORG_ID,
__OPBEAT__APP_ID,
NODE_ENV
} = process.env;
const enableOpbeat = NODE_ENV !== 'development';
if (enableOpbeat) {
if (!__OPBEAT__ORG_ID || !__OPBEAT__APP_ID) {
console.error('OpBeat credentials not found in .env');
}
initOpbeat({
orgId: __OPBEAT__ORG_ID,
appId: __OPBEAT__APP_ID
});
}
const isDev = Rx.config.longStackSupport = debug.enabled('fcc:*');
const log = debug('fcc:client');
const hotReloadTimeout = 2000;
const {
devToolsExtension,
location,
history: _history,
document,
ga,
__fcc__: {
data: ssrState = {},
csrf: {
token: csrfToken
} = {}
}
} = window;
const epicOptions = {
isDev,
window,
document,
location,
history: _history
};
const DOMContainer = document.getElementById('fcc');
const defaultState = isColdStored() ?
getColdStorage() :
ssrState;
const primaryLang = getLangFromPath(location.pathname);
defaultState.app.csrfToken = csrfToken;
const serviceOptions = {
context: { _csrf: csrfToken },
xhrPath: '/services',
xhrTimeout: 15000
};
const history = useLangRoutes(createHistory, primaryLang)();
sendPageAnalytics(history, ga);
createApp({
history,
serviceOptions,
defaultState,
epics,
epicOptions,
enhancers: isDev && devToolsExtension && [ devToolsExtension() ],
middlewares: enableOpbeat && [ createOpbeatMiddleware() ]
})
.doOnNext(({ store }) => {
if (module.hot && typeof module.hot.accept === 'function') {
module.hot.accept(() => {
// note(berks): not sure this ever runs anymore after adding
// RHR?
log('saving state and refreshing.');
log('ignore react ssr warning.');
saveToColdStorage(store.getState());
setTimeout(() => location.reload(), hotReloadTimeout);
});
}
})
.do(() => log('rendering'))
.flatMap(({ store }) => render(provideStore(App, store), DOMContainer))
.subscribe(
() => debug('react rendered'),
err => { throw err; },
() => debug('react closed subscription')
);