diff --git a/public/api/api.js b/public/api/api.js index 4b740f6..42e2f70 100644 --- a/public/api/api.js +++ b/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); diff --git a/public/blog/Blog.jsx b/public/blog/Blog.jsx index f733296..6167cbf 100644 --- a/public/blog/Blog.jsx +++ b/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 }); }); } diff --git a/public/components/error/ErrorPanel.jsx b/public/components/error/ErrorPanel.jsx new file mode 100644 index 0000000..23f8165 --- /dev/null +++ b/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 ( +
+
+

{ title }

+
+

+ { body } +

+
+ ); +}); diff --git a/public/components/error/ErrorPanel.scss b/public/components/error/ErrorPanel.scss new file mode 100644 index 0000000..0b56143 --- /dev/null +++ b/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; + } +} diff --git a/public/components/section/error/ErrorSection.jsx b/public/components/section/error/ErrorSection.jsx new file mode 100644 index 0000000..fe7d98b --- /dev/null +++ b/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 ( +
+ + + +
+ ); +}; diff --git a/public/components/section/error/ErrorSection.scss b/public/components/section/error/ErrorSection.scss new file mode 100644 index 0000000..eb4f7e5 --- /dev/null +++ b/public/components/section/error/ErrorSection.scss @@ -0,0 +1,7 @@ +@import '~@styles/global'; + +.c-error-section { + &__panel { + margin: 2em auto; + } +} diff --git a/public/language/en-AU.jsx b/public/language/en-AU.jsx index 336377f..ee29362 100644 --- a/public/language/en-AU.jsx +++ b/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": { diff --git a/public/pages/blog/BlogPage.jsx b/public/pages/blog/BlogPage.jsx index 29c485c..3f158de 100644 --- a/public/pages/blog/BlogPage.jsx +++ b/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 = "An error occured"; + if(error) error = ; if(pending) pending = ; if(articles && articles.length) { @@ -56,9 +54,6 @@ export default withBlogTemplate(withLanguage(props => { ); } - /* - */ - return ( { - let { className, lang } = props; + let { className, error, lang } = props; return ( - + - - { lang.pages.error.body } - + );