freeCodeCamp/server/boot/a-react.js

74 lines
2.0 KiB
JavaScript
Raw Normal View History

import React from 'react';
import Router from 'react-router';
import Fetchr from 'fetchr';
import Location from 'react-router/lib/Location';
2015-06-29 12:01:56 -07:00
import debugFactory from 'debug';
2015-07-02 23:44:34 -07:00
import { app$ } from '../../common/app';
import { RenderToString } from 'thundercats-react';
2015-06-29 09:50:25 -07:00
const debug = debugFactory('freecc:react-server');
2015-07-01 15:14:10 -07:00
// add routes here as they slowly get reactified
// remove their individual controllers
2015-06-29 12:01:56 -07:00
const routes = [
2015-08-13 11:09:34 -07:00
'/hikes',
'/hikes/*',
2015-08-31 09:53:25 -07:00
'/jobs',
'/jobs/*'
2015-06-29 09:50:25 -07:00
];
2015-06-29 12:01:56 -07:00
export default function reactSubRouter(app) {
2015-07-02 23:44:34 -07:00
var router = app.loopback.Router();
2015-06-29 09:50:25 -07:00
2015-08-13 11:09:34 -07:00
if (process.env.NODE_ENV === 'development') {
routes.forEach(function(route) {
router.get(route, serveReactApp);
});
}
2015-06-29 09:50:25 -07:00
app.use(router);
function serveReactApp(req, res, next) {
const services = new Fetchr({ req });
2015-07-08 22:53:26 -07:00
const location = new Location(req.path, req.query);
2015-06-29 09:50:25 -07:00
// returns a router wrapped app
app$(location)
2015-06-29 09:50:25 -07:00
// if react-router does not find a route send down the chain
.filter(function({ initialState }) {
2015-07-03 21:46:22 -07:00
if (!initialState) {
debug('react tried to find %s but got 404', location.pathname);
2015-07-03 21:46:22 -07:00
return next();
2015-06-29 09:50:25 -07:00
}
2015-07-03 21:46:22 -07:00
return !!initialState;
2015-06-29 09:50:25 -07:00
})
.flatMap(function({ initialState, AppCat }) {
2015-06-29 09:50:25 -07:00
// call thundercats renderToString
// prefetches data and sets up it up for current state
debug('rendering to string');
return RenderToString(
AppCat(null, services),
2015-07-03 21:46:22 -07:00
React.createElement(Router, initialState)
);
2015-06-29 09:50:25 -07:00
})
// makes sure we only get one onNext and closes subscription
.flatMap(function({ data, markup }) {
2015-06-29 09:50:25 -07:00
debug('react rendered');
const { title } = data.AppStore;
res.expose(data, 'data');
2015-06-29 09:50:25 -07:00
// now render jade file with markup injected from react
return res.render$(
'layout-react',
{ markup, title }
);
2015-06-29 09:50:25 -07:00
})
.subscribe(
function(markup) {
debug('jade rendered');
res.send(markup);
},
next
);
}
2015-06-29 12:01:56 -07:00
}