From 370b556ed18c9c5b52530c04f22506d4186a2396 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Sat, 10 Mar 2018 22:25:03 +1100
Subject: [PATCH] Added language support

---
 public/actions/language.js              | 11 ++++++++++
 public/components/forms/ContactForm.jsx | 25 ++++++++++++++--------
 public/components/pages/ContactPage.jsx | 15 ++++++++++---
 public/language/Language.jsx            | 28 ++++++++++++++++++++++++-
 public/language/en-AU.jsx               | 20 +++++++++++++++++-
 public/reducers/language.js             | 26 +++++++++++++++++++++++
 public/reducers/rootReducer.js          |  3 ++-
 7 files changed, 113 insertions(+), 15 deletions(-)
 create mode 100644 public/actions/language.js
 create mode 100644 public/reducers/language.js

diff --git a/public/actions/language.js b/public/actions/language.js
new file mode 100644
index 0000000..e9ca5cf
--- /dev/null
+++ b/public/actions/language.js
@@ -0,0 +1,11 @@
+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
+  }
+};
diff --git a/public/components/forms/ContactForm.jsx b/public/components/forms/ContactForm.jsx
index 938a456..5fb31f9 100644
--- a/public/components/forms/ContactForm.jsx
+++ b/public/components/forms/ContactForm.jsx
@@ -10,6 +10,8 @@ import React from 'react';
 
 import { Form, InputGroup, TextInput } from './Form';
 import Button from './../components/Button';
+import { connect } from 'react-redux';
+import Language from './../../language/Language';
 
 class ContactForm extends React.Component {
   constructor(props) {
@@ -19,23 +21,28 @@ class ContactForm extends React.Component {
   render() {
     return (
       <Form className={this.props.className}>
-        <InputGroup title="Name">
-          <TextInput placeholder="Enter your name." />
+        <InputGroup title={Language.get("contact.form.name.label")} >
+          <TextInput placeholder={Language.get("contact.form.name.placeholder")} />
         </InputGroup>
 
-        <InputGroup title="Email">
-          <TextInput type="email" placeholder="Enter your email address." />
+        <InputGroup title={Language.get("contact.form.email.label")}>
+          <TextInput type="email" placeholder={Language.get("contact.form.email.placeholder")} />
         </InputGroup>
 
-        <InputGroup title="Message">
-          <TextInput multiline placeholder="Enter your message here." />
+        <InputGroup title={Language.get("contact.form.message.label")}>
+          <TextInput multiline placeholder={Language.get("contact.form.message.placeholder")} />
         </InputGroup>
 
-        <Button to="/">Home</Button>
-        <Button submit>Contact</Button>
+        <Button submit>{Language.get("contact.form.submit")}</Button>
       </Form>
     );
   }
 }
 
-export default ContactForm;
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+
+export default connect(mapStateToProps)(ContactForm);
diff --git a/public/components/pages/ContactPage.jsx b/public/components/pages/ContactPage.jsx
index 49fc375..140261a 100644
--- a/public/components/pages/ContactPage.jsx
+++ b/public/components/pages/ContactPage.jsx
@@ -17,6 +17,9 @@ import BodySection from './../sections/BodySection';
 
 import ContactForm from './../forms/ContactForm';
 
+import { connect } from 'react-redux';
+import Language from './../../language/Language';
+
 class ContactPage extends React.Component {
   constructor(props) {
     super(props);
@@ -27,10 +30,10 @@ class ContactPage extends React.Component {
       <Page>
         <PhoneSection />
         <BodySection>
-          <h1>Contact</h1>
+          <h1>{Language.get("contact.form.title")}</h1>
           <div className="c-page--style-container__split">
             <p className="c-page--style-container__split-part">
-              Want to get ahold of me and other lorem ipsum dolor?
+              {Language.get("contact.form.info")}
             </p>
             <ContactForm className="c-page--style-container__split-part" />
           </div>
@@ -40,4 +43,10 @@ class ContactPage extends React.Component {
   }
 }
 
-export default ContactPage;
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+
+export default connect(mapStateToProps)(ContactPage);
diff --git a/public/language/Language.jsx b/public/language/Language.jsx
index 681f671..625c461 100644
--- a/public/language/Language.jsx
+++ b/public/language/Language.jsx
@@ -10,11 +10,37 @@ class Language {
   }
 
   setLanguage(lang) {
+    this.langName = lang;
     this.data = LANGUAGES[lang];
   }
 
-  get(key) {
+  getLanguage() {
+    return this.langName;
+  }
 
+  get(key) {
+    return this.getRecursive(key.split(".")) || "Missing \"" + key + "\"";
+  }
+
+  getRecursive(key_array, data_obj) {
+    if(typeof data_obj === typeof undefined) data_obj = this.data;
+    if(typeof data_obj === typeof undefined) return null;
+
+    let k = key_array[0];
+    let o = data_obj[k];
+    if(typeof o === typeof undefined) return null;
+
+    //Awesome
+    if(key_array.length > 1) {
+      if(typeof o !== typeof {}) return null;
+      key_array.shift();
+      return this.getRecursive(key_array, o);
+    }
+    return o;
+  }
+
+  getLanguages() {
+    return Object.keys(LANGUAGES);
   }
 }
 
diff --git a/public/language/en-AU.jsx b/public/language/en-AU.jsx
index 216ae78..2a68bed 100644
--- a/public/language/en-AU.jsx
+++ b/public/language/en-AU.jsx
@@ -1,3 +1,21 @@
 module.exports = {
-  ""
+  "contact": {
+    "form": {
+      "title": "Contact",
+      "info": "Want to contact me and other lorem ipsum dolor sit amet.",
+      "name": {
+        "label": "Name",
+        "placeholder": "Enter your name."
+      },
+      "email": {
+        "label": "Email",
+        "placeholder": "Enter your email address.",
+      },
+      "message": {
+        "label": "Message",
+        "placeholder": "Enter your message here."
+      },
+      "submit": "Send"
+    }
+  }
 }
diff --git a/public/reducers/language.js b/public/reducers/language.js
new file mode 100644
index 0000000..39553a2
--- /dev/null
+++ b/public/reducers/language.js
@@ -0,0 +1,26 @@
+'use strict';
+
+import Language from './../language/Language';
+import { SET_LANGUAGE, LANGUAGES } from './../actions/language';
+
+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;
diff --git a/public/reducers/rootReducer.js b/public/reducers/rootReducer.js
index 4e341b4..6bdf757 100644
--- a/public/reducers/rootReducer.js
+++ b/public/reducers/rootReducer.js
@@ -2,10 +2,11 @@
 import {combineReducers} from 'redux';
 
 //Import Reducers
+import language from './language';
 
 //Create our Reducer
 const rootReducer = combineReducers({
-
+  language
 });
 
 //Export the root reducer