From 975849905d8f99d72a3b310a4275e5b435b7d71f Mon Sep 17 00:00:00 2001
From: Gregory Beaver <greg@chiaraquartet.net>
Date: Mon, 1 May 2017 13:54:21 -0500
Subject: [PATCH] working examples route

---
 docs/src/App.jsx                   | 28 +++++++++++++++++++++++++---
 docs/src/components/Examples.jsx   | 20 ++++++++++++++++++++
 docs/src/index.js                  | 23 ++++++++++++++++++++++-
 docs/src/redux/actions.js          |  8 ++++++++
 docs/src/redux/example.js          | 18 ++++++++++++++++++
 docs/src/redux/types.js            |  1 +
 docs/src/toggles/ExampleToggle.js  |  3 +++
 docs/src/toggles/ExamplesToggle.js |  3 +++
 8 files changed, 100 insertions(+), 4 deletions(-)
 create mode 100644 docs/src/components/Examples.jsx
 create mode 100644 docs/src/redux/actions.js
 create mode 100644 docs/src/redux/example.js
 create mode 100644 docs/src/redux/types.js
 create mode 100644 docs/src/toggles/ExampleToggle.js
 create mode 100644 docs/src/toggles/ExamplesToggle.js

diff --git a/docs/src/App.jsx b/docs/src/App.jsx
index ca08e77..6f4e838 100644
--- a/docs/src/App.jsx
+++ b/docs/src/App.jsx
@@ -1,6 +1,12 @@
 import React, { Component } from 'react'
+import Routes from 'ion-router/Routes'
+import Route from 'ion-router/Route'
+import Link from 'ion-router/Link'
+
 import './App.css'
-import Example from './components/Example'
+import Examples from './components/Examples'
+import ExamplesToggle from './toggles/ExamplesToggle'
+import * as actions from './redux/actions'
 
 class App extends Component {
   render() {
@@ -10,10 +16,26 @@ class App extends Component {
           <h2>Welcome</h2>
         </div>
         <div className="App-intro">
-          <Example example="basic" />
+          <ul>
+            <li><Link route="examples">Examples</Link></li>
+          </ul>
+          <ExamplesToggle component={Examples} />
         </div>
+        <Routes>
+          <Route name="home" path="/">
+            <Route
+              name="examples"
+              path="examples(/:example)"
+              stateFromParams={params => params}
+              paramsFromState={state => state}
+              updateState={{
+                example: name => actions.chooseExample(name)
+              }}
+            />
+          </Route>
+        </Routes>
       </div>
-    );
+    )
   }
 }
 
diff --git a/docs/src/components/Examples.jsx b/docs/src/components/Examples.jsx
new file mode 100644
index 0000000..9d5ba31
--- /dev/null
+++ b/docs/src/components/Examples.jsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import Link from 'ion-router/Link'
+import ExampleToggle from '../toggles/ExampleToggle'
+import thing from './Example'
+
+const Example = connect(state => ({
+  example: state.examples.example
+}))(thing)
+
+export default function Examples() {
+  return (
+    <div>
+      <ul>
+        <li><Link route="examples" example="basic">Basic</Link></li>
+      </ul>
+      <ExampleToggle component={Example} />
+    </div>
+  )
+}
diff --git a/docs/src/index.js b/docs/src/index.js
index d68044b..e4d195c 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -1,9 +1,30 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { createStore, applyMiddleware, combineReducers, compose } from 'redux'
+import { Provider, connect } from 'react-redux'
+import makeRouter, { makeRouterMiddleware } from 'ion-router'
+import routing from 'ion-router/reducer'
+import examples from './redux/example'
+
 import App from './App'
 import './index.css'
 
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose // eslint-disable-line
+const reducer = combineReducers({
+  routing,
+  examples
+})
+
+
+// set up the router and create the store
+const routerMiddleware = makeRouterMiddleware()
+const store = createStore(reducer, undefined,
+  composeEnhancers(applyMiddleware(routerMiddleware)))
+makeRouter(connect, store)
+
 ReactDOM.render(
-  <App />,
+  <Provider store={store}>
+    <App />
+  </Provider>,
   document.getElementById('root')
 );
diff --git a/docs/src/redux/actions.js b/docs/src/redux/actions.js
new file mode 100644
index 0000000..8d508f7
--- /dev/null
+++ b/docs/src/redux/actions.js
@@ -0,0 +1,8 @@
+import * as types from './types'
+
+export function chooseExample(example) {
+  return {
+    type: types.CHOOSE_EXAMPLE,
+    payload: example
+  }
+}
diff --git a/docs/src/redux/example.js b/docs/src/redux/example.js
new file mode 100644
index 0000000..d0f858d
--- /dev/null
+++ b/docs/src/redux/example.js
@@ -0,0 +1,18 @@
+import * as types from './types'
+
+const defaultState = {
+  example: false
+}
+
+export default function reducer(state = defaultState, action) {
+  if (!action || !action.type) return state
+  switch (action.type) {
+    case types.CHOOSE_EXAMPLE:
+      return {
+        ...state,
+        example: action.payload
+      }
+    default:
+      return state
+  }
+}
diff --git a/docs/src/redux/types.js b/docs/src/redux/types.js
new file mode 100644
index 0000000..06d28ee
--- /dev/null
+++ b/docs/src/redux/types.js
@@ -0,0 +1 @@
+export const CHOOSE_EXAMPLE = 'CHOOSE_EXAMPLE'
diff --git a/docs/src/toggles/ExampleToggle.js b/docs/src/toggles/ExampleToggle.js
new file mode 100644
index 0000000..bd9732b
--- /dev/null
+++ b/docs/src/toggles/ExampleToggle.js
@@ -0,0 +1,3 @@
+import Toggle from 'ion-router/Toggle'
+
+export default Toggle(state => state.examples.example)
diff --git a/docs/src/toggles/ExamplesToggle.js b/docs/src/toggles/ExamplesToggle.js
new file mode 100644
index 0000000..bb22496
--- /dev/null
+++ b/docs/src/toggles/ExamplesToggle.js
@@ -0,0 +1,3 @@
+import RouteToggle from 'ion-router/RouteToggle'
+
+export default RouteToggle('examples')