Added redux

package.json

@@ -1,39 +1,41 @@
 {
-	"name": "generator-react-express-webpack-babel",
-	"version": "1.0.0",
-	"description": "Boilerplate for ReactJS project with ExpressJS server. It uses webpack and babel",
-	"main": "app.js",
-	"scripts": {
-		"start": "node app.js",
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/tahnik/react-express-webpack-babel"
-	},
-	"keywords": [
-		"react",
-		"express",
-		"webpack",
-		"babel",
-		"yeoman-generator"
-	],
-	"author": "Tahnik Mustasin",
-	"license": "ISC",
-	"bugs": {
-		"url": "https://github.com/tahnik/react-express-webpack-babel/issues"
-	},
-	"homepage": "https://github.com/tahnik/react-express-webpack-babel#readme",
-	"dependencies": {
-		"babel-core": "^6.10.4",
-		"babel-loader": "^6.2.4",
-		"babel-preset-es2015": "^6.9.0",
-		"babel-preset-react": "^6.11.1",
-		"babel-preset-stage-1": "^6.5.0",
-		"express": "^4.14.0",
-		"react": "^15.2.1",
-		"react-dom": "^15.2.1",
-		"webpack": "^1.13.1",
-		"webpack-dev-server": "^1.14.1"
-	}
+  "name": "generator-react-express-webpack-babel",
+  "version": "1.0.0",
+  "description": "Boilerplate for ReactJS project with ExpressJS server. It uses webpack and babel",
+  "main": "app.js",
+  "scripts": {
+    "start": "node app.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tahnik/react-express-webpack-babel"
+  },
+  "keywords": [
+    "react",
+    "express",
+    "webpack",
+    "babel",
+    "yeoman-generator"
+  ],
+  "author": "Tahnik Mustasin",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/tahnik/react-express-webpack-babel/issues"
+  },
+  "homepage": "https://github.com/tahnik/react-express-webpack-babel#readme",
+  "dependencies": {
+    "babel-core": "^6.10.4",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-1": "^6.5.0",
+    "express": "^4.14.0",
+    "react": "^15.2.1",
+    "react-dom": "^15.2.1",
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.2",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1"
+  }
 }

public/stylesheets/main.css

@@ -1,14 +1,9 @@
-.helloWorld{
+#reactbody{
     width: 100vw;
     height: 100vh;
     text-align: center;
-    -webkit-transform-style: preserve-3d;
-    -moz-transform-style: preserve-3d;
-    transform-style: preserve-3d;
 }
-.helloWorldText{
+.main{
     position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 10vw;
+    margin-top: 5vh;
 }

views/index.js

@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import Main from './src/components/main';
+import reducers from './src/reducers/index';
 
-class Index extends Component {
-    render() {
-        return(
-            <div className="helloWorld">
-                <h1 className="helloWorldText">Hello World</h1>
-            </div>
-        )
-    }
-}
 
-ReactDOM.render(<Index />, document.getElementById("reactbody"));
+ReactDOM.render(
+    <Provider store={createStore(reducers)}>
+        <Main />
+    </Provider>,
+    document.getElementById("reactbody")
+);

views/src/actions/list_actions.js

@@ -0,0 +1,6 @@
+export function selectItem(listItem) {
+    return {
+        type: 'ITEM_SELECTED',
+        payload: listItem
+    };
+}

views/src/components/main.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import ListView from '../containers/list_view';
+import ListItem from '../containers/list_item';
+
+class Main extends Component {
+    render() {
+        return(
+            <div className="col-md-10 col-md-offset-1 main">
+                <ListView />
+                <ListItem />
+            </div>
+        )
+    }
+}
+
+export default Main;

views/src/containers/list_item.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+class ListItem extends Component{
+    render(){
+        if(!this.props.activeItem){
+            return(
+                <div>
+                    <h3>Select an item</h3>
+                    <p>Description will appear here</p>
+                </div>
+            )
+        }
+        return(
+            <div>
+                <h3> { this.props.activeItem.name } </h3>
+                <p>{ this.props.activeItem.description }</p>
+            </div>
+        )
+    }
+}
+
+function mapStateToProps(state) {
+    return {
+        activeItem: state.activeItem
+    };
+}
+
+export default connect(mapStateToProps)(ListItem);

views/src/containers/list_view.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { selectItem } from '../actions/list_actions';
+
+
+class ListView extends Component {
+    renderList() {
+        return this.props.lists.map((listItem) => {
+            return (
+                <li
+                    key={listItem.name}
+                    onClick={() => this.props.selectItem(listItem)}
+                    className="list-group-item"
+                    >
+                    { listItem.name }
+                </li>
+            )
+        })
+    }
+
+    render() {
+        return (
+            <div>
+                <ul className="list-group col-sm-4" >
+                    { this.renderList() }
+                </ul>
+            </div>
+        )
+    }
+}
+
+function mapStateToProps(state) {
+    return {
+        lists: state.lists
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return bindActionCreators({ selectItem: selectItem }, dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ListView);

views/src/reducers/index.js

@@ -0,0 +1,10 @@
+import { combineReducers } from 'redux';
+import ListItems from './list_items';
+import ListItemActive from './list_item_active';
+
+const rootReducer = combineReducers({
+    lists: ListItems,
+    activeItem: ListItemActive
+})
+
+export default rootReducer;

views/src/reducers/list_item_active.js

@@ -0,0 +1,7 @@
+export default function(state = null, action) {
+    switch(action.type) {
+        case 'ITEM_SELECTED':
+            return action.payload;
+    }
+    return state;
+}

views/src/reducers/list_items.js

@@ -0,0 +1,7 @@
+export default function() {
+    return [
+        { name: 'Actions', description: 'Description for actions' },
+        { name: 'Containers', description: 'Description for containers' },
+        { name: 'Reducer', description: 'Description for reducer' }
+    ]
+}