From 7b1d5d41493e425e37ee5c9baf19cadff1b77fb3 Mon Sep 17 00:00:00 2001 From: Dominic Masters Date: Sun, 28 Oct 2018 15:48:03 +1100 Subject: [PATCH] Styled (slightly) the loading template. --- public/components/App.jsx | 1 - public/components/page/Page.jsx | 8 ++-- public/components/page/error/ErrorPage.jsx | 33 +++++++++++++++ .../components/page/loading/LoadingPage.jsx | 40 +++++++++++++++++++ .../components/page/loading/LoadingPage.scss | 29 ++++++++++++++ public/components/page/route/Routes.jsx | 13 +++--- 6 files changed, 113 insertions(+), 11 deletions(-) create mode 100644 public/components/page/error/ErrorPage.jsx create mode 100644 public/components/page/loading/LoadingPage.jsx create mode 100644 public/components/page/loading/LoadingPage.scss diff --git a/public/components/App.jsx b/public/components/App.jsx index c860aa3..cc21bea 100644 --- a/public/components/App.jsx +++ b/public/components/App.jsx @@ -72,7 +72,6 @@ class App extends React.Component { //For testing you can switch the router type let RouterType = BrowserRouter; - console.log(process.env.NODE_ENV); if(true) RouterType = HashRouter; return ( diff --git a/public/components/page/Page.jsx b/public/components/page/Page.jsx index 10ee479..f5ce5cf 100644 --- a/public/components/page/Page.jsx +++ b/public/components/page/Page.jsx @@ -41,13 +41,11 @@ class Page extends React.Component { render() { let { title, style, className } = this.props; - let clazzes = "c-page"; - - if(className) clazzes += " " + className; + let clazzes = `c-page ${className||""}`; let titleHelmet; - if((!title || !title.length) && this.props.style != "home-page") { - console.exception("This page (" + (this.props.style || this.props.className) + ") does not have a title!"); + if((!title || !title.length) && style != "home-page") { + console.exception(`This page (${style||className}) does not have a title!`); } else { titleHelmet = { this.props.title } } diff --git a/public/components/page/error/ErrorPage.jsx b/public/components/page/error/ErrorPage.jsx new file mode 100644 index 0000000..e967cd6 --- /dev/null +++ b/public/components/page/error/ErrorPage.jsx @@ -0,0 +1,33 @@ +// 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'; + +export default props => { + let { className } = props; + return ( + + An error occured! Try again later. + + ); +}; diff --git a/public/components/page/loading/LoadingPage.jsx b/public/components/page/loading/LoadingPage.jsx new file mode 100644 index 0000000..c64cc96 --- /dev/null +++ b/public/components/page/loading/LoadingPage.jsx @@ -0,0 +1,40 @@ +// 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 Styles from './LoadingPage.scss'; + +import Page from '@components/Page/Page'; +import Loader from '@objects/loading/Loader'; + + +export default props => { + let { className } = props; + + return ( + + + + ); +}; diff --git a/public/components/page/loading/LoadingPage.scss b/public/components/page/loading/LoadingPage.scss new file mode 100644 index 0000000..da736d1 --- /dev/null +++ b/public/components/page/loading/LoadingPage.scss @@ -0,0 +1,29 @@ +// 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 '~@styles/global'; + +.c-loading-page { + position: relative; + min-height: 90vh; +} diff --git a/public/components/page/route/Routes.jsx b/public/components/page/route/Routes.jsx index 7d3672b..16d5d16 100644 --- a/public/components/page/route/Routes.jsx +++ b/public/components/page/route/Routes.jsx @@ -22,16 +22,19 @@ // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import { CSSTransition, TransitionGroup } from 'react-transition-group'; -import { withRouter } from 'react-router'; import PropTypes from 'prop-types' -import { HashRouter, Route, Switch } from 'react-router-dom'; import Loadable from 'react-loadable'; +import { withRouter } from 'react-router'; +import { HashRouter, Route, Switch } from 'react-router-dom'; +import { CSSTransition, TransitionGroup } from 'react-transition-group'; + +import ErrorPage from './../error/ErrorPage'; +import LoadingPage from './../loading/LoadingPage'; const PageLoading = (props) => { let { error, pastDelay } = props; - if(error) return Loading Error; - if(pastDelay) return Loading...; + if(error) return ; + if(pastDelay) return ; return null; };