Crunched and clean all the components even more.

public/components/page/Page.jsx

@@ -24,22 +24,15 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Helmet } from "react-helmet";
+import { withLanguage } from '@public/language/Language';
 
 import Styles from './Page.scss';
 
-//Publics
-import Language from '@public/language/Language';
-
 //Components
 import PageBoundary from './boundary/PageBoundary';
 
-class Page extends React.Component {
+export default withLanguage(props => {
-  constructor(props) {
+  let { title, style, className, lang, children } = props;
-    super(props);
-  }
-
-  render() {
-    let { title, style, className } = this.props;
 
   let clazzes = `c-page ${className||""}`;
 
@@ -47,27 +40,18 @@ class Page extends React.Component {
   if((!title || !title.length) && style != "home-page") {
     console.exception(`This page (${style||className}) does not have a title!`);
   } else {
-      titleHelmet = <title>{ this.props.title }</title>
+    titleHelmet = <title>{ title }</title>
   }
 
   return (
     <div className={clazzes}>
-        <Helmet defaultTitle={ Language.get("site.title") } titleTemplate={ Language.get("site.titleTemplate") }>
+      <Helmet defaultTitle={ lang.site.title } titleTemplate={ lang.site.titleTemplate }>
         { titleHelmet }
       </Helmet>
-        { this.props.children }
+      { children }
     </div>
   );
-  }
+});
-}
-
-const mapStateToProps = function(state) {
-  return {
-    code: state.language.code
-  }
-}
-
-export default connect(mapStateToProps)(Page);
 
 export {
   PageBoundary

public/components/page/boundary/PageBoundary.jsx

@@ -29,13 +29,12 @@ export default (props) => {
   let newProps = { ...props };
   let { full, small, className } = props;
 
-  delete newProps.full;
+  ["full","small"].forEach(e => delete newProps[e]);
-  delete newProps.small;
 
   let clazzes = "c-page-boundary";
-  if(props.full) clazzes += " is-full";
+  if(full) clazzes += " is-full";
-  if(props.small) clazzes += " is-small";
+  if(small) clazzes += " is-small";
-  if(props.className) clazzes += " " + props.className;
+  if(className) clazzes += ` ${className}`
 
   return (
     <div {...newProps} className={ clazzes }>

public/components/page/error/ErrorPage.jsx

@@ -22,12 +22,13 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+import { withLanguage} from '@public/language/Language';
 
-export default props => {
+export default withLanguage(props => {
-  let { className } = props;
+  let { className, lang } = props;
   return (
-    <Page className="c-error-page">
+    <Page className={`c-error-page ${className||""}`} title={lang.pages.error.title}>
-      An error occured! Try again later.
+      <p>{ lang.pages.error.body }</p>
     </Page>
   );
-};
+});

public/components/page/loading/LoadingPage.jsx

@@ -22,6 +22,7 @@
 // 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 './LoadingPage.scss';
 
@@ -29,12 +30,12 @@ import Page from '@components/Page/Page';
 import Loader from '@objects/loading/Loader';
 
 
-export default props => {
+export default withLanguage(props => {
-  let { className } = props;
+  let { className, lang } = props;
 
   return (
-    <Page className={`o-loading-page ${className||''}`} title="Loading...">
+    <Page className={`o-loading-page ${className||''}`} title={lang.pages.loading.title}>
       <Loader />
     </Page>
   );
-};
+});

public/components/section/Section.jsx

@@ -25,7 +25,7 @@ import React from 'react';
 
 import Styles from './Section.scss';
 
-export default (props) => {
+export default props => {
   let newProps = {...props};
   let { full, className, children } = props;
 
@@ -35,9 +35,7 @@ export default (props) => {
   if(full) clazz += " is-full";
   if(className) clazz += ` ${className}`;
 
-  return (
+  return <section {...newProps} className={clazz} />;
-    <section {...newProps} className={clazz} />
-  );
 }
 
 import BodySection from './body/BodySection';

public/components/section/body/BodySection.jsx

@@ -27,11 +27,4 @@ import Styles from './BodySection.scss';
 
 import Section from './../Section';
 
-export default function(props) {
+export default props => <Section {...props} className={`c-body-section ${props.className||""}`} />;
-  let clazz = "c-body-section";
-  if(props.className) clazz += ` ${props.className}`;
-
-  return (
-    <Section {...props} className={clazz} />
-  );
-};

public/components/section/layout/ClearSection.jsx

@@ -27,8 +27,4 @@ import Styles from './ClearSection.scss';
 
 import Section from './../Section';
 
-export default (props) => {
+export default props => <Section {...props} className={`c-clear-section ${props.className||""}`} />;
-  let clazz = "c-clear-section";
-  if(props.className) clazz += " " + props.className;
-  return <Section {...props} className={clazz} />;
-};

public/components/section/layout/SplitSection.jsx

@@ -29,31 +29,27 @@ import Section from './../Section';
 
 export default (props) => {
   let { align, className } = props;
-  let newProps = {...props};
-
   align = align || "stretched";
 
   let clazz = "c-split-section is-" + align;
   if(className) clazz += ` ${className}`;
 
   return (
-    <Section {...newProps} className={clazz} />
+    <Section {...props} className={clazz} />
   )
 };
 
-const Split = function(props) {
+const Split = props => {
+  let newProps = {...props};
   let { padded, className, children } = props;
 
-  let clazz = "c-split-section__split";
+  ["padded"].forEach(e => delete newProps[e]);
 
+  let clazz = "c-split-section__split";
   if(padded) clazz += " is-padded";
   if(className) clazz += ` ${className}`;
 
-  return (
+  return <div {...newProps} className={clazz} />;
-    <div className={clazz}>
-      { children }
-    </div>
-  );
 }
 
 

public/components/section/video/VideoSection.jsx

@@ -31,24 +31,19 @@ import Video from '@objects/video/Video';
 import Loader from '@objects/loading/Loader';
 
 export default (props) => {
-  let { full, className, sources } = props;
+  let { full, className, sources, children } = props;
   let videoProps = {...props};
   let sectionProps = {...props};
 
-
+  [ "autoPlay", "fill", "loop", "sources" ].forEach(e => delete sectionProps[e]);
-  [
+  [ "children" ].forEach(e => delete videoProps[e]);
-    "autoPlay", "fill", "loop", "sources"
-  ].forEach(e => delete sectionProps[e]);
-
-  delete videoProps.children;
 
   if(typeof props.autoPlay === typeof undefined) props.autoPlay = true;
   if(typeof props.loop === typeof undefined) props.loop = true;
   if(typeof props.fill === typeof undefined) props.fill = true;
 
-
   return (
-    <Section {...sectionProps} className={"c-video-section"+(className?` ${className}`:``)}>
+    <Section {...sectionProps} className={`c-video-section ${className|""}`}>
       <Video {...videoProps} className="c-video-section__video" sources={ sources ? sources : props } />
       { children }
     </Section>

public/language/en-AU.jsx

@@ -204,6 +204,15 @@ export default {
       "title": "Privacy Policy",
       "heading": "Privacy Policy",
       "policy": Policy
+    },
+
+    "error": {
+      "title": "Uh-Oh!",
+      "body": "An error occured! Try again later."
+    },
+
+    "loading": {
+      "title": "Please Wait..."
     }
   },