Update 404 page

src/components/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { Home, NotFoundPage } from '.';
+import { Home, NotFoundWrapper } from '.';
 import { MainContainer, PostContainer } from '../containers';
 
 export const App = () => (
@@ -8,7 +8,7 @@ export const App = () => (
     <Switch>
       <Route exact path="/" component={MainContainer} />
       <Route path="/post/:postname" component={PostContainer} />
-      <Route component={NotFoundPage} />
+      <Route component={NotFoundWrapper} />
     </Switch>
   </div>
 );

src/components/NotFoundPage.js

@@ -1,17 +1,18 @@
 import React from 'react';
+import {Navbar, Header} from '.';
 import '../static/stylesheets/globals.scss';
 import contentStyle from '../static/stylesheets/content.scss';
 
 export const NotFoundPage = (props) => {
-  if (props.location.pathname === '/') {
-    return null;
-  }
   return (
     <div>
+      <Navbar />
       <div className={contentStyle.contentWrapper}>
-        <h1>Uhm... WHAT?</h1>
+        <Header header={"Uhm... WHAT?"} />
-        <h2>Looks like you&apos;re lost</h2>
+        <div className={contentStyle.content}>
-        <p>404 Page not found</p>
+          <p>Looks like you&apos;re lost</p>
+          <p>404 Page not found</p>
+        </div>
       </div>
     </div>
   );

src/components/NotFoundWrapper.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+import {Wrapper, NotFoundPage} from '.';
+import '../static/stylesheets/globals.scss';
+import styles from './Wrapper.scss';
+
+export default class NotFoundWrapper extends Component {
+
+  render () {
+    return (
+      <Wrapper>
+        <NotFoundPage />
+      </Wrapper>
+    )
+  }
+}

src/components/index.js

@@ -3,6 +3,7 @@ export { default as Blog } from './Blog';
 export { default as About } from './About';
 export { default as Post } from './Post';
 export { default as NotFoundPage } from './NotFoundPage';
+export { default as NotFoundWrapper } from './NotFoundWrapper';
 export { default as Spinner } from './Spinner';
 export { default as Header } from './Header';
 export { default as Wrapper } from './Wrapper';

src/containers/PostContainer.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import axios from 'axios';
-import {Post, Wrapper} from '../components';
+import {Post, Wrapper, NotFoundPage} from '../components';
 
 export default class PostContainer extends Component {
   constructor() {
@@ -8,6 +8,7 @@ export default class PostContainer extends Component {
 
     this.state = {
       isLoading: true,
+      error: false,
     };
   }
 
@@ -15,14 +16,29 @@ export default class PostContainer extends Component {
     const url = '/api/post/' + this.props.match.params.postname;
 
     axios.get(url).then((res) => {
-      this.setState({
+      if (res.data.error) {
-        isLoading: false,
+        this.setState({
-        post: res.data,
+          error: true,
-      });
+        });
+      }
+      else {
+        this.setState({
+          error: false,
+          isLoading: false,
+          post: res.data,
+        });
+      }
     })
   }
 
   render() {
+
+    if (this.state.error) {
+      return (
+        <NotFoundPage />
+      )
+    }
+
     return (
       <Wrapper>
         <Post isLoading={this.state.isLoading}