YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dominic Masters
2018-11-25 22:03:38 +11:00
parent 83369773cd
commit 88cd1a9a53
11 changed files with 183 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/api/api.js
View File

@@ -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);

17
public/blog/Blog.jsx
View File

@@ -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 });
});
}

45
public/components/error/ErrorPanel.jsx Normal file
View File

@@ -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>
);
});

25
public/components/error/ErrorPanel.scss Normal file
View File

@@ -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;
}
}

42
public/components/section/error/ErrorSection.jsx Normal file
View File

@@ -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>
);
};

7
public/components/section/error/ErrorSection.scss Normal file
View File

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

9
public/language/en-AU.jsx
View File

@@ -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": {

9
public/pages/blog/BlogPage.jsx
View File

@@ -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 = <ErrorSection title={lang.blog.error.title} body={lang.blog.error.body} error={error} />;
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 }

24
public/pages/blog/article/ArticlePage.jsx Normal file
View File

@@ -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';

0
public/pages/blog/article/ArticlePage.scss Normal file
View File

11
public/pages/error/ErrorPage.jsx
View File

@@ -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>
<Title className="u-text-center">{ lang.pages.error.body }</Title>
</PageBoundary>
<ErrorSection error={ error || lang.pages.error.body } />
<ClearSection />
</Page>
);