Allow redux state to flow through Header component into LanguageDropDown/NodeDropDown Components.

This commit is contained in:
Daniel Ternyak 2017-04-14 01:20:39 -05:00
parent c890c8872a
commit 024c14610b
1 changed files with 39 additions and 7 deletions

View File

@ -1,6 +1,7 @@
import React, {Component} from 'react' import React, {Component} from 'react'
import NodeDropdownComponent from './components/NodeDropdownComponent' import NodeDropdownComponent from './components/NodeDropdownComponent'
import LanguageDropDownComponent from './components/LanguageDropdownComponent' import LanguageDropDownComponent from './components/LanguageDropdownComponent'
import PropTypes from 'prop-types';
export default class Header extends Component { export default class Header extends Component {
constructor(props) { constructor(props) {
@ -8,17 +9,48 @@ export default class Header extends Component {
} }
static propTypes = { static propTypes = {
title: React.PropTypes.string, // LanguageDropDownComponentProps
toggleSidebar: React.PropTypes.func, changeLanguage: PropTypes.func,
onHeaderRightButtonClick: React.PropTypes.func, toggleLanguageDropdown: PropTypes.func,
isLoggedIn: React.PropTypes.bool languageSelection: PropTypes.number,
languageToggle: PropTypes.bool,
// NodeDropdownComponentProps
changeNode: PropTypes.func,
toggleNodeDropdown: PropTypes.func,
nodeSelection: PropTypes.number,
nodeToggle: PropTypes.bool
}; };
render() { render() {
let {
languageSelection,
changeLanguage,
toggleLanguageDropdown,
languageToggle,
changeNode,
toggleNodeDropdown,
nodeSelection,
nodeToggle
} = this.props;
let LanguageDropDownComponentProps = {
languageSelection,
changeLanguage,
toggleLanguageDropdown,
languageToggle,
}
let NodeDropdownComponentProps = {
changeNode,
toggleNodeDropdown,
nodeSelection,
nodeToggle
}
return ( return (
<section className="bg-gradient header-branding"> <section className="bg-gradient header-branding">
<section className="container"> <section className="container">
<a className="brand" href="https://www.myetherwallet.com/" aria-label="Go to homepage"> <a className="brand" href="/" aria-label="Go to homepage">
{/* TODO - don't hardcode image path*/} {/* TODO - don't hardcode image path*/}
<img <img
src={"https://www.myetherwallet.com/images/logo-myetherwallet.svg"} height="64px" src={"https://www.myetherwallet.com/images/logo-myetherwallet.svg"} height="64px"
@ -30,9 +62,9 @@ export default class Header extends Component {
Open-Source &amp; Client-Side Ether Wallet · v3.6.0 Open-Source &amp; Client-Side Ether Wallet · v3.6.0
</span> </span>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<LanguageDropDownComponent/> <LanguageDropDownComponent {...LanguageDropDownComponentProps}/>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<NodeDropdownComponent/> <NodeDropdownComponent {...NodeDropdownComponentProps}/>
</div> </div>
</section> </section>
</section> </section>