Built error section, needs to be on a few pages.

public/api/api.js

@@ -36,9 +36,16 @@ export const getUrl = request => {
   return `/api${slash}${r}`;
 }
 
-export const get = async (url, params) => {
+export const get = async (url, params, test) => {
   url = url || "";
 
+  if(process.env.NODE_ENV === 'development') {
+    console.log('testing mode');
+    return await new Promise((resolve,reject) => {
+      setTimeout(e => resolve(test), 1000);
+    });
+  }
+
   //Generate URL from query string
   let paramString = queryString.stringify(params);
   url = getUrl(url);

public/blog/Blog.jsx

@@ -24,6 +24,20 @@
 import React from 'react';
 import { get } from '@public/api/api';
 
+const TestBlogArticle = id => {
+  return {
+    id, handle: 'test-blog-article', title: 'My Title',
+    image: 'photo.jpg',
+    shortDescription: "Some short description that goes here too so let's write.",
+    description: "This is my longer example description lorem ipsum dolor sit amet."
+  }
+};
+
+const TestBlogs = {
+  pages: 20/7,
+  articles: [...Array(20).keys()].map(TestBlogArticle)
+}
+
 export const withBlogTemplate = WrappedComponent => {
   return class extends React.Component {
     constructor(props) {
@@ -43,7 +57,7 @@ export const withBlogTemplate = WrappedComponent => {
       perPage = perPage || 7;
 
       this.setState({ pending: true, page, perPage });
-      get('blog', { page, perPage }).then(blog => {
+      get('blog', { page, perPage }, TestBlogs).then(blog => {
         let { articles, pages } = blog;
 
         articles.forEach(article => {
@@ -53,6 +67,7 @@ export const withBlogTemplate = WrappedComponent => {
 
         this.setState({ pending: undefined, error: undefined, articles, pages });
       }).catch(e => {
+        console.error(e);
         this.setState({ pending: undefined, error: e });
       });
     }

public/components/error/ErrorPanel.jsx

@@ -0,0 +1,45 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+import { withLanguage } from '@public/language/Language';
+
+import Styles from './ErrorPanel.scss';
+
+export default withLanguage(props => {
+  let { className, error, title, body, lang } = props;
+
+  title = title || error.title || lang.error.title;
+  body = body || error.body || error || lang.error.body;
+
+  return (
+    <div className={`c-error-panel ${className||""}`}>
+      <div className="c-error-panel__heading">
+        <h2 className="c-error-panel__heading-title">{ title }</h2>
+      </div>
+      <p className="c-error-panel__body">
+        { body }
+      </p>
+    </div>
+  );
+});

public/components/error/ErrorPanel.scss

@@ -0,0 +1,25 @@
+@import '~@styles/global';
+
+$c-error-panel--padding: 1em;
+
+.c-error-panel {
+  max-width: 750px;
+  border: $s-color--input-default__border;
+
+  &__heading {
+    padding: $c-error-panel--padding;
+    background: $s-color--input-danger__top;
+    border-bottom: $s-color--input-default__border;
+
+    &-title {
+      color: $s-color--input-primary__text;
+      margin: 0;
+    }
+  }
+
+  &__body {
+    margin: 0;
+    background: $s-color--background;
+    padding: $c-error-panel--padding;
+  }
+}

public/components/section/error/ErrorSection.jsx

@@ -0,0 +1,42 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+
+import Section from './../Section';
+import PageBoundary from '@components/page/boundary/PageBoundary';
+import ErrorPanel from '@components/error/ErrorPanel';
+
+import Styles from './ErrorSection.scss';
+
+export default props => {
+  let { className } = props;
+
+  return (
+    <Section className={`c-error-section ${className||""}`}>
+      <PageBoundary>
+        <ErrorPanel {...props} className="c-error-section__panel" />
+      </PageBoundary>
+    </Section>
+  );
+};

public/components/section/error/ErrorSection.scss

@@ -0,0 +1,7 @@
+@import '~@styles/global';
+
+.c-error-section {
+  &__panel {
+    margin: 2em auto;
+  }
+}

public/language/en-AU.jsx

@@ -25,11 +25,20 @@ export default {
   },
 
   "blog": {
+    "error": {
+      "title": "Failed to get the blog",
+      "body": "Failed to get the blogs and articles from the server, please try again later or refresh your browser."
+    },
     "article": {
       "readMore": "Read More"
     }
   },
 
+  "error": {
+    "title": "An error occured.",
+    "body": "An error occured, please try again later."
+  },
+
   "pages": {
     "home": {
       "banner": {

public/pages/blog/BlogPage.jsx

@@ -27,6 +27,7 @@ import { withLanguage } from '@public/language/Language';
 import { withBlogTemplate} from '@public/blog/Blog';
 import Page, { PageBoundary } from '@components/page/Page';
 
+import ErrorSection from '@sections/error/ErrorSection';
 import FeaturedArticleSection from '@sections/blog/article/FeaturedArticleSection';
 import ArticleGridSection from '@sections/blog/article/ArticleGridSection';
 import ClearSection from '@sections/layout/ClearSection';
@@ -39,11 +40,8 @@ import Styles from './BlogPage.scss';
 export default withBlogTemplate(withLanguage(props => {
   let { lang, articles, page, pages, pending, error } = props;
 
-  console.log(props);
-
   let children;
-
+  if(error) error = <ErrorSection title={lang.blog.error.title} body={lang.blog.error.body} error={error} />;
-  if(error) error = "An error occured";
   if(pending) pending = <Loader />;
 
   if(articles && articles.length) {
@@ -56,9 +54,6 @@ export default withBlogTemplate(withLanguage(props => {
     );
   }
 
-  /*
-  */
-
   return (
     <Page
       style="blog-page" className="p-blog-page" title={ lang.pages.blog.title }

public/pages/blog/article/ArticlePage.jsx

@@ -0,0 +1,24 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';

public/pages/error/ErrorPage.jsx

@@ -25,17 +25,16 @@ import React from 'react';
 import { withLanguage} from '@public/language/Language';
 
 import Page, { PageBoundary } from '@components/page/Page';
-import { ClearSection} from '@components/section/Section';
+import { ClearSection } from '@components/section/Section';
+import ErrorSection from '@sections/error/ErrorSection';
 import { Title } from '@objects/typography/Typography';
 
 export default withLanguage(props => {
-  let { className, lang } = props;
+  let { className, error, lang } = props;
   return (
-    <Page className={`c-error-page ${className||""}`} title={lang.pages.error.title}>
+    <Page className={`c-error-page ${className||""}`} title={ lang.pages.error.title }>
       <ClearSection />
-      <PageBoundary>
+      <ErrorSection error={ error || lang.pages.error.body } />
-        <Title className="u-text-center">{ lang.pages.error.body }</Title>
-      </PageBoundary>
       <ClearSection />
     </Page>
   );