From 2863f9dbef4dfd3d9c9f1493a5e1f088a354ab24 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Thu, 16 Feb 2017 12:37:14 +0200
Subject: [PATCH] Fix notfound status code in server rendering

---
 server/index.js                               |  5 +++
 src/containers/NotFoundPage/NotFoundPage.js   | 38 +++++++++++++++----
 .../NotFoundPage/NotFoundPage.test.js         |  7 ++--
 .../__snapshots__/NotFoundPage.test.js.snap   |  9 ++---
 4 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/server/index.js b/server/index.js
index e531dc27..31db3a30 100644
--- a/server/index.js
+++ b/server/index.js
@@ -151,7 +151,12 @@ app.get('*', (req, res) => {
       const html = render(req.url, context, preloadedState);
 
       if (context.url) {
+        // React Router injects the context.url if a redirect was rendered
         res.redirect(context.url);
+      } else if (context.notfound) {
+        // NotFoundPage component injects the context.notfound when a
+        // 404 should be returned
+        res.status(404).send(html);
       } else {
         res.send(html);
       }
diff --git a/src/containers/NotFoundPage/NotFoundPage.js b/src/containers/NotFoundPage/NotFoundPage.js
index 58f422fe..f0df9d3c 100644
--- a/src/containers/NotFoundPage/NotFoundPage.js
+++ b/src/containers/NotFoundPage/NotFoundPage.js
@@ -1,9 +1,31 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { PageLayout } from '../../components';
+import React, { Component, PropTypes } from 'react';
+import { withRouter } from 'react-router-dom';
+import { PageLayout, NamedLink } from '../../components';
 
-export default () => (
-  <PageLayout title="Page not found">
-    <Link to="/">Index page</Link>
-  </PageLayout>
-);
+export class NotFoundPageComponent extends Component {
+  componentWillMount() {
+    // The StaticRouter component used in server side rendering
+    // provides the context object. We attach a `notfound` flag to
+    // the context to tell the server to change the response status
+    // code into a 404.
+    this.props.staticContext.notfound = true;
+  }
+  render() {
+    return (
+      <PageLayout title="Page not found">
+        <NamedLink name="LandingPage">Home</NamedLink>
+      </PageLayout>
+    );
+  }
+}
+
+NotFoundPageComponent.defaultProps = { staticContext: {} };
+
+const { object } = PropTypes;
+
+NotFoundPageComponent.propTypes = {
+  // context object from StaticRouter, injected by the withRouter wrapper
+  staticContext: object,
+};
+
+export default withRouter(NotFoundPageComponent);
diff --git a/src/containers/NotFoundPage/NotFoundPage.test.js b/src/containers/NotFoundPage/NotFoundPage.test.js
index b34e1278..4e75fe9d 100644
--- a/src/containers/NotFoundPage/NotFoundPage.test.js
+++ b/src/containers/NotFoundPage/NotFoundPage.test.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import { renderShallow } from '../../util/test-helpers';
-import NotFoundPage from './NotFoundPage';
+import { StaticRouter } from 'react-router-dom';
+import { renderShallow, renderDeep } from '../../util/test-helpers';
+import { NotFoundPageComponent } from './NotFoundPage';
 
 describe('NotFoundPage', () => {
   it('matches snapshot', () => {
-    const tree = renderShallow(<NotFoundPage />);
+    const tree = renderShallow(<NotFoundPageComponent />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap b/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap
index 0a3865c6..7b0aabf7 100644
--- a/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap
+++ b/src/containers/NotFoundPage/__snapshots__/NotFoundPage.test.js.snap
@@ -1,10 +1,9 @@
 exports[`NotFoundPage matches snapshot 1`] = `
 <Connect(withRouter(PageLayout))
   title="Page not found">
-  <Link
-    replace={false}
-    to="/">
-    Index page
-  </Link>
+  <withFlattenedRoutes(NamedLink)
+    name="LandingPage">
+    Home
+  </withFlattenedRoutes(NamedLink)>
 </Connect(withRouter(PageLayout))>
 `;