feat(catch-all): handled mapping the catch-all route to a 404 status

Author: travi

README.md

@@ -45,6 +45,7 @@ export default {
                             <IndexRoute component={Index}/>
                             <Route path="/foo" component={Foo}/>
                             <Route path="/bar" component={Bar}/>
+                            <Route path="*" component={NotFound}/>
                         </Route>
                     ),
                     Root: ({store, children}) => (
@@ -69,6 +70,10 @@ are currently not provided, so these dependencies are required.
   additional steps before the response
 * `routes`: the definition of your react-router routes that this plugin should match the request url
   against
+  * If you use a [catch-all route](https://github.com/ReactTraining/react-router/blob/c3cd9675bd8a31368f87da74ac588981cbd6eae7/upgrade-guides/v1.0.0.md#notfound-route)
+    to display an appropriate message when the route does not match, it should have a `displayName` of `NotFound`. This 
+    will enable the status code to be passed to `respond` as `404`. Please note that the automatic mapping of the `name`
+    property should not be relied on because it can be mangled during minification and, therefore, not match in production.
 * `Root`: a react component that will wrap the mounted components that result from the matched route
 * `store`: a data store that will be passed as a prop to the `<Root />` component so that your
   component can inject it into the context through a provider component.

example/components/not-found.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function NotFound() {
+  return (
+    <div>
+      <h1>404</h1>
+      <p>Page Not Found</p>
+    </div>
+  );
+}
+
+NotFound.displayName = 'NotFound';

example/manifest.js

@@ -41,7 +41,7 @@ export default {
     {
       plugin: {
         register: '../src/route',
-        options: {respond, routes, Root, store: createStore(() => undefined)}
+        options: {respond, routes, Root, configureStore: () => createStore(() => undefined)}
       }
     }
   ]

example/respond.js

@@ -1,6 +1,6 @@
-export default function respond(reply, {renderedContent}) {
+export default function respond(reply, {renderedContent, status}) {
   reply.view('layout', {
     renderedContent,
     title: '<title>Example Title</title>'
-  });
+  }).code(status);
 }

example/routes.js

@@ -5,13 +5,13 @@ import Wrap from './components/wrap';
 import Index from './components/index';
 import Foo from './components/foo';
 import Bar from './components/bar';
+import NotFound from './components/not-found';
 
-const routes = (
+export default (
   <Route path="/" component={Wrap}>
     <IndexRoute component={Index} />
     <Route path="/foo" component={Foo} />
     <Route path="/bar" component={Bar} />
+    <Route path="*" component={NotFound} />
   </Route>
 );
-
-export default routes;

package.json

@@ -94,5 +94,8 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "dependencies": {
+    "http-status-codes": "1.0.6"
   }
 }

src/data-fetcher.js

@@ -1,9 +1,9 @@
 import {trigger} from 'redial';
 
-export default function ({renderProps, store}) {
+export default function ({renderProps, store, status}) {
   return trigger('fetch', renderProps.components, {
     params: renderProps.params,
     dispatch: store.dispatch,
     state: store.getState()
-  }).then(() => Promise.resolve(({renderProps}))).catch(e => Promise.reject(e));
+  }).then(() => Promise.resolve(({renderProps, status}))).catch(e => Promise.reject(e));
 }

src/route-matcher.js

@@ -1,5 +1,12 @@
+import {OK, NOT_FOUND} from 'http-status-codes';
 import {match, createMemoryHistory} from 'react-router';
 
+function determineStatusFrom(components) {
+  if (components.map(component => component.displayName).includes('NotFound')) return NOT_FOUND;
+
+  return OK;
+}
+
 export default function matchRoute(url, routes) {
   return new Promise((resolve, reject) => {
     const history = createMemoryHistory();
@@ -9,7 +16,7 @@ export default function matchRoute(url, routes) {
         reject(err);
       }
 
-      resolve({redirectLocation, renderProps});
+      resolve({redirectLocation, renderProps, status: determineStatusFrom(renderProps.components)});
     });
   });
 }

src/router-wrapper.js

@@ -7,9 +7,10 @@ import fetchData from './data-fetcher';
 
 export default function renderThroughReactRouter(request, reply, {routes, respond, Root, store}) {
   return matchRoute(request.raw.req.url, routes)
-    .then(({renderProps}) => fetchData({renderProps, store}))
-    .then(({renderProps}) => respond(reply, {
+    .then(({renderProps, status}) => fetchData({renderProps, store, status}))
+    .then(({renderProps, status}) => respond(reply, {
       store,
+      status,
       renderedContent: renderToString(
         <Root request={request} store={store}>
           <RouterContext {...renderProps} />

test/unit/data-fetcher-test.js

@@ -22,10 +22,11 @@ suite('data fetcher', () => {
     const state = any.simpleObject();
     const getState = sinon.stub().returns(state);
     const renderProps = {...any.simpleObject(), components, params};
+    const status = any.integer();
     const store = {...any.simpleObject(), dispatch, getState};
     redial.trigger.withArgs('fetch', components, {params, dispatch, state}).resolves();
 
-    return assert.isFulfilled(fetchData({renderProps, store}), {renderProps});
+    return assert.isFulfilled(fetchData({renderProps, store, status}), {renderProps, status});
   });
 
   test('that a redial rejection bubbles', () => {