Added Redux support

package.json

@@ -27,9 +27,11 @@
     "babel-polyfill": "^6.26.0",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
+    "react-redux": "^5.0.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
-    "react-tap-event-plugin": "^3.0.2"
+    "react-tap-event-plugin": "^3.0.2",
+    "redux": "^4.0.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.3",

public/App.jsx

@@ -41,7 +41,7 @@ class App extends React.Component {
           <Navbar />
           <main className="o-main">
             <Switch>
-              <Route exact path="/" component={ KitchenSinkPage } />
+              <Route exact path="/" component={ Homepage } />
             </Switch>
           </main>
         </div>

public/actions/LanguageActions.js

@@ -0,0 +1,34 @@
+// 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 Language from './../language/Language';
+
+export const SET_LANGUAGE = "SET_LANGUAGE";
+export const LANGUAGES = Language.getLanguages();
+
+export function setLanguage(language) {
+  return {
+    type: SET_LANGUAGE,
+    code: language
+  }
+};

public/index.jsx

@@ -25,12 +25,27 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { createStore, applyMiddleware } from 'redux';
+import { Provider } from 'react-redux';
+import RootReducer from './reducers/RootReducer'
 
-import App from './App';
-
+//Import Stylesheet
 import Styles from './styles/index';
 
+//Import Base Component
+import App from './App';
+
+//Create our redux middleware
+const store = createStore(RootReducer);
+const unsubscribe = store.subscribe(() => {
+  console.log(store.getState());
+});
+
 ReactDOM.render(
-  <App />,
+  (
+    <Provider store={store}>
+      <App />
+    </Provider>
+  ),
   document.getElementById('app')
 );

public/language/en-AU.jsx

@@ -1,6 +1,10 @@
 import React from 'react';
 
 module.exports = {
+  "site": {
+    "name": "domsPlace"
+  },
+  
   "navbar": {
     "home": "Home",
     "about": "About",

public/nav/navbar/Navbar.jsx

@@ -22,14 +22,18 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
+import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom'
 import Language from './../../language/Language';
 
-const NAVBAR_LINKS = {
-  "home": "/",
-  "about": "/about",
-  "contact": "/contact"
-};
+const NavbarLink = function(props) {
+  return (
+    <NavLink to={ props.to } className="o-navbar__link">
+      { Language.get("navbar." + props.title) }
+    </NavLink>
+  );
+}
+
 
 class Navbar extends React.Component {
   constructor(props) {
@@ -37,17 +41,6 @@ class Navbar extends React.Component {
   }
 
   render() {
-    let links = [];
-    let keys = Object.keys(NAVBAR_LINKS);
-    for(let i = 0; i < keys.length; i++) {
-      let k = keys[i];
-      links.push(
-        <NavLink key={k} to={NAVBAR_LINKS[k]} className="o-navbar__link">
-          { Language.get("navbar." + k) }
-        </NavLink>
-      );
-    }
-
     return (
       <section className="o-navbar__section is-stuck">
         <nav className="o-navbar">
@@ -56,14 +49,23 @@ class Navbar extends React.Component {
             <img
               src={ require('./../../images/logo.svg') }
               className="o-navbar__logo"
-              alt="domsPlace"
+              alt={ Language.get("site.name") }
             />
           </a>
-          { links }
+
+          <NavbarLink to="/" title="home" />
+          <NavbarLink to="/about" title="about" />
+          <NavbarLink to="/contact" title="contact" />
         </nav>
       </section>
     );
   }
 }
 
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+
 export default Navbar;

public/page/home/Homepage.jsx

@@ -23,6 +23,7 @@
 
 import React from 'react';
 import Page from './../Page';
+import VideoSection from './../../section/video/VideoSection';
 
 class Homepage extends React.Component {
   constructor(props) {
@@ -32,7 +33,9 @@ class Homepage extends React.Component {
   render() {
     return (
       <Page style="home-page">
-        Homepage
+        <VideoSection>
+          Test
+        </VideoSection>
       </Page>
     );
   }

public/reducers/LanguageReducer.js

@@ -0,0 +1,47 @@
+// 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 Language from './../language/Language';
+import { SET_LANGUAGE, LANGUAGES } from './../actions/LanguageActions';
+
+const initialState = {
+  code: Language.getLanguage()
+};
+
+function language(state, action) {
+  if(typeof state === typeof undefined) {
+    state = initialState;
+  }
+
+  switch(action.type) {
+    case SET_LANGUAGE:
+      if(!(action.theme)) return state;
+      return {
+        code: action.code
+      };
+    default:
+      return state;
+  }
+}
+
+export default language;

public/reducers/RootReducer.js

@@ -0,0 +1,32 @@
+// 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 { combineReducers } from 'redux';
+
+import LanguageReducer from './LanguageReducer';
+
+const rootReducer = combineReducers({
+  language: LanguageReducer
+});
+
+export default rootReducer;

public/section/Section.jsx

@@ -30,9 +30,11 @@ class Section extends React.Component {
 
   render() {
     return (
-      <section class="o-section">
+      <section className={"c-section" + (this.props.full?" c-section--full":"") }>
         { this.props.children }
       </section>
     );
   }
 }
+
+export default Section;

public/section/video/VideoSection.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 Section from './../Section';
+
+class VideoSection extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Section full={this.props.full}>
+        <video class="c-video-section">
+
+        </video>
+
+        { this.props.children }
+      </Section>
+    );
+  }
+}
+
+export default VideoSection;

public/styles/components/_section.scss

@@ -0,0 +1,7 @@
+.c-section {
+  width: 100%;
+
+  &--full {
+    height: 100%;
+  }
+}

public/styles/objects/_app.scss

@@ -10,6 +10,7 @@
 .o-app {
   display: inline-block;//Fixes collapsing margins on children.
   min-height: 100vh;
+  width: 100%;
 
   //Civil Twilight
   &--style-civil-twilight {