├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── components
    ├── App.jsx
    ├── Bar.jsx
    ├── Foo.jsx
    ├── Footer.jsx
    ├── Header.jsx
    └── index.js
├── dist
    └── .gitignore
├── example
    ├── images
    │   ├── bar.gif
    │   ├── download.png
    │   └── foo-fighters-logo.png
    ├── server.es6.js
    ├── server.js
    └── views
    │   └── index.handlebars
├── index.jsx
├── package.json
├── reducers.js
└── root.jsx


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [ "es2015", "react" ]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # node-waf configuration
20 | .lock-wscript
21 | 
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 | 
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | dist
29 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Johnathan Free Wortley
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # redux-simple-router-example
 2 | This is a simple example of how to use redux-simple-router.
 3 | Feel free to critique this via opening an issue or sending a PR.
 4 | 
 5 | ![Screenshot](https://i.imgur.com/I4FWtez.png)
 6 | 
 7 | [Live Example](http://freeqaz.github.io/redux-simple-router-example/)
 8 | 
 9 | To run this, simply `git clone` the repo and then run:
10 | 
11 | ```shell
12 | npm install
13 | npm run example
14 | # Navigate to localhost:9001 to check it out!
15 | ```
16 | 
17 | Thanks!
18 | 


--------------------------------------------------------------------------------
/components/App.jsx:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import {Header, Footer} from './index';
 3 | 
 4 | class App extends Component {
 5 | 
 6 |   render() {
 7 |     const { header, content, footer } = this.props;
 8 | 
 9 |     const devToolsDisabled = (
10 |       <p>
11 |         Enable Dev Tools by setting <code>?devTools=true</code>. Or click <a href="/?devTools=true">here</a>!
12 |       </p>
13 |     );
14 |     const devToolsEnabled = (
15 |       <p>
16 |         Check out the state changes in the sidebar when you navigate anywhere!
17 |         <br />
18 |         Click <a href="/">here</a> to disable.
19 |       </p>
20 |     );
21 | 
22 |     const defaultContent = (
23 |       <div className="page centered-text">
24 |         <img src="/images/download.png" />
25 |         <p>
26 |           This is a simple example of how to use redux-simple-router.
27 |           <br />
28 |           Please click the links at the top and check out the source!
29 |         </p>
30 |         {__DEVTOOLS ? devToolsEnabled : devToolsDisabled}
31 |       </div>
32 |     );
33 | 
34 |     return (
35 |       <div className="content">
36 |         {header  || <Header />}
37 | 
38 |         {content || defaultContent}
39 | 
40 |         {footer  || <Footer />}
41 |       </div>
42 |     );
43 |   }
44 | }
45 | 
46 | export default App;
47 | 


--------------------------------------------------------------------------------
/components/Bar.jsx:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | 
 3 | class Bar extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div className="page">
 7 |         <img src="/images/bar.gif" />
 8 |         <div className="centered-text">Ouch!</div>
 9 |       </div>
10 |     );
11 |   }
12 | }
13 | 
14 | export default Bar;
15 | 


--------------------------------------------------------------------------------
/components/Foo.jsx:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | 
 3 | class Foo extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div className="page">
 7 |         <img src="/images/foo-fighters-logo.png" />
 8 |         <div className="centered-text">\m/</div>
 9 |       </div>
10 |     );
11 |   }
12 | }
13 | 
14 | export default Foo;
15 | 


--------------------------------------------------------------------------------
/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | 
 3 | class Footer extends Component {
 4 |   render() {
 5 |     return (
 6 |       <div className="pure-g footerComponent">
 7 |         <br />
 8 |         <h5 className="pure-u-1 centered-text">
 9 |           Read more at our <a href="https://github.com/jlongster/redux-simple-router">Github page</a>.
10 |         </h5>
11 |       </div>
12 |     );
13 |   }
14 | }
15 | 
16 | export default Footer;
17 | 


--------------------------------------------------------------------------------
/components/Header.jsx:
--------------------------------------------------------------------------------
 1 | import React, {Component} from 'react';
 2 | import {Link} from 'react-router';
 3 | import extend from 'xtend';
 4 | 
 5 | class Header extends Component {
 6 |   render() {
 7 |     const linkStyle = {
 8 |       className: 'pure-menu-link',
 9 |       activeClassName: 'active'
10 |     };
11 | 
12 |     const homeLinkStyle = extend(linkStyle, {
13 |       className: 'pure-menu-heading pure-menu-link'
14 |     });
15 | 
16 |     return (
17 |       <div className="header">
18 |         <div className="pure-menu pure-menu-horizontal">
19 |           <Link to="/" {...homeLinkStyle}>Home</Link>
20 |           {'>'}
21 |           <ul className="pure-menu-list">
22 |             <li className="pure-menu-item">
23 |               <Link to="/foo" {...linkStyle}>Foo</Link>
24 |             </li>
25 | 
26 |             <li className="pure-menu-item">
27 |               <Link to="/bar" {...linkStyle}>Bar</Link>
28 |             </li>
29 |           </ul>
30 |         </div>
31 |       </div>
32 |     );
33 |   }
34 | }
35 | 
36 | export default Header;
37 | 


--------------------------------------------------------------------------------
/components/index.js:
--------------------------------------------------------------------------------
1 | export {default as Header} from './Header.jsx';
2 | export {default as Footer} from './Footer.jsx';
3 | export {default as Foo} from './Foo.jsx';
4 | export {default as Bar} from './Bar.jsx';
5 | export {default as App} from './App.jsx';
6 | 


--------------------------------------------------------------------------------
/dist/.gitignore:
--------------------------------------------------------------------------------
1 | # Ignore everything in this directory
2 | *
3 | # Except this file
4 | !.gitignore
5 | 
6 | 


--------------------------------------------------------------------------------
/example/images/bar.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freeqaz/redux-simple-router-example/14fb365c84f1701dcb4742a478fe8cbb483aa6d0/example/images/bar.gif


--------------------------------------------------------------------------------
/example/images/download.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freeqaz/redux-simple-router-example/14fb365c84f1701dcb4742a478fe8cbb483aa6d0/example/images/download.png


--------------------------------------------------------------------------------
/example/images/foo-fighters-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freeqaz/redux-simple-router-example/14fb365c84f1701dcb4742a478fe8cbb483aa6d0/example/images/foo-fighters-logo.png


--------------------------------------------------------------------------------
/example/server.es6.js:
--------------------------------------------------------------------------------
 1 | import express from 'express';
 2 | import hbs from 'express-handlebars';
 3 | import path from 'path';
 4 | 
 5 | const app = express();
 6 | 
 7 | app.engine('handlebars', hbs.create().engine);
 8 | app.set('view engine', 'handlebars');
 9 | 
10 | app.use('/images', express.static(path.join(__dirname, './images')));
11 | app.use('/js', express.static(path.join(__dirname, '../dist')));
12 | 
13 | app.use('/', (req, res) => {
14 |   res.render('../example/views/index', {
15 |     devTools: req.query.devTools
16 |   });
17 | });
18 | 
19 | app.listen(9001, function onListen() {
20 |   console.log('Listening at localhost:9001');
21 | });
22 | 


--------------------------------------------------------------------------------
/example/server.js:
--------------------------------------------------------------------------------
1 | require('babel-core/register');
2 | require('./server.es6');
3 | 


--------------------------------------------------------------------------------
/example/views/index.handlebars:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>redux-simple-router example</title>
 6 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
 7 |   <style>
 8 |     * {
 9 |       font-family: sans-serif;
10 |     }
11 |     .centered-text {
12 |       text-align: center;
13 |     }
14 | 
15 |     .page img {
16 |       display: block;
17 |       margin: auto;
18 |     }
19 | 
20 |     .active {
21 |       color: black;
22 |     }
23 |   </style>
24 |   <script>
25 |     {{#if devTools}}
26 |       window.__DEVTOOLS = true;
27 |     {{^}}
28 |       window.__DEVTOOLS = false;
29 |     {{/if}}
30 |   </script>
31 | </head>
32 | <body>
33 |   <div id="mount"></div>
34 | </body>
35 | <script src="js/bundle.js"></script>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import {createStore, combineReducers, compose} from 'redux';
 4 | import {Provider} from 'react-redux';
 5 | import {Router, Route} from 'react-router';
 6 | import createBrowserHistory from 'history/lib/createBrowserHistory';
 7 | import {syncReduxAndRouter, routeReducer} from 'redux-simple-router';
 8 | 
 9 | import reducers from './reducers';
10 | import getRoutes from './root.jsx';
11 | 
12 | // Redux DevTools store enhancers
13 | import {devTools, persistState} from 'redux-devtools';
14 | // React components for Redux DevTools
15 | import {DevTools, DebugPanel, LogMonitor} from 'redux-devtools/lib/react';
16 | 
17 | const reducer = combineReducers(Object.assign({}, reducers, {
18 |   routing: routeReducer
19 | }));
20 | 
21 | const finalCreateStore = __DEVTOOLS ? compose(
22 |   // Provides support for DevTools:
23 |   devTools(),
24 |   // Lets you write ?debug_session=<name> in address bar to persist debug sessions
25 |   persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
26 | )(createStore) : createStore;
27 | 
28 | const store = finalCreateStore(reducer);
29 | const history = createBrowserHistory();
30 | 
31 | syncReduxAndRouter(history, store);
32 | 
33 | ReactDOM.render(
34 |   <div>
35 |     <Provider store={store}>
36 |       <Router history={history}>
37 |         {getRoutes()}
38 |       </Router>
39 |     </Provider>
40 |     { __DEVTOOLS &&
41 |     <DebugPanel top right bottom>
42 |       <DevTools store={store} monitor={LogMonitor}/>
43 |     </DebugPanel>
44 |     }
45 |   </div>,
46 |   document.getElementById('mount')
47 | );
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "test-redux-simple-router",
 3 |   "version": "1.0.0",
 4 |   "description": "This is a simple example of how to use redux-simple-router.",
 5 |   "main": "index.jsx",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "browserify -o dist/bundle.js -t [ babelify --presets [ es2015 react ] ] index.jsx",
 9 |     "example": "npm run build && node example/server.js"
10 |   },
11 |   "author": "Free Wortley <jw@freeqaz.com>",
12 |   "license": "MIT",
13 |   "dependencies": {
14 |     "history": "^1.13.1",
15 |     "react": "^0.14.2",
16 |     "react-dom": "^0.14.2",
17 |     "react-redux": "^4.0.0",
18 |     "react-router": "^1.0.0",
19 |     "redux": "^3.0.4",
20 |     "redux-simple-router": "0.0.8",
21 |     "xtend": "^4.0.1"
22 |   },
23 |   "devDependencies": {
24 |     "babel-core": "^6.1.21",
25 |     "babel-preset-es2015": "^6.1.18",
26 |     "babel-preset-react": "^6.1.18",
27 |     "babelify": "^7.2.0",
28 |     "browserify": "^12.0.1",
29 |     "express": "^4.13.3",
30 |     "express-handlebars": "^2.0.1",
31 |     "redux-devtools": "^2.1.5"
32 |   },
33 |   "directories": {
34 |     "example": "example"
35 |   },
36 |   "repository": {
37 |     "type": "git",
38 |     "url": "git+https://github.com/freeqaz/redux-simple-router-example.git"
39 |   },
40 |   "keywords": [
41 |     "babel",
42 |     "react",
43 |     "redux",
44 |     "redux-simple-router",
45 |     "redux-router",
46 |     "example"
47 |   ],
48 |   "bugs": {
49 |     "url": "https://github.com/freeqaz/redux-simple-router-example/issues"
50 |   },
51 |   "homepage": "https://github.com/freeqaz/redux-simple-router-example#readme"
52 | }
53 | 


--------------------------------------------------------------------------------
/reducers.js:
--------------------------------------------------------------------------------
 1 | const initialState = {
 2 |   wow: 'such state'
 3 | };
 4 | 
 5 | function blankReducer(state = initialState, action) {
 6 |   // For now, don’t handle any actions
 7 |   // and just return the state given to us.
 8 |   return state
 9 | }
10 | 
11 | export default {
12 |   blankReducer
13 | }
14 | 


--------------------------------------------------------------------------------
/root.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import {Route} from 'react-router';
 3 | 
 4 | import {Foo, Bar, App} from './components';
 5 | 
 6 | export default function getRoutes() {
 7 |   return (
 8 |     <Route path="/" component={App}>
 9 |       <Route path="foo" components={{content: Foo}}/>
10 |       <Route path="bar" components={{content: Bar}}/>
11 |     </Route>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------