From 87ed8adbe59fd38076ca6c54f7097985d7fe952f Mon Sep 17 00:00:00 2001 From: Dominic Masters Date: Tue, 23 Oct 2018 08:19:45 +1100 Subject: [PATCH] Restructured and beginning to work with loadable pages. --- .babelrc | 3 ++ package.json | 2 + public/components/App.jsx | 53 ++++++++++++------- public/components/page/Page.jsx | 16 +++--- public/components/page/Routes.jsx | 29 +++++----- .../page => pages}/contact/ContactPage.jsx | 31 ++++++----- .../page => pages}/home/HomePage.jsx | 2 +- .../home/sections/BannerSection.jsx | 2 +- .../home/sections/ExistingWorkSection.jsx | 10 ++-- .../home/sections/PlatformsSection.jsx | 34 ++++++------ .../home/sections/ProgrammingSection.jsx | 2 +- .../home/sections/PromoVideoSection.jsx | 4 +- .../legal/privacy/PrivacyPolicyPage.jsx | 4 +- webpack.config.js | 7 ++- 14 files changed, 115 insertions(+), 84 deletions(-) rename public/{components/page => pages}/contact/ContactPage.jsx (91%) rename public/{components/page => pages}/home/HomePage.jsx (98%) rename public/{components/page => pages}/home/sections/BannerSection.jsx (96%) rename public/{components/page => pages}/home/sections/ExistingWorkSection.jsx (93%) rename public/{components/page => pages}/home/sections/PlatformsSection.jsx (79%) rename public/{components/page => pages}/home/sections/ProgrammingSection.jsx (96%) rename public/{components/page => pages}/home/sections/PromoVideoSection.jsx (93%) rename public/{components/page => pages}/legal/privacy/PrivacyPolicyPage.jsx (96%) diff --git a/.babelrc b/.babelrc index 292c529..0b4ebfb 100644 --- a/.babelrc +++ b/.babelrc @@ -17,6 +17,9 @@ } ], "@babel/preset-react" + ], + "plugins": [ + ], "ignore": [ "node_modules" diff --git a/package.json b/package.json index a5be0dc..551c959 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "homepage": "https://github.com/YourWishes/domsPlaceNew#readme", "dependencies": { "@babel/core": "^7.1.2", + "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/polyfill": "^7.0.0", "@babel/preset-env": "^7.1.0", "@babel/preset-react": "^7.0.0", @@ -47,6 +48,7 @@ "react": "^16.5.2", "react-dom": "^16.5.2", "react-helmet": "^5.2.0", + "react-loadable": "^5.5.0", "react-redux": "^5.0.7", "react-router": "^4.3.1", "react-router-dom": "^4.3.1", diff --git a/public/components/App.jsx b/public/components/App.jsx index a5fe62f..63fdf30 100644 --- a/public/components/App.jsx +++ b/public/components/App.jsx @@ -28,7 +28,7 @@ import { HashRouter, BrowserRouter } from 'react-router-dom'; import Background from '@objects/background/Background'; import Header from './header/Header'; import Footer from './footer/Footer'; -import Routes from './page/Routes'; +import Routes, { RouteWrapper } from './page/Routes'; import Favicon from './Favicon'; class App extends React.Component { @@ -47,27 +47,44 @@ class App extends React.Component { } render() { + let { className, menuOpen, modal } = this.props; + + //Generate base clazzes let clazz = "c-app"; - if(this.props.menuOpen) clazz += " is-menu-open "; - let modal; - if(this.props.modal.open) clazz += " is-modal-open"; - if(this.props.modal.modal) modal = this.props.modal.modal; + //Menu Open? + if(menuOpen) clazz += " is-menu-open "; - let children = ( -
- -
- { modal } - -
+ //Fetch the modal from the store + let modalObject; + if(modal.open) clazz += " is-modal-open"; + if(modal.modal) modalObject = modal.modal; + + //Append any other clazzes there may be. + if(className) clazz += " " + className; + + //For testing you can switch the router type + let RouterType = BrowserRouter; + if(true) RouterType = HashRouter; + + return ( + +
+ +
+ + { modalObject } + + {/* Routes */} + + import('@pages/home/HomePage') } /> + import('@pages/contact/ContactPage') } /> + + import('@pages/legal/privacy/PrivacyPolicyPage') } /> + +
+ ); - - if(false) { - return {children}; - } else { - return {children}; - } } } diff --git a/public/components/page/Page.jsx b/public/components/page/Page.jsx index dade74d..807b25f 100644 --- a/public/components/page/Page.jsx +++ b/public/components/page/Page.jsx @@ -33,25 +33,23 @@ class Page extends React.Component { } render() { + let { title, style, className } = this.props; + let clazzes = "c-page"; - if(this.props.className) clazzes += " " + this.props.className; + if(className) clazzes += " " + className; - let title; - if( - (typeof this.props.title === typeof undefined || - typeof this.props.title.length === typeof undefined || - !this.props.title.length) && this.props.style != "home-page" - ) { + 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!"); } else { - title = { this.props.title } + titleHelmet = { this.props.title } } return (
- { title } + { titleHelmet } { this.props.children }
diff --git a/public/components/page/Routes.jsx b/public/components/page/Routes.jsx index c4f9f43..1673328 100644 --- a/public/components/page/Routes.jsx +++ b/public/components/page/Routes.jsx @@ -26,24 +26,28 @@ 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 Header from './../header/Header'; import Footer from './../footer/Footer'; -//Pages -import Homepage from './home/Homepage'; -import ContactPage from './contact/ContactPage'; +const PageLoading = (props) => { + if(props.error) return Loading Error; + if(props.pastDelay) return Loading...; + return null; +}; -import PrivacyPolicyPage from './legal/privacy/PrivacyPolicyPage'; - -const RouteWrapper = (props) => { - let newProps = Object.assign({}, props); +export const RouteWrapper = (props) => { return ( { - let CustomTag = props.page; + let CustomLoadable = Loadable({ + loader: props.page, + loading: PageLoading + }); + let CustomTag = Not loading; return (
- +
); @@ -57,7 +61,7 @@ class Routes extends React.Component { } render() { - const { match, location, history } = this.props; + const { match, location, history, children } = this.props; return ( @@ -71,10 +75,7 @@ class Routes extends React.Component { onEntering={ this.props.onEntering } > - - - - + { children } diff --git a/public/components/page/contact/ContactPage.jsx b/public/pages/contact/ContactPage.jsx similarity index 91% rename from public/components/page/contact/ContactPage.jsx rename to public/pages/contact/ContactPage.jsx index 54320f7..ddcc033 100644 --- a/public/components/page/contact/ContactPage.jsx +++ b/public/pages/contact/ContactPage.jsx @@ -25,15 +25,25 @@ import React from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; +import Forms from '@common/Forms'; + +//Actions +import { openModal } from '@public/actions/ModalActions'; + //Components -import Page, { PageBoundary } from './../Page'; +import Page, { PageBoundary } from '@components/page/Page'; import Language from '@public/language/Language'; +import Section, { + BodySection, + ClearSection, + SplitSection, + Split +} from '@components/section/Section'; //Objects -import ElementScrollFader from './../../../objects/animation/fade/ElementScrollFader'; -import ContentBox from './../../../objects/content/ContentBox'; -import { Title, Heading1, Paragraph } from './../../../objects/typography/Typography'; -//import Forms from './../../../common/Forms'; +import ElementScrollFader from '@objects/animation/fade/ElementScrollFader'; +import ContentBox from '@objects/content/ContentBox'; +import { Title, Heading1, Paragraph } from '@objects/typography/Typography'; import Input, { Form, FormManager, @@ -41,15 +51,8 @@ import Input, { TextArea, Label, ButtonGroup -} from './../../../objects/input/Input'; -import Section, { - BodySection, - ClearSection, - SplitSection, - Split -} from './../../section/Section'; -import { openModal } from './../../../actions/ModalActions'; -import Modal from './../../../objects/modal/Modal'; +} from '@objects/input/Input'; +import Modal from '@objects/modal/Modal'; class ContactPage extends React.Component { constructor(props) { diff --git a/public/components/page/home/HomePage.jsx b/public/pages/home/HomePage.jsx similarity index 98% rename from public/components/page/home/HomePage.jsx rename to public/pages/home/HomePage.jsx index 9aa7961..0c8c0b4 100644 --- a/public/components/page/home/HomePage.jsx +++ b/public/pages/home/HomePage.jsx @@ -23,7 +23,7 @@ import React from 'react'; import { connect } from 'react-redux'; -import Page from './../Page'; +import Page from '@components/page/Page'; import Language from '@public/language/Language' import BannerSection from './sections/BannerSection'; diff --git a/public/components/page/home/sections/BannerSection.jsx b/public/pages/home/sections/BannerSection.jsx similarity index 96% rename from public/components/page/home/sections/BannerSection.jsx rename to public/pages/home/sections/BannerSection.jsx index 27cf358..77c43da 100644 --- a/public/components/page/home/sections/BannerSection.jsx +++ b/public/pages/home/sections/BannerSection.jsx @@ -34,7 +34,7 @@ export default (props) => { return ( { let fakeURL = props.href; @@ -113,7 +113,7 @@ export default (props) => { return ( @@ -139,7 +139,7 @@ export default (props) => { href="//www.kopalife.com/products/kube-customise" fromLeft="top" fromRight="bottom" - src={ require('./../../../../assets/images/work-showcase/kopalife.png') } + src={ require('@assets/images/work-showcase/kopalife.png') } title={ Language.get("pages.home.work.kopa.heading") } description={ Language.get("pages.home.work.kopa.description") } /> @@ -150,7 +150,7 @@ export default (props) => { fromLeft="right" fromRight="right" swap - src={ require('./../../../../assets/images/work-showcase/smai.svg') } + src={ require('@assets/images/work-showcase/smai.svg') } title={ Language.get("pages.home.work.smai.heading") } description={ Language.get("pages.home.work.smai.description") } /> @@ -161,7 +161,7 @@ export default (props) => { fromLeft="left" fromRight="left" - src={ require('./../../../../assets/images/work-showcase/ozhair.png') } + src={ require('@assets/images/work-showcase/ozhair.png') } title={ Language.get("pages.home.work.ozhair.heading") } description={ Language.get("pages.home.work.ozhair.description") } /> diff --git a/public/components/page/home/sections/PlatformsSection.jsx b/public/pages/home/sections/PlatformsSection.jsx similarity index 79% rename from public/components/page/home/sections/PlatformsSection.jsx rename to public/pages/home/sections/PlatformsSection.jsx index d0892ac..7f1c683 100644 --- a/public/components/page/home/sections/PlatformsSection.jsx +++ b/public/pages/home/sections/PlatformsSection.jsx @@ -60,7 +60,7 @@ export default (props) => { return ( @@ -74,14 +74,14 @@ export default (props) => {
{/* Shopify */} {/* React */} { {/* MonoGame */} { {/* PGSQL */} { {/* NodeJS */} { {/* C# */} { {/* PHP */} { {/* Java */} { {/* neto */} { {/* MySQL */} { {/* Heroku */} { {/* OpenGL */} { {/* Discord */} { {/* Twitch */} { {/* Twitter */} { {/* Google Cloud */} { return ( diff --git a/public/components/page/home/sections/PromoVideoSection.jsx b/public/pages/home/sections/PromoVideoSection.jsx similarity index 93% rename from public/components/page/home/sections/PromoVideoSection.jsx rename to public/pages/home/sections/PromoVideoSection.jsx index 8022f18..dea9eea 100644 --- a/public/components/page/home/sections/PromoVideoSection.jsx +++ b/public/pages/home/sections/PromoVideoSection.jsx @@ -41,8 +41,8 @@ export default (props) => { diff --git a/public/components/page/legal/privacy/PrivacyPolicyPage.jsx b/public/pages/legal/privacy/PrivacyPolicyPage.jsx similarity index 96% rename from public/components/page/legal/privacy/PrivacyPolicyPage.jsx rename to public/pages/legal/privacy/PrivacyPolicyPage.jsx index e485a05..484c391 100644 --- a/public/components/page/legal/privacy/PrivacyPolicyPage.jsx +++ b/public/pages/legal/privacy/PrivacyPolicyPage.jsx @@ -24,8 +24,10 @@ import React from 'react'; import { connect } from 'react-redux'; import Language from '@public/language/Language'; -import Page, { PageBoundary } from './../../Page'; + +import Page, { PageBoundary } from '@components/page/Page'; import { BodySection, ClearSection } from '@components/section/Section'; + import { Title } from '@objects/typography/Typography'; const PrivacyPolicyPage = (props) => { diff --git a/webpack.config.js b/webpack.config.js index 5da014b..49f966c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -32,7 +32,9 @@ module.exports = { '@public': path.resolve(__dirname, './public'), '@objects': path.resolve(__dirname, './public/objects'), '@components': path.resolve(__dirname, './public/components'), - '@assets': path.resolve(__dirname, './public/assets') + '@assets': path.resolve(__dirname, './public/assets'), + '@pages': path.resolve(__dirname, './public/pages'), + '@common': path.resolve(__dirname, './common/') } }, @@ -63,6 +65,9 @@ module.exports = { } ], "@babel/preset-react" + ], + "plugins": [ + '@babel/plugin-syntax-dynamic-import' ] } }