YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleaning Language

Browse Source
This commit is contained in:
Dominic Masters
2018-10-28 21:21:00 +11:00
parent d03f2d7fc8
commit 2bf2a2301f
5 changed files with 107 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/actions/LanguageActions.js
View File

@ -21,12 +21,9 @@
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. // 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 SET_LANGUAGE = "SET_LANGUAGE";
export const LANGUAGES = Language.getLanguages();
export function setLanguage(language) { export const setLanguage = language => {
return { return {
type: SET_LANGUAGE, type: SET_LANGUAGE,
code: language code: language

32
public/components/footer/Footer.jsx
View File

@ -27,28 +27,24 @@ import { NavLink } from 'react-router-dom';
import FooterStyles from './Footer.scss'; import FooterStyles from './Footer.scss';
import Language from '@public/language/Language'; import { withLanguage } from '@public/language/Language';
import { PageBoundary } from '@components/page/Page'; import { PageBoundary } from '@components/page/Page';
const FooterLink = (props) => {
let { title, className } = props;
return (
<NavLink {...props} className={"c-footer__link"+(className?` ${className}`:``)}>
{ Language.get(`footer.links.${title}`) }
</NavLink>
);
}
const SITE_LAUNCH_TIMESTAMP = 1335830400000; const SITE_LAUNCH_TIMESTAMP = 1335830400000;
const FooterLink = props => {
let { title, className } = props;
return <NavLink {...props} className={`c-footer__link ${className||``}`} />;
};
class Footer extends React.Component { class Footer extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
render() { render() {
let { className } = this.props; let { className, lang } = this.props;
return ( return (
<footer className={"c-footer"+(className?` ${className}`:``)}> <footer className={"c-footer"+(className?` ${className}`:``)}>
@ -59,9 +55,9 @@ class Footer extends React.Component {
<div className="c-footer__inner"> <div className="c-footer__inner">
<nav className="c-footer__links"> <nav className="c-footer__links">
<FooterLink title="home" to="/" /> <FooterLink to="/" children={ lang.footer.links.home } />
<FooterLink title="contact" to="/contact" /> <FooterLink to="/contact" children={ lang.footer.links.contact } />
<FooterLink title="privacy" to="/legal/privacy" /> <FooterLink to="/legal/privacy" children={ lang.footer.links.privacy } />
</nav> </nav>
<div className="c-footer__copyright"> <div className="c-footer__copyright">
@ -76,10 +72,4 @@ class Footer extends React.Component {
} }
} }
const mapStateToProps = (state) => { export default withLanguage(Footer);
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(Footer);

39
public/components/nav/menu/HamburgerMenu.jsx
View File

@ -24,32 +24,27 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { withLanguage } from '@public/language/Language';
import * as MenuActions from '@public/actions/MenuActions';
import Styles from './HamburgerMenu.scss'; import Styles from './HamburgerMenu.scss';
import Language from '@public/language/Language'; const HamburerMenuItem = props => {
import * as MenuActions from '@public/actions/MenuActions';
const HamburerMenuItem = (props) => {
let { lang, link, className } = props; let { lang, link, className } = props;
className = className || "";
return ( return (
<li {...props} className={`c-hamburger-menu__link c-hamburger-menu__link--${link} ${className}`}> <li
<NavLink to={ props.to } className="c-hamburger-menu__link-link"> {...props}
{ Language.get(lang) } className={`c-hamburger-menu__link c-hamburger-menu__link--${link} ${className||""}`}
>
<NavLink to={ props.to } className="c-hamburger-menu__link-link">{ lang }
</NavLink> </NavLink>
</li> </li>
); );
} }
class HamburgerMenu extends React.Component { const HamburgerMenu = props => {
constructor(props) { let { open, className, toggleMenu, lang } = props;
super(props);
}
render() {
let { open, className, toggleMenu } = this.props;
let clazz = "c-hamburger-menu"; let clazz = "c-hamburger-menu";
if(open) clazz += " is-open"; if(open) clazz += " is-open";
@ -63,24 +58,22 @@ class HamburgerMenu extends React.Component {
<nav className="c-hamburger-menu__menu"> <nav className="c-hamburger-menu__menu">
<ul className="c-hamburger-menu__links"> <ul className="c-hamburger-menu__links">
<HamburerMenuItem to="/" lang="navbar.home" link="home" /> <HamburerMenuItem to="/" lang={lang.navbar.home} link="home" />
<HamburerMenuItem to="/contact" lang="navbar.contact" link="contact" /> <HamburerMenuItem to="/contact" lang={lang.navbar.contact} link="contact" />
</ul> </ul>
</nav> </nav>
</div> </div>
); );
} }
}
const mapStateToProps = (state) => { const mapStateToProps = state => {
return { return {
open: state.menu.open, open: state.menu.open
language: state.language.code
} }
} }
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = dispatch => {
return { return {
toggleMenu: function(theme) { toggleMenu: function(theme) {
dispatch(MenuActions.toggleMenu()); dispatch(MenuActions.toggleMenu());
@ -88,4 +81,4 @@ const mapDispatchToProps = (dispatch) => {
} }
} }
export default connect(mapStateToProps, mapDispatchToProps)(HamburgerMenu); export default connect(mapStateToProps, mapDispatchToProps)(withLanguage(HamburgerMenu));

42
public/components/nav/navbar/Navbar.jsx
View File

@ -22,34 +22,31 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react'; import React from 'react';
import { withRouter } from 'react-router';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom' import { NavLink } from 'react-router-dom'
import Styles from './Navbar.scss'; import { withLanguage } from '@public/language/Language';
import Language from '@public/language/Language'; import Styles from './Navbar.scss';
import { PageBoundary } from '@components/page/Page'; import { PageBoundary } from '@components/page/Page';
import HamburgerMenu from './../menu/HamburgerMenu'; import HamburgerMenu from './../menu/HamburgerMenu';
import Image from '@objects/image/Image'; import Image from '@objects/image/Image';
const NavbarLink = function(props) { const NavbarLink = props => {
let { to, exact, title } = props;
return ( return (
<NavLink to={ props.to } className="c-navbar__link" activeClassName="is-active" exact={props.exact}> <NavLink to={ to } className="c-navbar__link" activeClassName="is-active" exact={ exact }>
{ Language.get("navbar." + props.title) } { title }
</NavLink> </NavLink>
); );
} };
class Navbar extends React.Component { const Navbar = props => {
constructor(props) { let { lang } = props;
super(props);
}
render() {
return ( return (
<section className="c-navbar is-stuck"> <section className="c-navbar is-stuck">
<PageBoundary> <PageBoundary>
@ -58,18 +55,18 @@ class Navbar extends React.Component {
{/* Logo */} {/* Logo */}
<NavLink to="/" className="c-navbar__logo-container" activeClassName="is-active"> <NavLink to="/" className="c-navbar__logo-container" activeClassName="is-active">
<Image <Image
src={ require('./../../../assets/images/logo.svg') } src={ require('@assets/images/logo.svg') }
className="c-navbar__logo" className="c-navbar__logo"
alt={ Language.get("site.name") } alt={ lang.site.name }
title={ Language.get("site.name") } title={ lang.site.name }
width="780" width="780"
height="200" height="200"
/> />
</NavLink> </NavLink>
{/* Desktop / Tablet Screen Links */} {/* Desktop / Tablet Screen Links */}
<NavbarLink to="/" title="home" exact /> <NavbarLink to="/" title={lang.navbar.home} exact />
<NavbarLink to="/contact" title="contact" exact /> <NavbarLink to="/contact" title={lang.navbar.contact} exact />
{/* Hamburger Menu for smaller screens */} {/* Hamburger Menu for smaller screens */}
<HamburgerMenu className="c-navbar__hamburger" /> <HamburgerMenu className="c-navbar__hamburger" />
@ -78,12 +75,5 @@ class Navbar extends React.Component {
</section> </section>
); );
} }
}
const mapStateToProps = function(state) { export default withLanguage(Navbar);
return {
code: state.language.code
}
}
export default withRouter(connect(mapStateToProps)(Navbar));

29
public/language/Language.jsx
View File

@ -21,9 +21,13 @@
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { connect } from 'react-redux';
import LanguageActions from './../actions/LanguageActions';
import enAU from './en-AU.jsx'; import enAU from './en-AU.jsx';
const LANGUAGES = { export const LANGUAGES = {
'en-AU': enAU 'en-AU': enAU
} }
@ -70,17 +74,30 @@ class Language {
return Object.keys(LANGUAGES); return Object.keys(LANGUAGES);
} }
} }
const lang = new Language(); const lang = new Language();
export default lang; export default lang;
const LanguageTools = { export const LanguageTools = {
random: function(someArray) { random: function(someArray) {
return someArray[Math.floor(Math.random() * someArray.length)]; return someArray[Math.floor(Math.random() * someArray.length)];
} }
} }
export { export const withLanguage = Wrapped => {
LanguageTools let LanguageWrapper = props => {
return <Wrapped {...props} />;
};
return connect(state => {
return {
language: state.language.code,
lang: lang.data
} }
}, dispatch => {
return {
setLanguage: language => {
dispatch(LanguageActions.setLanguage(language));
}
};
})(LanguageWrapper);
};