Merge pull request #542 from alepop/506-fix-header-component

Fix header component - Closes #506

src/components/account/accountComponent.js

@@ -11,9 +11,17 @@ import { getAccountStatus } from '../../utils/api/account';
  * @param {object} props - include properties of component
  */
 class AccountComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.update = this.update.bind(this);
+  }
   componentDidMount() {
     this.update();
-    document.addEventListener('beat', this.update.bind(this));
+    document.addEventListener('beat', this.update);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('beat', this.update);
   }
 
   update() {

src/components/header/header.css

@@ -16,3 +16,7 @@
 .material-icons{
     font-size: 24px !important;
 }
+
+.menu {
+    right: -16px !important;
+}

src/components/header/headerElement.js

@@ -6,44 +6,47 @@ import styles from './header.css';
 import VerifyMessage from '../signVerify/verifyMessage';
 import SignMessage from '../signVerify/signMessage';
 import Send from '../send';
+import PrivateWrapper from '../privateWrapper';
 
 const HeaderElement = props => (
   <header className={styles.wrapper}>
     <img className={styles.logo} src={logo} alt="logo" />
-    <IconMenu
-      className={`${styles.iconButton} main-menu-icon-button`}
-      icon="more_vert"
-      position="topRight"
-      menuRipple
-      theme={styles}
-    >
-      <MenuItem caption="Register second passphrase" />
-      <MenuItem caption="Register as delegate" />
-      <MenuItem caption="Sign message"
-        className='sign-message'
+    <PrivateWrapper>
+      <IconMenu
+        className={`${styles.iconButton} main-menu-icon-button`}
+        icon="more_vert"
+        position="topRight"
+        menuRipple
+        theme={styles}
+      >
+        <MenuItem caption="Register second passphrase" />
+        <MenuItem caption="Register as delegate" />
+        <MenuItem caption="Sign message"
+          className='sign-message'
+          onClick={() => props.setActiveDialog({
+            title: 'Sign message',
+            childComponentProps: {
+              account: props.account,
+            },
+            childComponent: SignMessage,
+          })}
+        />
+        <MenuItem caption="Verify message"
+          className='verify-message'
+          onClick={() => props.setActiveDialog({
+            title: 'Verify message',
+            childComponent: VerifyMessage,
+          })}
+        />
+      </IconMenu>
+      <Button className={`${styles.button} logout-button`} raised onClick={props.logOut}>logout</Button>
+      <Button className={`${styles.button} send-button`}
+        raised primary
         onClick={() => props.setActiveDialog({
-          title: 'Sign message',
-          childComponentProps: {
-            account: props.account,
-          },
-          childComponent: SignMessage,
-        })}
-      />
-      <MenuItem caption="Verify message"
-        className='verify-message'
-        onClick={() => props.setActiveDialog({
-          title: 'Verify message',
-          childComponent: VerifyMessage,
-        })}
-      />
-    </IconMenu>
-    <Button className={`${styles.button} logout-button`} raised>logout</Button>
-    <Button className={`${styles.button} send-button`}
-      raised primary
-      onClick={() => props.setActiveDialog({
-        title: 'Send',
-        childComponent: Send,
-      })}>Send</Button>
+          title: 'Send',
+          childComponent: Send,
+        })}>Send</Button>
+      </PrivateWrapper>
   </header>
 );
 

src/components/header/index.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
 import { dialogDisplayed } from '../../actions/dialog';
+import { accountLoggedOut } from '../../actions/account';
 import HeaderElement from './headerElement';
 
 const mapStateToProps = state => ({
@@ -8,6 +9,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   setActiveDialog: data => dispatch(dialogDisplayed(data)),
+  logOut: () => dispatch(accountLoggedOut()),
 });
 
 const Header = connect(

src/components/privateWrapper/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+export const PrivateWrapperComponent = ({ isAuthenticated, children }) => (
+    isAuthenticated && <span>{ children }</ span>
+);
+
+const mapStateToProps = state => ({
+  isAuthenticated: !!state.account.publicKey,
+});
+
+export default connect(mapStateToProps)(PrivateWrapperComponent);

src/components/privateWrapper/index.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+import { PrivateWrapperComponent } from '.';
+
+const Private = () => <h1>Private</h1>;
+
+describe('PrivateWrapperComponent', () => {
+  const isAuth = isAuthenticated => (
+    shallow(
+        <PrivateWrapperComponent isAuthenticated={isAuthenticated}>
+            <Private/ >
+        </PrivateWrapperComponent>,
+    )
+  );
+  it('should render children components if user is authenticated', () => {
+    const wrapper = isAuth(true);
+    expect(wrapper.find(Private)).to.have.length(1);
+  });
+
+  it('should do not render children components if user is not authenticated', () => {
+    const wrapper = isAuth(false);
+    expect(wrapper.find(Private)).to.have.length(0);
+  });
+});

src/components/transactions/transactionsComponent.js

@@ -39,7 +39,7 @@ class Transactions extends React.Component {
           length: parseInt(res.count, 10),
         });
       })
-      .catch(error => console.error(error.message));
+      .catch(error => console.error(error.message)); //eslint-disable-line
     }
   }