SREP-3 #comment Add initial code for work with react redux

README.md

@@ -2,13 +2,15 @@
 
 A template for writing React based ECMAScript 2015 (ES6) + Redux + React Router + Webpack and more.
 
+![](./react-eco.gif)
+
 ## What's inside it?
 
 - [x] [Webpack](https://webpack.github.io)
 - [x] [Webpack Dashboard](https://github.com/FormidableLabs/webpack-dashboard)
 - [x] [React](https://facebook.github.io/react/)
 - [x] [React Router](https://github.com/ReactTraining/react-router)
-- [ ] [Redux](https://github.com/reactjs/redux)
+- [x] [Redux](https://github.com/reactjs/redux)
 - [x] [React Hot Loader](https://github.com/gaearon/react-hot-loader)
 - [x] [Jest](https://facebook.github.io/jest/) for tests and [Chai](http://chaijs.com/) for assertions
 - [x] [Storybook](https://getstorybook.io/) to create isolated components' stories

src/components/App/App.js

@@ -41,11 +41,14 @@ class App extends Component {
               <LinkContainer to="/">
                 <NavItem eventKey={1}>Home</NavItem>
               </LinkContainer>
+              <LinkContainer to="/filter">
+                <NavItem eventKey={2}>Filter Table</NavItem>
+              </LinkContainer>
               <LinkContainer to="/about">
-                <NavItem eventKey={2}>About</NavItem>
+                <NavItem eventKey={3}>About</NavItem>
               </LinkContainer>
               <LinkContainer to="/contact">
-                <NavItem eventKey={3}>Contact</NavItem>
+                <NavItem eventKey={4}>Contact</NavItem>
               </LinkContainer>
             </Nav>
           </Navbar.Collapse>

src/components/FilterTable/FilterTable.js

@@ -0,0 +1,42 @@
+/**
+ *   Copyright 2017 OSBI Ltd
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+import React, { Component } from 'react';
+import {
+  FormGroup,
+  ControlLabel,
+  FormControl
+} from 'react-bootstrap';
+
+class FilterTable extends Component {
+  render() {
+    return (
+      <div>
+        <form>
+          <FormGroup controlId="formFilterTable">
+            <ControlLabel>Filter Table</ControlLabel>
+            <FormControl
+              type="text"
+              placeholder="Enter a product name"
+            />
+          </FormGroup>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default FilterTable;

src/components/FilterTable/index.js

@@ -0,0 +1,17 @@
+/**
+ *   Copyright 2017 OSBI Ltd
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+export { default } from './FilterTable.js';

src/data/products.js

@@ -0,0 +1,58 @@
+/**
+ *   Copyright 2017 OSBI Ltd
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+'use strict';
+
+const products = [
+  {
+    category: 'Sporting Goods',
+    price: '$49.99',
+    stocked: true,
+    name: 'Football'
+  },
+  {
+    category: 'Sporting Goods',
+    price: '$9.99',
+    stocked: true,
+    name: 'Baseball'
+  },
+  {
+    category: 'Sporting Goods',
+    price: '$29.99',
+    stocked: false,
+    name: 'Basketball'
+  },
+  {
+    category: 'Electronics',
+    price: '$99.99',
+    stocked: true,
+    name: 'iPod Touch'
+  },
+  {
+    category: 'Electronics',
+    price: '$399.99',
+    stocked: false,
+    name: 'iPhone 5'
+  },
+  {
+    category: 'Electronics',
+    price: '$199.99',
+    stocked: true,
+    name: 'Nexus 7'
+  }
+];
+
+export default products;

src/routes.js

@@ -21,12 +21,14 @@ import {
 } from 'react-router';
 import App from './components/App';
 import Home from './components/Home';
+import FilterTable from './components/FilterTable';
 import About from './components/About';
 import Contact from './components/Contact';
 
 export default (
   <Route path="/" component={App}>
     <IndexRoute component={Home} />
+    <Route path="/filter" component={FilterTable} />
     <Route path="/about" component={About} />
     <Route path="/contact" component={Contact} />
   </Route>