Add Content and LeftMenu

app/containers/App/index.js

@@ -15,7 +15,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { selectPlugins } from './selectors';
-import { registerPlugin } from './actions';
 
 import styles from './styles.css';
 
@@ -26,19 +25,8 @@ export class App extends React.Component { // eslint-disable-line react/prefer-s
   };
 
   render() {
-    // Plugins list
-    const pluginsList = this.props.plugins;
-
-    // Generate the list of plugins jsx
-    const plugins = pluginsList.map(plugin => <li>{plugin.name}</li>);
-
     return (
       <div className={styles.container}>
-        <button onClick={this.props.onRegisterPluginClicked}>Register plugin</button>
-        <p>Plugins</p>
-        <ul>
-          {plugins}
-        </ul>
         {React.Children.toArray(this.props.children)}
       </div>
     );
@@ -57,7 +45,6 @@ const mapStateToProps = createSelector(
 
 function mapDispatchToProps(dispatch) {
   return {
-    onRegisterPluginClicked: () => dispatch(registerPlugin({ name: 'New Plugin' })),
     dispatch,
   };
 }

app/containers/Content/index.js

@@ -0,0 +1,28 @@
+/*
+ *
+ * Content
+ *
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import styles from './styles.css';
+
+export class Content extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div className={styles.content}>
+        <p>Content</p>
+      </div>
+    );
+  }
+}
+
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+  };
+}
+
+export default connect(mapDispatchToProps)(Content);

app/containers/Content/styles.css

@@ -0,0 +1,3 @@
+.content { /* stylelint-disable */
+
+}

app/containers/Content/tests/index.test.js

@@ -0,0 +1,11 @@
+// import Content from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<Content />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

app/containers/HomePage/index.js

@@ -10,16 +10,38 @@
  */
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import messages from './messages';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { selectPlugins } from '../App/selectors';
+import LeftMenu from '../LeftMenu';
+import Content from '../Content';
 
-export default class HomePage extends React.Component { // eslint-disable-line react/prefer-stateless-function
+export class HomePage extends React.Component { // eslint-disable-line react/prefer-stateless-function
 
   render() {
     return (
-      <h1>
-        <FormattedMessage {...messages.header} />
-      </h1>
+      <div>
+        <LeftMenu {...this.props}></LeftMenu>
+        <Content></Content>
+      </div>
     );
   }
 }
+
+HomePage.propTypes = {
+  plugins: React.PropTypes.object,
+  onRegisterPluginClicked: React.PropTypes.func,
+};
+
+const mapStateToProps = createSelector(
+  selectPlugins(),
+  (plugins) => ({ plugins })
+);
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

app/containers/LeftMenu/index.js

@@ -0,0 +1,37 @@
+/*
+ *
+ * LeftMenu
+ *
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import styles from './styles.css';
+
+export class LeftMenu extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    const links = this.props.plugins.map(plugin => <li>{plugin.name}</li>);
+
+    return (
+      <div>
+        <p>Links</p>
+        <ul className={styles.leftMenu}>
+          {links}
+        </ul>
+      </div>
+
+    );
+  }
+}
+
+LeftMenu.propTypes = {
+  plugins: React.PropTypes.object,
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+  };
+}
+
+export default connect(mapDispatchToProps)(LeftMenu);

app/containers/LeftMenu/styles.css

@@ -0,0 +1,3 @@
+.leftMenu { /* stylelint-disable */
+
+}

app/containers/LeftMenu/tests/index.test.js

@@ -0,0 +1,11 @@
+// import LeftMenu from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('<LeftMenu />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});