Merge pull request #654 from LiskHQ/567-unify-connect

Unify naming of components that use 'connect' - Closes #567

.storybook/config.js

@@ -6,9 +6,10 @@ function loadStories() {
   require('../src/components/dialog/stories');
   require('../src/components/formattedNumber/stories');
   require('../src/components/toaster/stories');
-  require('../src/components/signVerify/stories');
+  require('../src/components/signMessage/stories');
   require('../src/components/send/stories');
   require('../src/components/spinner/stories');
+  require('../src/components/verifyMessage/stories');
 }
 
 configure(loadStories, module);

src/components/account/account.js

@@ -3,7 +3,7 @@ import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import styles from './account.css';
 import Address from './address';
 import LiskAmount from '../liskAmount';
-import ClickToSend from '../send/clickToSend';
+import ClickToSend from '../clickToSend';
 import { toRawLsk } from '../../utils/lsk';
 
 /**

src/components/account/account.test.js

@@ -5,7 +5,7 @@ import { shallow, mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import store from '../../store';
 import Account from './account';
-import ClickToSend from '../send/clickToSend';
+import ClickToSend from '../clickToSend';
 
 
 describe('Account', () => {

src/components/clickToSend/clickToSend.css

@@ -0,0 +1,3 @@
+.clickable {
+  cursor: pointer;
+}

src/components/send/clickToSendComponent.js → src/components/clickToSend/clickToSend.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import styles from './send.css';
+import styles from './clickToSend.css';
 import Send from '../send';
 import { fromRawLsk } from '../../utils/lsk';
 
-
-const ClickToSendComponent = props => (
+const ClickToSend = props => (
   props.disabled ?
     props.children :
     <span className={`${styles.clickable} ${props.className}`}
@@ -20,4 +19,4 @@ const ClickToSendComponent = props => (
     </span>
 );
 
-export default ClickToSendComponent;
+export default ClickToSend;

src/components/send/clickToSendComponent.test.js → src/components/clickToSend/clickToSend.test.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
 import sinon from 'sinon';
-import ClickToSendComponent from './clickToSendComponent';
+import ClickToSend from './clickToSend';
 
 const Dummy = () => (<span />);
 
-describe('ClickToSendComponent', () => {
+describe('ClickToSend', () => {
   let setActiveDialog;
 
   beforeEach(() => {
@@ -15,27 +15,27 @@ describe('ClickToSendComponent', () => {
 
   it('allows open send modal with pre-filled address ', () => {
     const wrapper = mount(
-      <ClickToSendComponent address='16313739661670634666L'
-        setActiveDialog={setActiveDialog}><Dummy /></ClickToSendComponent>);
+      <ClickToSend address='16313739661670634666L'
+        setActiveDialog={setActiveDialog}><Dummy /></ClickToSend>);
     wrapper.simulate('click');
     expect(setActiveDialog).to.have.been.calledWith();
     expect(wrapper.find('Dummy')).to.have.length(1);
   });
 
   it('allows open send modal with pre-filled rawAmount ', () => {
     const wrapper = mount(
-      <ClickToSendComponent rawAmount='100000000'
-        setActiveDialog={setActiveDialog}><Dummy /></ClickToSendComponent>);
+      <ClickToSend rawAmount='100000000'
+        setActiveDialog={setActiveDialog}><Dummy /></ClickToSend>);
     wrapper.simulate('click');
     expect(setActiveDialog).to.have.been.calledWith();
     expect(wrapper.find('Dummy')).to.have.length(1);
   });
 
   it('should do nothing if props.disabled', () => {
     const wrapper = mount(
-      <ClickToSendComponent disabled={true}
+      <ClickToSend disabled={true}
         setActiveDialog={setActiveDialog}><Dummy />
-      </ClickToSendComponent>);
+      </ClickToSend>);
     wrapper.simulate('click');
     expect(wrapper.find('Dummy')).to.have.length(1);
   });

src/components/send/clickToSend.js → src/components/clickToSend/index.js

@@ -1,15 +1,12 @@
 import { connect } from 'react-redux';
 import { dialogDisplayed } from '../../actions/dialog';
-import ClickToSendComponent from './clickToSendComponent';
-
+import ClickToSend from './clickToSend';
 
 const mapDispatchToProps = dispatch => ({
   setActiveDialog: data => dispatch(dialogDisplayed(data)),
 });
 
-const ClickToSend = connect(
+export default connect(
   null,
   mapDispatchToProps,
-)(ClickToSendComponent);
-
-export default ClickToSend;
+)(ClickToSend);

src/components/send/clickToSend.test.js → src/components/clickToSend/index.test.js

@@ -4,24 +4,24 @@ import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import sinon from 'sinon';
 import * as dialogActions from '../../actions/dialog';
-import ClickToSend from './clickToSend';
+import ClickToSendHOC from './index';
 import store from '../../store';
 
 
-describe('Send Container', () => {
+describe('ClickToSendHOC', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(<Provider store={store}><ClickToSend /></Provider>);
+    wrapper = mount(<Provider store={store}><ClickToSendHOC /></Provider>);
   });
 
-  it('should render ClickToSendComponent', () => {
-    expect(wrapper.find('ClickToSendComponent')).to.have.lengthOf(1);
+  it('should render ClickToSend', () => {
+    expect(wrapper.find('ClickToSend')).to.have.lengthOf(1);
   });
 
-  it('should bind dialogDisplayed action to ClickToSendComponent props.setActiveDialog', () => {
+  it('should bind dialogDisplayed action to ClickToSend props.setActiveDialog', () => {
     const actionsSpy = sinon.spy(dialogActions, 'dialogDisplayed');
-    wrapper.find('ClickToSendComponent').props().setActiveDialog({});
+    wrapper.find('ClickToSend').props().setActiveDialog({});
     expect(actionsSpy).to.be.calledWith();
     actionsSpy.restore();
   });

src/components/dialog/dialogElement.test.js → src/components/dialog/dialog.test.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { Dialog } from 'react-toolbox/lib/dialog';
-import DialogElement from '../dialog/dialogElement';
+import { Dialog as ReactToolboxDialog } from 'react-toolbox/lib/dialog';
+import Dialog from './dialog';
 
-describe('DialogElement', () => {
+describe('Dialog', () => {
   let wrapper;
   const Dummy = props => (<div>DUMMY {props.name}</div>);
   const dialogProps = {
@@ -17,20 +17,20 @@ describe('DialogElement', () => {
   };
 
   beforeEach(() => {
-    wrapper = shallow(<DialogElement dialog={dialogProps} onCancelClick={() => {}}/>);
+    wrapper = shallow(<Dialog dialog={dialogProps} onCancelClick={() => {}}/>);
   });
 
   it('renders <Dialog /> component from react-toolbox', () => {
-    expect(wrapper.find(Dialog)).to.have.length(1);
+    expect(wrapper.find(ReactToolboxDialog)).to.have.length(1);
   });
 
   it('renders component passed in props.dialog.childComponent', () => {
-    wrapper = shallow(<DialogElement dialog={{ childComponent: Dummy }} onCancelClick={() => {}}/>);
+    wrapper = shallow(<Dialog dialog={{ childComponent: Dummy }} onCancelClick={() => {}}/>);
     expect(wrapper.find(Dummy)).to.have.length(1);
   });
 
   it('does not render a child component if none passed in props.dialog.childComponent', () => {
-    wrapper = shallow(<DialogElement dialog={{}} />);
+    wrapper = shallow(<Dialog dialog={{}} />);
     expect(wrapper.find(Dummy)).to.have.length(0);
   });
 

src/components/dialog/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { dialogHidden } from '../../actions/dialog';
-import DialogElement from './dialogElement';
+import Dialog from './dialog';
 
 const mapStateToProps = state => ({
   dialog: state.dialog,
@@ -10,9 +10,7 @@ const mapDispatchToProps = dispatch => ({
   onCancelClick: () => dispatch(dialogHidden()),
 });
 
-const Dialog = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps,
-)(DialogElement);
-
-export default Dialog;
+)(Dialog);

src/components/dialog/stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import Dialog from './dialogElement';
+import Dialog from './dialog';
 import Alert from './alert';
 
 const dialogContent = () => (<div>Hello</div>);

src/components/forging/index.test.js

@@ -3,7 +3,7 @@ import { expect } from 'chai';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
-import Forging from './index';
+import ForgingHOC from './index';
 
 describe('Forging HOC', () => {
   let wrapper;
@@ -18,7 +18,7 @@ describe('Forging HOC', () => {
         forgedBlocks: [],
       },
     });
-    wrapper = mount(<Provider store={store}><Forging /></Provider>);
+    wrapper = mount(<Provider store={store}><ForgingHOC /></Provider>);
   });
 
   it('should render Forging component', () => {

src/components/header/headerElement.js → src/components/header/header.js

@@ -4,15 +4,15 @@ import { IconMenu, MenuItem } from 'react-toolbox/lib/menu';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import logo from '../../assets/images/LISK-nano.png';
 import styles from './header.css';
-import VerifyMessage from '../signVerify/verifyMessage';
-import SignMessage from '../signVerify/signMessage';
+import VerifyMessage from '../verifyMessage';
+import SignMessage from '../signMessage';
 import RegisterDelegate from '../registerDelegate';
 import Send from '../send';
 import PrivateWrapper from '../privateWrapper';
 import SecondPassphraseMenu from '../secondPassphrase';
 import offlineStyle from '../offlineWrapper/offlineWrapper.css';
 
-const HeaderElement = props => (
+const Header = props => (
   <header className={`${grid.row} ${grid['between-xs']} ${styles.wrapper}`} >
     <div className={styles.logoWrapper}>
       <img className={styles.logo} src={logo} alt="logo" />
@@ -65,4 +65,4 @@ const HeaderElement = props => (
   </header>
 );
 
-export default HeaderElement;
+export default Header;

src/components/header/headerElement.test.js → src/components/header/header.test.js

@@ -4,10 +4,10 @@ import { shallow } from 'enzyme';
 import { Button } from 'react-toolbox/lib/button';
 import sinon from 'sinon';
 import styles from './header.css';
-import HeaderElement from './headerElement';
+import Header from './header';
 import logo from '../../assets/images/LISK-nano.png';
 
-describe('HeaderElement', () => {
+describe('Header', () => {
   let wrapper;
   let propsMock;
 
@@ -17,7 +17,7 @@ describe('HeaderElement', () => {
       account: {},
     };
     propsMock = sinon.mock(mockInputProps);
-    wrapper = shallow(<HeaderElement {...mockInputProps} />);
+    wrapper = shallow(<Header {...mockInputProps} />);
   });
 
   afterEach(() => {

src/components/header/index.js

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

src/components/header/index.test.js

@@ -5,31 +5,32 @@ import { Provider } from 'react-redux';
 import sinon from 'sinon';
 import * as accountActions from '../../actions/account';
 import * as dialogActions from '../../actions/dialog';
-import Header from './index';
+import Header from './header';
+import HeaderHOC from './index';
 import store from '../../store';
 
 
-describe('Header', () => {
+describe('HeaderHOC', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(<Provider store={store}><Header /></Provider>);
+    wrapper = mount(<Provider store={store}><HeaderHOC /></Provider>);
   });
 
-  it('should render HeaderElement', () => {
-    expect(wrapper.find('HeaderElement')).to.have.lengthOf(1);
+  it('should render Header', () => {
+    expect(wrapper.find(Header)).to.have.lengthOf(1);
   });
 
-  it('should bind accountLoggedOut action to HeaderElement props.logOut', () => {
+  it('should bind accountLoggedOut action to Header props.logOut', () => {
     const actionsSpy = sinon.spy(accountActions, 'accountLoggedOut');
-    wrapper.find('HeaderElement').props().logOut({});
+    wrapper.find(Header).props().logOut({});
     expect(actionsSpy).to.be.calledWith();
     actionsSpy.restore();
   });
 
-  it('should bind dialogDisplayed action to HeaderElement props.setActiveDialog', () => {
+  it('should bind dialogDisplayed action to Header props.setActiveDialog', () => {
     const actionsSpy = sinon.spy(dialogActions, 'dialogDisplayed');
-    wrapper.find('HeaderElement').props().setActiveDialog({});
+    wrapper.find(Header).props().setActiveDialog({});
     expect(actionsSpy).to.be.calledWith();
     actionsSpy.restore();
   });

src/components/loadingBar/index.test.js

@@ -2,15 +2,15 @@ import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
-import LoadingBar from './';
+import LoadingBarHOC from './';
 import store from '../../store';
 
 
-describe('LoadingBar Container', () => {
+describe('LoadingBarHOC', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = mount(<Provider store={store}><LoadingBar /></Provider>);
+    wrapper = mount(<Provider store={store}><LoadingBarHOC /></Provider>);
   });
 
   it('should render Send', () => {