91 lines
2.3 KiB
JavaScript
91 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import { RoutingContext } from 'react-router';
|
|
import Fetchr from 'fetchr';
|
|
import { createLocation } from 'history';
|
|
import debugFactory from 'debug';
|
|
import { dehydrate } from 'thundercats';
|
|
import { renderToString$ } from 'thundercats-react';
|
|
|
|
import app$ from '../../common/app';
|
|
|
|
const debug = debugFactory('freecc:react-server');
|
|
|
|
// add routes here as they slowly get reactified
|
|
// remove their individual controllers
|
|
const routes = [
|
|
'/jobs',
|
|
'/jobs/*',
|
|
'/videos',
|
|
'/videos/*'
|
|
];
|
|
|
|
const devRoutes = [];
|
|
|
|
export default function reactSubRouter(app) {
|
|
var router = app.loopback.Router();
|
|
|
|
// These routes are in production
|
|
routes.forEach((route) => {
|
|
router.get(route, serveReactApp);
|
|
});
|
|
|
|
if (process.env.NODE_ENV === 'development') {
|
|
devRoutes.forEach(function(route) {
|
|
router.get(route, serveReactApp);
|
|
});
|
|
}
|
|
|
|
app.use(router);
|
|
|
|
function serveReactApp(req, res, next) {
|
|
const services = new Fetchr({ req });
|
|
const location = createLocation(req.path);
|
|
|
|
// returns a router wrapped app
|
|
app$({ location })
|
|
// if react-router does not find a route send down the chain
|
|
.filter(function({ props }) {
|
|
if (!props) {
|
|
debug('react tried to find %s but got 404', location.pathname);
|
|
return next();
|
|
}
|
|
return !!props;
|
|
})
|
|
.flatMap(function({ props, AppCat }) {
|
|
const cat = AppCat(null, services);
|
|
debug('render react markup and pre-fetch data');
|
|
const store = cat.getStore('appStore');
|
|
|
|
// primes store to observe action changes
|
|
// cleaned up by cat.dispose further down
|
|
store.subscribe(() => {});
|
|
|
|
return renderToString$(
|
|
cat,
|
|
React.createElement(RoutingContext, props)
|
|
)
|
|
.flatMap(
|
|
dehydrate(cat),
|
|
({ markup }, data) => ({ markup, data, cat })
|
|
);
|
|
})
|
|
.flatMap(function({ data, markup, cat }) {
|
|
debug('react markup rendered, data fetched');
|
|
cat.dispose();
|
|
const { title } = data.AppStore;
|
|
res.expose(data, 'data');
|
|
return res.render$(
|
|
'layout-react',
|
|
{ markup, title }
|
|
);
|
|
})
|
|
.subscribe(
|
|
function(markup) {
|
|
debug('html rendered and ready to send');
|
|
res.send(markup);
|
|
},
|
|
next
|
|
);
|
|
}
|
|
}
|