routing and ssr, handling redirects too

.eslintrc.js

@@ -13,7 +13,8 @@ module.exports = {
       "semi": ["error", "never"],
       "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
       "react/forbid-prop-types": [1, { "forbid": ["any"] }],
-      "camelcase": [0, "never"]
+      "camelcase": [0, "never"],
+      "global-require": [0],
     },
     "globals": {
       "fetch": true,

package.json

@@ -23,20 +23,32 @@
     "style-loader": "^0.14.1",
     "url-loader": "^0.5.8",
     "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.4.2"
+    "webpack-dev-server": "^2.4.2",
+    "webpack-manifest-plugin": "^1.1.0"
   },
   "scripts": {
-    "lint": "eslint --fix src/",
     "build": "rimraf build/ && webpack -p",
-    "start": "webpack-dev-server --config webpack.config.dev.js"
+    "dev": "webpack-dev-server --config webpack.config.dev.js",
+    "lint": "eslint --fix src/ server.js",
+    "start": "export NODE_ENV=production NODE_SERVER=true && node server"
   },
   "dependencies": {
     "babel-core": "^6.24.0",
     "babel-preset-es2015": "^6.24.0",
+    "babel-preset-react": "^6.23.0",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.24.0",
+    "express": "^4.15.2",
+    "ignore-styles": "^5.0.1",
+    "isomorphic-fetch": "^2.2.1",
+    "lru-cache": "^4.0.2",
+    "radium": "^0.18.2",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-hot-loader": "3.0.0-beta.6",
     "react-redux": "^5.0.3",
+    "react-router": "next",
+    "react-router-dom": "next",
     "redux": "^3.6.0",
     "redux-thunk": "^2.2.0"
   }

server.js

@@ -0,0 +1,75 @@
+require('babel-register')({
+  extensions: ['.js'],
+  presets: ['es2015'],
+})
+require('ignore-styles')
+const express = require('express')
+const LRU = require('lru-cache')
+const { createElement } = require('react')
+const { StaticRouter } = require('react-router')
+const { Provider } = require('react-redux')
+const { renderToString } = require('react-dom/server')
+
+const { htmlTemplate } = require('./src/index.html.js')
+const manifest = require('./build/manifest.json')
+const App = require('./src/components/app/app').default
+const storeFactory = require('./src/store').default
+
+const app = express()
+const cache = LRU({
+  max: 11,
+  maxAge: 3600000,
+})
+
+function bootstrapApp(location, store, agent) {
+  const context = {}
+  const appEntry = createElement(
+    Provider, { store }, createElement(
+      StaticRouter, { location, context }, createElement(
+        App, { radiumConfig: { userAgent: agent } })))
+  const appHTML = renderToString(appEntry)
+  return { appHTML, context }
+}
+
+function checkCache(request, response, next) {
+  if (cache.has(request.url)) {
+    response.send(cache.get(request.url))
+    return
+  }
+
+  next()
+}
+
+function handleSSRRequest(request, response) {
+  const store = storeFactory()
+  const unsubscribe = store.subscribe(() => {
+    const state = store.getState()
+    if (!state.robotData.isPending) {
+      unsubscribe()
+      const { appHTML } = bootstrapApp(request.url, store, request.headers['user-agent'])
+      const htmlResponse = htmlTemplate({
+        jsPath: manifest['main.js'],
+        cssPath: manifest['main.css'],
+        preloadChunks: [manifest['profile.js']],
+        appHTML,
+        state,
+      })
+      response.send(htmlResponse)
+      cache.set(request.url, htmlResponse)
+    }
+  })
+
+  const { context } = bootstrapApp(request.url, store, request.headers['user-agent'])
+  if (context.url) {
+    response.redirect(context.url)
+    unsubscribe()
+    return
+  }
+  store.dispatch({ type: 'INIT_SSR' })
+}
+
+app.use('/static', express.static('./build/static'))
+app.use(checkCache)
+app.use(handleSSRRequest)
+
+app.listen(8080)

src/actions/index.js

@@ -1,3 +1,4 @@
+import 'isomorphic-fetch'
 import {
   SET_SEARCH_TERM,
   GET_ROBOTS_IS_PENDING,
@@ -11,7 +12,11 @@ export const setSearchTerm = term => ({
 })
 
 
-export const getRobots = () => (dispatch) => {
+export const getRobots = () => (dispatch, getState) => {
+  const state = getState()
+  if (state.robotData.robots.length >= 10) {
+    return
+  }
   dispatch({ type: GET_ROBOTS_IS_PENDING })
 
   fetch('https://jsonplaceholder.typicode.com/users')

src/components/app/app.js

@@ -1,16 +1,30 @@
 import React from 'react'
+import { Route, Switch, Redirect } from 'react-router-dom'
+import Radium from 'radium'
 import './app.css'
-// import RobotFilterViewContainer from '../../containers/robot-filter-view.container'
-import RobotProfileViewContainer from '../../containers/robot-profile-view.container'
+import RobotFilterViewContainer from '../../containers/robot-filter-view.container'
+import Lazy from '../lazy'
+
+const robotProfileLoader = process.env.NODE_SERVER
+  ? cb => cb(require('../../containers/robot-profile-view.container').default)
+  : cb => require.ensure([], (require) => {
+    cb(require('../../containers/robot-profile-view.container').default)
+  }, 'profile')
 
 function App() {
   return (
     <div className="tc">
       <h1>RoboDex</h1>
-      {/* <RobotFilterViewContainer /> */}
-      <RobotProfileViewContainer />
+      <Switch>
+        <Route path="/" exact component={RobotFilterViewContainer} />
+        <Route
+          path="/profile/:id"
+          render={props => <Lazy load={robotProfileLoader} {...props} />}
+        />
+        <Redirect to={{ pathname: '/' }} />
+      </Switch>
     </div>
   )
 }
 
-export default App
+export default Radium(App)

src/components/card.js

@@ -1,13 +1,16 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 
 const Card = ({ id, name, email }) => (
-  <div className="grow bg-light-green br3 pa3 ma2 dib">
-    <img alt={name} src={`//robohash.org/${id}?size=200x200`} />
-    <div>
-      <h2>{name}</h2>
-      <p>{email}</p>
+  <Link to={`/profile/${id}`}>
+    <div className="grow bg-light-green br3 pa3 ma2 dib">
+      <img alt={name} src={`//robohash.org/${id}?size=200x200`} />
+      <div>
+        <h2>{name}</h2>
+        <p>{email}</p>
+      </div>
     </div>
-  </div>
+  </Link>
   )
 
 Card.propTypes = {

src/components/lazy.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+
+class Lazy extends Component {
+  componentWillMount() {
+    this.setState({
+      component: null,
+    })
+
+    this.props.load((comp) => {
+      this.setState({
+        component: comp,
+      })
+    })
+  }
+
+  render() {
+    return this.state.component
+      ? <this.state.component {...this.props} />
+      : <h2>Loading component... </h2>
+  }
+}
+
+Lazy.propTypes = {
+  load: React.PropTypes.func.isRequired,
+}
+
+export default Lazy

src/components/profile/profile-view.js

@@ -1,6 +1,11 @@
 import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import Radium from 'radium'
 import Profile from './profile'
-import './profile.css'
+import {
+  profilePage,
+  back,
+} from './profile.css'
 
 class ProfileView extends Component {
   componentWillMount() {
@@ -10,12 +15,15 @@ class ProfileView extends Component {
   render() {
     const { isPending, robot } = this.props
     return (
-      <div className="profilePage">
+
+      <div style={profilePage}>
+        <Link style={back} to="/">&#9664;&nbsp;Back</Link>
         {
           (!isPending && robot)
           ? <Profile robot={robot} />
           : <h2>Loading... </h2>
         }
+
       </div>
     )
   }
@@ -31,4 +39,4 @@ ProfileView.propTypes = {
   getRobots: React.PropTypes.func.isRequired,
 }
 
-export default ProfileView
+export default Radium(ProfileView)