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
// 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) {
export const setLanguage = language => {
return {
type: SET_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 Language from '@public/language/Language';
import { withLanguage } from '@public/language/Language';
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 FooterLink = props => {
let { title, className } = props;
return <NavLink {...props} className={`c-footer__link ${className||``}`} />;
};
class Footer extends React.Component {
constructor(props) {
super(props);
}
render() {
let { className } = this.props;
let { className, lang } = this.props;
return (
<footer className={"c-footer"+(className?` ${className}`:``)}>
@ -59,9 +55,9 @@ class Footer extends React.Component {
<div className="c-footer__inner">
<nav className="c-footer__links">
<FooterLink title="home" to="/" />
<FooterLink title="contact" to="/contact" />
<FooterLink title="privacy" to="/legal/privacy" />
<FooterLink to="/" children={ lang.footer.links.home } />
<FooterLink to="/contact" children={ lang.footer.links.contact } />
<FooterLink to="/legal/privacy" children={ lang.footer.links.privacy } />
</nav>
<div className="c-footer__copyright">
@ -76,10 +72,4 @@ class Footer extends React.Component {
}
}
const mapStateToProps = (state) => {
return {
code: state.language.code
}
}
export default connect(mapStateToProps)(Footer);
export default withLanguage(Footer);

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

@ -24,63 +24,56 @@
import React from 'react';
import { connect } from 'react-redux';
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 Language from '@public/language/Language';
import * as MenuActions from '@public/actions/MenuActions';
const HamburerMenuItem = (props) => {
const HamburerMenuItem = props => {
let { lang, link, className } = props;
className = className || "";
return (
<li {...props} className={`c-hamburger-menu__link c-hamburger-menu__link--${link} ${className}`}>
<NavLink to={ props.to } className="c-hamburger-menu__link-link">
{ Language.get(lang) }
<li
{...props}
className={`c-hamburger-menu__link c-hamburger-menu__link--${link} ${className||""}`}
>
<NavLink to={ props.to } className="c-hamburger-menu__link-link">{ lang }
</NavLink>
</li>
);
}
class HamburgerMenu extends React.Component {
constructor(props) {
super(props);
}
const HamburgerMenu = props => {
let { open, className, toggleMenu, lang } = props;
render() {
let { open, className, toggleMenu } = this.props;
let clazz = "c-hamburger-menu";
if(open) clazz += " is-open";
if(className) clazz += ` ${className}`;
let clazz = "c-hamburger-menu";
if(open) clazz += " is-open";
if(className) clazz += ` ${className}`;
return (
<div className={clazz}>
<button type="button" className="c-hamburger-menu__button" onClick={toggleMenu}>
<img src={ require('@assets/images/icons/hamburger.svg') } className="c-hamburger-menu__icon" />
</button>
return (
<div className={clazz}>
<button type="button" className="c-hamburger-menu__button" onClick={toggleMenu}>
<img src={ require('@assets/images/icons/hamburger.svg') } className="c-hamburger-menu__icon" />
</button>
<nav className="c-hamburger-menu__menu">
<ul className="c-hamburger-menu__links">
<HamburerMenuItem to="/" lang="navbar.home" link="home" />
<HamburerMenuItem to="/contact" lang="navbar.contact" link="contact" />
</ul>
</nav>
</div>
);
}
<nav className="c-hamburger-menu__menu">
<ul className="c-hamburger-menu__links">
<HamburerMenuItem to="/" lang={lang.navbar.home} link="home" />
<HamburerMenuItem to="/contact" lang={lang.navbar.contact} link="contact" />
</ul>
</nav>
</div>
);
}
const mapStateToProps = (state) => {
const mapStateToProps = state => {
return {
open: state.menu.open,
language: state.language.code
open: state.menu.open
}
}
const mapDispatchToProps = (dispatch) => {
const mapDispatchToProps = dispatch => {
return {
toggleMenu: function(theme) {
dispatch(MenuActions.toggleMenu());
@ -88,4 +81,4 @@ const mapDispatchToProps = (dispatch) => {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(HamburgerMenu);
export default connect(mapStateToProps, mapDispatchToProps)(withLanguage(HamburgerMenu));

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

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

31
public/language/Language.jsx
View File

@ -21,9 +21,13 @@
// 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 { connect } from 'react-redux';
import LanguageActions from './../actions/LanguageActions';
import enAU from './en-AU.jsx';
const LANGUAGES = {
export const LANGUAGES = {
'en-AU': enAU
}
@ -70,17 +74,30 @@ class Language {
return Object.keys(LANGUAGES);
}
}
const lang = new Language();
export default lang;
const LanguageTools = {
export const LanguageTools = {
random: function(someArray) {
return someArray[Math.floor(Math.random() * someArray.length)];
}
}
export {
LanguageTools
}
export const withLanguage = Wrapped => {
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);
};