Register plugin logic

app/containers/App/reducer.js

@@ -10,7 +10,7 @@ const initialState = fromJS({
 function appReducer(state = initialState, action) {
   switch (action.type) {
     case REGISTER_PLUGIN:
-      return state.setIn(['plugins', action.plugin.name], action.plugin);
+      return state.setIn(['plugins', action.plugin.id], action.plugin);
     default:
       return state;
   }

app/containers/Content/index.js

@@ -7,17 +7,38 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import styles from './styles.css';
+import { createSelector } from 'reselect';
+import { selectPlugins } from '../App/selectors';
 
 export class Content extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
+    let plugin;
+
+    this.props.plugins.map(p => {
+      plugin = p;
+      return p;
+    });
+
+    const Elem = plugin.mainComponent;
+
     return (
       <div className={styles.content}>
         <p>Content</p>
+        <Elem></Elem>
       </div>
     );
   }
 }
 
+Content.propTypes = {
+  plugins: React.PropTypes.object,
+  onRegisterPluginClicked: React.PropTypes.func,
+};
+
+const mapStateToProps = createSelector(
+  selectPlugins(),
+  (plugins) => ({ plugins })
+);
 
 function mapDispatchToProps(dispatch) {
   return {
@@ -25,4 +46,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(mapDispatchToProps)(Content);
+export default connect(mapStateToProps, mapDispatchToProps)(Content);

app/containers/HomePage/sagas.js

@@ -0,0 +1,42 @@
+// /**
+//  * Gets the repositories of the user from Github
+//  */
+//
+// import { take, call, put, select, fork, cancel } from 'redux-saga/effects';
+// import { LOCATION_CHANGE } from 'react-router-redux';
+// import { REGISTER_PLUGIN } from 'containers/App/constants';
+//
+// import { getAsyncInjectors } from 'utils/asyncInjectors';
+// // const { injectReducer, injectSagas } = getAsyncInjectors(store); // eslint-disable-line no-unused-vars
+// import { Router, Route, Link } from 'react-router'
+//
+// /**
+//  * Register plugin
+//  */
+// export function* registerPlugin() {
+//
+// }
+//
+// /**
+//  * Watches for REGISTER_PLUGIN action and calls handler
+//  */
+// export function* getPluginsWatcher() {
+//   yield call(registerPlugin);
+// }
+//
+// /**
+//  * Root saga manages watcher lifecycle
+//  */
+// export function* pluginData() {
+//   // Fork watcher so we can continue execution
+//   const watcher = yield fork(getPluginsWatcher);
+//
+//   // Suspend execution until location changes
+//   yield take(LOCATION_CHANGE);
+//   yield cancel(watcher);
+// }
+//
+// // Bootstrap sagas
+// export default [
+//   pluginData,
+// ];

app/containers/LeftMenu/index.js

@@ -8,10 +8,16 @@ import React from 'react';
 import { connect } from 'react-redux';
 import styles from './styles.css';
 import { Link } from 'react-router';
+import classNames from 'classnames';
 
 export class LeftMenu extends React.Component { // eslint-disable-line react/prefer-stateless-function
   render() {
-    const links = this.props.plugins.map(plugin => <li><Link to={`/${plugin.id}`}>{plugin.name}</Link></li>);
+    const links = this.props.plugins.map(plugin => {
+      const className = classNames({
+        active: this.props.params && this.props.params.plugin && this.props.params.plugin === plugin.id,
+      });
+      return <li className={className}><Link to={`/plugins/${plugin.id}`}>{plugin.name}</Link></li>;
+    });
 
     return (
       <ul className={styles.leftMenu}>
@@ -23,6 +29,7 @@ export class LeftMenu extends React.Component { // eslint-disable-line react/pre
 
 LeftMenu.propTypes = {
   plugins: React.PropTypes.object,
+  params: React.PropTypes.object,
 };
 
 function mapDispatchToProps(dispatch) {

app/index.html

@@ -15,5 +15,5 @@
 <div id="app"></div>
 <!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
 </body>
-<script src="http://localhost:5000/main.js"></script>
+<script src="http://localhost:4000/main.js"></script>
 </html>

app/routes.js

@@ -22,13 +22,33 @@ export default function createRoutes(store) {
       name: 'home',
       getComponent(nextState, cb) {
         const importModules = Promise.all([
+          System.import('containers/HomePage/sagas'),
           System.import('containers/HomePage'),
         ]);
 
         const renderRoute = loadModule(cb);
 
-        importModules.then(([component]) => {
+        importModules.then(([sagas, component]) => {
           renderRoute(component);
+          injectSagas(sagas.default);
+        });
+
+        importModules.catch(errorLoading);
+      },
+    }, {
+      path: '/plugins/:plugin',
+      name: 'plugins',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          System.import('containers/HomePage/sagas'),
+          System.import('containers/HomePage'),
+        ]);
+
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([sagas, component]) => {
+          renderRoute(component);
+          injectSagas(sagas.default);
         });
 
         importModules.catch(errorLoading);

package.json

@@ -182,6 +182,7 @@
   "dependencies": {
     "babel-polyfill": "6.13.0",
     "chalk": "1.1.3",
+    "classnames": "^2.2.5",
     "compression": "1.6.2",
     "expose-loader": "^0.7.1",
     "express": "4.14.0",