From f7455bd61e9ec90cde995111d2a209ed60e40177 Mon Sep 17 00:00:00 2001
From: Michael Williams <michael.williams@enspiral.com>
Date: Mon, 8 May 2017 18:14:01 +1200
Subject: [PATCH 1/4] better routes, layout, and nav

---
 .../layout.js => app/components/home.js       |  8 ++---
 app/components/layout.js                      | 36 +++++++++++++++++++
 app/components/nav.js                         | 32 +++++++++++++++++
 app/containers/home.js                        |  9 +++++
 app/getters.js                                |  1 +
 app/styles/home.js                            |  9 +++++
 {layout => app}/styles/layout.js              |  0
 app/styles/nav.js                             |  8 +++++
 browser.js                                    |  2 +-
 dogs/components/dogs.js                       | 11 +++---
 dogs/containers/dog.js                        | 17 +++++++++
 package.json                                  |  1 -
 routes.js                                     | 33 ++++++++++++++---
 yarn.lock                                     | 20 +++++++++++
 14 files changed, 169 insertions(+), 18 deletions(-)
 rename layout/components/layout.js => app/components/home.js (56%)
 create mode 100644 app/components/layout.js
 create mode 100644 app/components/nav.js
 create mode 100644 app/containers/home.js
 create mode 100644 app/getters.js
 create mode 100644 app/styles/home.js
 rename {layout => app}/styles/layout.js (100%)
 create mode 100644 app/styles/nav.js
 create mode 100644 dogs/containers/dog.js

diff --git a/layout/components/layout.js b/app/components/home.js
similarity index 56%
rename from layout/components/layout.js
rename to app/components/home.js
index 4a70626..7ae065b 100644
--- a/layout/components/layout.js
+++ b/app/components/home.js
@@ -1,14 +1,14 @@
 import React from 'react'
 import { createComponent } from 'react-fela'
-import { Switch } from 'react-router'
 
-import styles from '../styles/layout'
+import styles from '../styles/home'
 
 const Container = createComponent(styles.container, 'div')
 
-export default function Layout (props) {
+export default function Home (props) {
   const { routes } = props
+
   return <Container>
-    <Switch children={routes} />
+    dogstack!
   </Container>
 }
diff --git a/app/components/layout.js b/app/components/layout.js
new file mode 100644
index 0000000..3be20d7
--- /dev/null
+++ b/app/components/layout.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { createComponent } from 'react-fela'
+import { Route, Switch } from 'react-router-dom'
+import { pipe, map, values } from 'ramda'
+
+import styles from '../styles/layout'
+
+import Nav from './nav'
+
+const Container = createComponent(styles.container, 'div')
+
+export default function Layout (props) {
+  const { routes } = props
+  const pages = mapRoutePages(routes)
+
+  return <Container>
+    <Nav routes={routes} />
+    <Switch>
+      {pages}
+    </Switch>
+  </Container>
+}
+
+const mapRoutePages = map(route => {
+  const {
+    path,
+    exact,
+    Component
+  } = route
+
+  const key = path || '404'
+
+  return (
+    <Route path={path} key={key} exact={exact} component={Component} />
+  )
+})
diff --git a/app/components/nav.js b/app/components/nav.js
new file mode 100644
index 0000000..063f15a
--- /dev/null
+++ b/app/components/nav.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { createComponent } from 'react-fela'
+import { NavLink } from 'react-router-dom'
+import { pipe, map, values } from 'ramda'
+
+import styles from '../styles/nav'
+
+const Container = createComponent(styles.container, 'nav')
+
+export default function Nav (props) {
+  const { routes } = props
+
+  return <Container>
+    {mapRouteLinks(routes)}
+  </Container>
+}
+
+const mapRouteLinks = map(route => {
+  const {
+    path,
+    Component
+  } = route
+
+  const name = path
+  const key = path || '404'
+
+  return (
+    <NavLink to={path} key={key}>
+      {name}
+    </NavLink>
+  )
+})
diff --git a/app/containers/home.js b/app/containers/home.js
new file mode 100644
index 0000000..0d3598f
--- /dev/null
+++ b/app/containers/home.js
@@ -0,0 +1,9 @@
+import { connect } from 'react-redux'
+
+import Home from '../components/home'
+
+import { getHomeProps } from '../getters'
+
+export default connect(
+  getHomeProps
+)(Home)
diff --git a/app/getters.js b/app/getters.js
new file mode 100644
index 0000000..234d33b
--- /dev/null
+++ b/app/getters.js
@@ -0,0 +1 @@
+export const getHomeProps = (state) => ({})
diff --git a/app/styles/home.js b/app/styles/home.js
new file mode 100644
index 0000000..21e2079
--- /dev/null
+++ b/app/styles/home.js
@@ -0,0 +1,9 @@
+export default {
+  container: (props) => {
+    return {
+      fontSize: '12rem',
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }
+}
diff --git a/layout/styles/layout.js b/app/styles/layout.js
similarity index 100%
rename from layout/styles/layout.js
rename to app/styles/layout.js
diff --git a/app/styles/nav.js b/app/styles/nav.js
new file mode 100644
index 0000000..1bf3c0c
--- /dev/null
+++ b/app/styles/nav.js
@@ -0,0 +1,8 @@
+export default {
+  container: (props) => {
+    return {
+      display: 'flex',
+      justifyContent: 'space-around'
+    }
+  }
+}
diff --git a/browser.js b/browser.js
index db853cf..f41f105 100644
--- a/browser.js
+++ b/browser.js
@@ -8,7 +8,7 @@ import createBrowserHistory from 'history/createBrowserHistory'
 import configureStore from './store'
 import createRenderer from './renderer'
 import routes from './routes'
-import Layout from './layout/components/layout'
+import Layout from './app/components/layout'
 
 document.addEventListener('DOMContentLoaded', () => {
   const history = createBrowserHistory()
diff --git a/dogs/components/dogs.js b/dogs/components/dogs.js
index 3cc7451..7504454 100644
--- a/dogs/components/dogs.js
+++ b/dogs/components/dogs.js
@@ -21,10 +21,7 @@ class Dogs extends React.Component {
     const { create, remove } = actions.dogs
 
     return <div className={styles.container}>
-      <span>MY DOGS</span>
-      <div className={styles.dogsContainer}>
-        {mapDogsToValues(dogs)}
-      </div>
+      <h1>MY DOGS</h1>
       <button
         className={styles.adoptButton}
         onClick={() => create({ name: dogNames.allRandom() })}
@@ -39,9 +36,9 @@ class Dogs extends React.Component {
       >
         Give a dog to a friend!
       </button>
-      <Link to='/sign-in'>Sign In</Link>
-      <Link to='/sign-out'>Sign Out</Link>
-      <Link to='/register'>Register</Link>
+      <div className={styles.dogsContainer}>
+        {mapDogsToValues(dogs)}
+      </div>
     </div>
   }
 }
diff --git a/dogs/containers/dog.js b/dogs/containers/dog.js
new file mode 100644
index 0000000..e066814
--- /dev/null
+++ b/dogs/containers/dog.js
@@ -0,0 +1,17 @@
+import { connect } from 'feathers-action-react'
+
+import Dogs from '../components/dogs'
+
+import { actions as dogActions } from '../'
+
+import { getIndexProps } from '../getters'
+
+export default connect({
+  selector: getIndexProps,
+  actions: { dogs: dogActions },
+  query: (props) => ({
+    service: 'dogs',
+    id
+    params: props.match.dogId
+  })
+})(Dogs)
diff --git a/package.json b/package.json
index 49d0698..f6db424 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,6 @@
     "react-dom": "^15.1.0",
     "react-fela": "^4.3.2",
     "react-redux": "^4.4.5",
-    "react-router": "^4.1.1",
     "react-router-config": "^1.0.0-beta.3",
     "react-router-dom": "^4.1.1",
     "react-router-redux": "^5.0.0-alpha.6",
diff --git a/routes.js b/routes.js
index e630327..f32359f 100644
--- a/routes.js
+++ b/routes.js
@@ -6,15 +6,38 @@ import UserIsAuthenticatedOrHome from './authentication/hoc/userIsAuthenticatedO
 import UserIsNotAuthenticated from './authentication/hoc/userIsNotAuthenticated'
 
 // Top Level Containers
-import Layout from './layout/components/layout'
+import Home from './app/containers/home'
 import DogsContainer from './dogs/containers/dogs'
 import SignInContainer from './authentication/containers/signIn'
 import SignOutContainer from './authentication/containers/signOut'
 import RegisterContainer from './authentication/containers/register'
 
 export default [
-  <Route exact path='/' component={UserIsAuthenticated(DogsContainer)} />,
-  <Route path='/sign-in' component={UserIsNotAuthenticated(SignInContainer)} />,
-  <Route path='/sign-out' component={UserIsAuthenticatedOrHome(SignOutContainer)} />,
-  <Route path='/register' component={UserIsNotAuthenticated(RegisterContainer)} />
+  {
+    path: '/',
+    exact: true,
+    Component: Home
+  },
+  {
+    path: '/sign-in',
+    Component: UserIsNotAuthenticated(SignInContainer)
+  },
+  {
+    path: '/sign-out',
+    Component: UserIsAuthenticatedOrHome(SignOutContainer)
+  },
+  {
+    path: '/register',
+    Component: UserIsNotAuthenticated(RegisterContainer)
+  },
+  {
+    path: '/dogs',
+    Component: UserIsAuthenticated(DogsContainer)
+  },
+  /*
+  {
+    path: '/dog',
+    Component: UserIsAuthenticated(DogContainer)
+  }
+  */
 ]
diff --git a/yarn.lock b/yarn.lock
index 05442e3..c721325 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -128,6 +128,13 @@ ajv@^4.7.0, ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
+ajv@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.0.1.tgz#5fd1a8f5cc92b371aa86445b1152fd4dec844ac9"
+  dependencies:
+    co "^4.6.0"
+    json-stable-stringify "^1.0.1"
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -2755,6 +2762,15 @@ feathers-errors@^2.0.1, feathers-errors@^2.2.0, feathers-errors@^2.4.0, feathers
   dependencies:
     debug "^2.2.0"
 
+feathers-hooks-common@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/feathers-hooks-common/-/feathers-hooks-common-3.2.0.tgz#20b51d11b0924bdf0e89145f8ef7892455fb8f33"
+  dependencies:
+    ajv "^5.0.0"
+    debug "^2.2.0"
+    feathers-errors "^2.4.0"
+    traverse "^0.6.6"
+
 feathers-hooks@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/feathers-hooks/-/feathers-hooks-2.0.1.tgz#7941e3232c1451c4568e8d27413df213befe07f2"
@@ -6229,6 +6245,10 @@ tough-cookie@~2.3.0:
   dependencies:
     punycode "^1.4.1"
 
+traverse@^0.6.6:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
+
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"

From 34f487b024b3dc6a1a027e5b1664a404baa9ddd7 Mon Sep 17 00:00:00 2001
From: Michael Williams <michael.williams@enspiral.com>
Date: Tue, 9 May 2017 18:44:58 +1200
Subject: [PATCH 2/4] better navigation

---
 app/components/layout.js                      |  4 +-
 app/components/nav.js                         | 33 ++++++++-------
 app/containers/layout.js                      |  9 ++++
 app/getters.js                                | 31 ++++++++++++++
 authentication/getters.js                     | 24 +++++++++--
 authentication/hoc/userIsAuthenticated.js     |  3 +-
 .../hoc/userIsAuthenticatedOrHome.js          |  3 +-
 authentication/hoc/userIsNotAuthenticated.js  |  3 +-
 authentication/updater.js                     |  4 +-
 browser.js                                    |  2 +-
 routes.js                                     | 42 ++++++++++++++++---
 11 files changed, 124 insertions(+), 34 deletions(-)
 create mode 100644 app/containers/layout.js

diff --git a/app/components/layout.js b/app/components/layout.js
index 3be20d7..65a352a 100644
--- a/app/components/layout.js
+++ b/app/components/layout.js
@@ -10,11 +10,11 @@ import Nav from './nav'
 const Container = createComponent(styles.container, 'div')
 
 export default function Layout (props) {
-  const { routes } = props
+  const { routes, navigationRoutes } = props
   const pages = mapRoutePages(routes)
 
   return <Container>
-    <Nav routes={routes} />
+    <Nav navigationRoutes={navigationRoutes} />
     <Switch>
       {pages}
     </Switch>
diff --git a/app/components/nav.js b/app/components/nav.js
index 063f15a..1baef1f 100644
--- a/app/components/nav.js
+++ b/app/components/nav.js
@@ -8,25 +8,26 @@ import styles from '../styles/nav'
 const Container = createComponent(styles.container, 'nav')
 
 export default function Nav (props) {
-  const { routes } = props
+  const { navigationRoutes } = props
 
   return <Container>
-    {mapRouteLinks(routes)}
+    {mapRouteLinks(navigationRoutes)}
   </Container>
 }
 
-const mapRouteLinks = map(route => {
-  const {
-    path,
-    Component
-  } = route
+const mapRouteLinks = pipe(
+  map(route => {
+    const {
+      path,
+      name = path,
+      Component
+    } = route
 
-  const name = path
-  const key = path || '404'
-
-  return (
-    <NavLink to={path} key={key}>
-      {name}
-    </NavLink>
-  )
-})
+    return (
+      <NavLink to={path} key={name}>
+        {name}
+      </NavLink>
+    )
+  }),
+  values
+)
diff --git a/app/containers/layout.js b/app/containers/layout.js
new file mode 100644
index 0000000..183b3f1
--- /dev/null
+++ b/app/containers/layout.js
@@ -0,0 +1,9 @@
+import { connect } from 'react-redux'
+
+import Layout from '../components/layout'
+
+import { getLayoutProps } from '../getters'
+
+export default connect(
+  getLayoutProps
+)(Layout)
diff --git a/app/getters.js b/app/getters.js
index 234d33b..ada31fd 100644
--- a/app/getters.js
+++ b/app/getters.js
@@ -1 +1,32 @@
+import { createSelector, createStructuredSelector } from 'reselect'
+import { pipe, not, isNil, map, filter, prop, propOr, indexBy, nthArg, uncurryN } from 'ramda'
+
+export const getState = state => state
+
 export const getHomeProps = (state) => ({})
+
+export const getRoutes = pipe(
+  nthArg(1),
+  propOr(null, 'routes')
+)
+
+const indexByName = indexBy(prop('name'))
+const filterNil = filter(pipe(isNil, not))
+export const getNavigationRoutes = createSelector(
+  getState,
+  getRoutes,
+  uncurryN(2, state => {
+    const mapRoutes = map(route => {
+      const { name, navigation } = route
+      if (isNil(navigation)) return route
+      const { selector } = navigation
+      if (selector(state)) return route
+    })
+    return pipe(mapRoutes, filterNil, indexByName)
+  })
+)
+
+export const getLayoutProps = createStructuredSelector({
+  routes: getRoutes,
+  navigationRoutes: getNavigationRoutes
+})
diff --git a/authentication/getters.js b/authentication/getters.js
index 3feb47d..9fc1fea 100644
--- a/authentication/getters.js
+++ b/authentication/getters.js
@@ -1,20 +1,36 @@
 import { createSelector, createStructuredSelector } from 'reselect'
+import { prop, propOr, not } from 'ramda'
 
-export const getAuthentication = (state) => state.authentication
+export const getAuthentication = prop('authentication')
 
 export const getSigningIn = createSelector(
   getAuthentication,
-  (authentication) => authentication.signingIn
+  propOr(false, 'signingIn')
 )
 
 export const getAccount = createSelector(
   getAuthentication,
-  (authentication) => authentication.account
+  propOr(null, 'account')
+)
+
+export const getAccessToken = createSelector(
+  getAccount,
+  propOr(null, 'accessToken')
+)
+
+export const getIsAuthenticated = createSelector(
+  getAccount,
+  Boolean
+)
+
+export const getIsNotAuthenticated = createSelector(
+  getAccount,
+  not
 )
 
 export const getError = createSelector(
   getAuthentication,
-  (authentication) => authentication.error
+  propOr(null, 'error')
 )
 
 export const getSignInProps = createStructuredSelector({
diff --git a/authentication/hoc/userIsAuthenticated.js b/authentication/hoc/userIsAuthenticated.js
index 0d95b99..f00435c 100644
--- a/authentication/hoc/userIsAuthenticated.js
+++ b/authentication/hoc/userIsAuthenticated.js
@@ -1,10 +1,11 @@
 import { connectedRouterRedirect } from 'redux-auth-wrapper/lib/history4/redirect'
+import { propOr } from 'ramda'
 import { getAccount } from '../getters'
 
 export default connectedRouterRedirect({
   wrapperDisplayName: 'UserIsAuthenticated',
   authSelector: getAccount,
-  predicate: data => !!data.accessToken,
+  predicate: propOr(null, 'accessToken'),
   redirectPath: '/sign-in',
   allowRedirectBack: true
 })
diff --git a/authentication/hoc/userIsAuthenticatedOrHome.js b/authentication/hoc/userIsAuthenticatedOrHome.js
index 10e3586..d9c0afd 100644
--- a/authentication/hoc/userIsAuthenticatedOrHome.js
+++ b/authentication/hoc/userIsAuthenticatedOrHome.js
@@ -1,4 +1,5 @@
 import locationHelperBuilder from 'redux-auth-wrapper/lib/history4/locationHelper'
+import { propOr } from 'ramda'
 import { connectedRouterRedirect } from 'redux-auth-wrapper/lib/history4/redirect'
 
 import { getAccount } from '../getters'
@@ -8,7 +9,7 @@ const locationHelper = locationHelperBuilder({})
 export default connectedRouterRedirect({
   wrapperDisplayName: 'UserIsAuthenticatedOrHome',
   authSelector: getAccount,
-  predicate: data => !!data.accessToken,
+  predicate: propOr(null, 'accessToken'),
   redirectPath: '/',
   allowRedirectBack: false
 })
diff --git a/authentication/hoc/userIsNotAuthenticated.js b/authentication/hoc/userIsNotAuthenticated.js
index b4c5233..4b2f676 100644
--- a/authentication/hoc/userIsNotAuthenticated.js
+++ b/authentication/hoc/userIsNotAuthenticated.js
@@ -1,5 +1,6 @@
 import locationHelperBuilder from 'redux-auth-wrapper/lib/history4/locationHelper'
 import { connectedRouterRedirect } from 'redux-auth-wrapper/lib/history4/redirect'
+import { pipe, propOr, not } from 'ramda'
 
 import { getAccount } from '../getters'
 
@@ -8,7 +9,7 @@ const locationHelper = locationHelperBuilder({})
 export default connectedRouterRedirect({
   wrapperDisplayName: 'UserIsNotAuthenticated',
   authSelector: getAccount,
-  predicate: data => !data.accessToken,
+  predicate: pipe(propOr(null, 'accessToken'), not),
   redirectPath: (state, ownProps) => locationHelper.getRedirectQuery(ownProps) || '/',
   allowRedirectBack: false
 })
diff --git a/authentication/updater.js b/authentication/updater.js
index ddc0040..ad70b4c 100644
--- a/authentication/updater.js
+++ b/authentication/updater.js
@@ -1,12 +1,12 @@
 import { updateStateAt, combine, withDefaultState, decorate } from 'redux-fp'
 
-const account = action => (state = {}) => {
+const account = action => (state = null) => {
   switch (action.type) {
     case 'REGISTER_SUCCESS':
     case 'SIGN_IN_SUCCESS':
       return action.payload
     case 'SIGN_OUT_SUCCESS':
-      return {}
+      return null
     default:
       return state
   }
diff --git a/browser.js b/browser.js
index f41f105..a567a18 100644
--- a/browser.js
+++ b/browser.js
@@ -8,7 +8,7 @@ import createBrowserHistory from 'history/createBrowserHistory'
 import configureStore from './store'
 import createRenderer from './renderer'
 import routes from './routes'
-import Layout from './app/components/layout'
+import Layout from './app/containers/layout'
 
 document.addEventListener('DOMContentLoaded', () => {
   const history = createBrowserHistory()
diff --git a/routes.js b/routes.js
index f32359f..646a12c 100644
--- a/routes.js
+++ b/routes.js
@@ -12,32 +12,62 @@ import SignInContainer from './authentication/containers/signIn'
 import SignOutContainer from './authentication/containers/signOut'
 import RegisterContainer from './authentication/containers/register'
 
+import { getIsAuthenticated, getIsNotAuthenticated } from './authentication/getters'
+
 export default [
   {
+    name: 'home',
     path: '/',
     exact: true,
-    Component: Home
+    Component: Home,
+    navigation: {
+      title: 'Sign in'
+    }
   },
   {
+    name: 'sign-in',
     path: '/sign-in',
-    Component: UserIsNotAuthenticated(SignInContainer)
+    Component: UserIsNotAuthenticated(SignInContainer),
+    navigation: {
+      title: 'Sign in',
+      selector: getIsNotAuthenticated
+    }
   },
   {
+    name: 'sign-out',
     path: '/sign-out',
-    Component: UserIsAuthenticatedOrHome(SignOutContainer)
+    Component: UserIsAuthenticatedOrHome(SignOutContainer),
+    navigation: {
+      title: 'Sign out',
+      selector: getIsAuthenticated
+    }
   },
   {
+    name: 'register',
     path: '/register',
-    Component: UserIsNotAuthenticated(RegisterContainer)
+    Component: UserIsNotAuthenticated(RegisterContainer),
+    navigation: {
+      title: 'Register',
+      selector: getIsNotAuthenticated
+    }
   },
   {
+    name: 'dogs',
     path: '/dogs',
-    Component: UserIsAuthenticated(DogsContainer)
+    Component: UserIsAuthenticated(DogsContainer),
+    navigation: {
+      title: 'Dogs',
+      selector: getIsAuthenticated
+    }
   },
   /*
   {
     path: '/dog',
-    Component: UserIsAuthenticated(DogContainer)
+    Component: UserIsAuthenticated(DogContainer),
+    navigation: {
+      title: 'Dog',
+      selector: getIsAuthenticated
+    }
   }
   */
 ]

From 9763431eecfa9b24333b13cb7034c1dc315645e9 Mon Sep 17 00:00:00 2001
From: Michael Williams <michael.williams@enspiral.com>
Date: Mon, 15 May 2017 15:02:07 +1200
Subject: [PATCH 3/4] dog page!

- also, use forked version of `fela` (there's no easy way to use my GitHub repo as a package version, boo mono-repo...). so anyone else will need to manually `npm link`
- use forked versions of `feathers-action`(`-react`) to fix cancellation
- add dog page route, container, component, styles, getters
---
 app/components/nav.js   |  3 ++-
 app/getters.js          |  5 +++--
 dogs/components/dog.js  | 20 +++++++++++++++-----
 dogs/components/dogs.js | 13 ++++---------
 dogs/containers/dog.js  | 12 ++++++------
 dogs/getters.js         | 15 ++++++++++++++-
 dogs/styles/dog.js      | 14 ++++++++++++++
 dogs/styles/dogs.js     | 36 +++++++++++++++---------------------
 package.json            |  6 +++---
 routes.js               | 15 +++++----------
 yarn.lock               | 35 +++++++++++++++++++++++++++++++----
 11 files changed, 112 insertions(+), 62 deletions(-)
 create mode 100644 dogs/styles/dog.js

diff --git a/app/components/nav.js b/app/components/nav.js
index 1baef1f..d02eba9 100644
--- a/app/components/nav.js
+++ b/app/components/nav.js
@@ -20,12 +20,13 @@ const mapRouteLinks = pipe(
     const {
       path,
       name = path,
+      title = name,
       Component
     } = route
 
     return (
       <NavLink to={path} key={name}>
-        {name}
+        {title}
       </NavLink>
     )
   }),
diff --git a/app/getters.js b/app/getters.js
index ada31fd..62639e5 100644
--- a/app/getters.js
+++ b/app/getters.js
@@ -18,9 +18,10 @@ export const getNavigationRoutes = createSelector(
   uncurryN(2, state => {
     const mapRoutes = map(route => {
       const { name, navigation } = route
-      if (isNil(navigation)) return route
+      if (isNil(navigation)) return
+      if (navigation === true) return route
       const { selector } = navigation
-      if (selector(state)) return route
+      if (isNil(selector) || selector(state)) return route
     })
     return pipe(mapRoutes, filterNil, indexByName)
   })
diff --git a/dogs/components/dog.js b/dogs/components/dog.js
index f749522..caa3a33 100644
--- a/dogs/components/dog.js
+++ b/dogs/components/dog.js
@@ -1,11 +1,21 @@
 import React from 'react'
+import { connect as connectStyles } from 'react-fela'
+import { Link } from 'react-router-dom'
+import { isNil } from 'ramda'
 
-export default function Dog (props) {
-  return <div>
-    <span>
+import styles from '../styles/dog'
+
+export default connectStyles(styles)(Dog)
+
+function Dog (props) {
+  const { dog, styles } = props
+  if (isNil(dog)) return null
+
+  return <div className={styles.container}>
+    <Link className={styles.name} to={`/dogs/${dog.id}`}>
       <i className='em em-dog' />
-      {props.name}
+      {dog.name}
       <i className='em em-dog' />
-    </span>
+    </Link>
   </div>
 }
diff --git a/dogs/components/dogs.js b/dogs/components/dogs.js
index 7504454..4e8c000 100644
--- a/dogs/components/dogs.js
+++ b/dogs/components/dogs.js
@@ -1,17 +1,14 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
-import { connect as connectFela } from 'react-fela'
+import { connect as connectStyles } from 'react-fela'
 import dogNames from 'dog-names'
 import { mapObjIndexed, values, keys, pipe} from 'ramda'
-import createCid from 'cuid'
 
 import Dog from './dog'
 
-import gcs from '../util/generate-component-styles'
 import styles from '../styles/dogs'
 
 const mapDogs = mapObjIndexed((dog, key) => {
-  return <Dog key={key} name={dog.name} />
+  return <Dog key={key} dog={dog} size='small' />
 })
 const mapDogsToValues = pipe(mapDogs, values)
 
@@ -21,7 +18,7 @@ class Dogs extends React.Component {
     const { create, remove } = actions.dogs
 
     return <div className={styles.container}>
-      <h1>MY DOGS</h1>
+      <h1 className={styles.title}>MY DOGS</h1>
       <button
         className={styles.adoptButton}
         onClick={() => create({ name: dogNames.allRandom() })}
@@ -43,6 +40,4 @@ class Dogs extends React.Component {
   }
 }
 
-export default connectFela(
-  gcs(styles)
-)(Dogs)
+export default connectStyles(styles)(Dogs)
diff --git a/dogs/containers/dog.js b/dogs/containers/dog.js
index e066814..f111baa 100644
--- a/dogs/containers/dog.js
+++ b/dogs/containers/dog.js
@@ -1,17 +1,17 @@
+import React from 'react'
 import { connect } from 'feathers-action-react'
 
-import Dogs from '../components/dogs'
+import Dog from '../components/dog'
 
 import { actions as dogActions } from '../'
 
-import { getIndexProps } from '../getters'
+import { getShowProps } from '../getters'
 
 export default connect({
-  selector: getIndexProps,
+  selector: getShowProps,
   actions: { dogs: dogActions },
   query: (props) => ({
     service: 'dogs',
-    id
-    params: props.match.dogId
+    id: props.match.params.dogId
   })
-})(Dogs)
+})(props => <Dog size='full' {...props} />)
diff --git a/dogs/getters.js b/dogs/getters.js
index 842f181..9d48145 100644
--- a/dogs/getters.js
+++ b/dogs/getters.js
@@ -1,7 +1,20 @@
-import { createStructuredSelector } from 'reselect'
+import { createSelector, createStructuredSelector } from 'reselect'
+import { prop } from 'ramda'
 
 export const getDogs = (state) => state.dogs
+export const getCurrentDogId = (state, props) => props.match.params.dogId
+
+export const getCurrentDog = createSelector(
+  getCurrentDogId,
+  getDogs,
+  prop
+)
 
 export const getIndexProps = createStructuredSelector({
   dogs: getDogs
 })
+
+
+export const getShowProps = createStructuredSelector({
+  dog: getCurrentDog
+})
diff --git a/dogs/styles/dog.js b/dogs/styles/dog.js
new file mode 100644
index 0000000..53b7614
--- /dev/null
+++ b/dogs/styles/dog.js
@@ -0,0 +1,14 @@
+export default {
+  container: () => ({
+    display: 'flex',
+    justifyContent: 'center'
+  }),
+  name: ({ size }) => ({
+    fontSize: nameFontSizes[size]
+  })
+}
+
+const nameFontSizes = {
+  small: '1.4rem',
+  full: '4rem'
+}
diff --git a/dogs/styles/dogs.js b/dogs/styles/dogs.js
index e68ad46..d814b64 100644
--- a/dogs/styles/dogs.js
+++ b/dogs/styles/dogs.js
@@ -1,23 +1,17 @@
 export default {
-  container: ({ color }) => {
-    return {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      backgroundColor: color
-    }
-  },
-  dogsContainer: () => {
-    return {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      marginTop: '20px'
-    }
-  },
-  adoptButton: () => {
-    return {
-      marginTop: '20px'
-    }
-  }
+  container: ({ color }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    backgroundColor: color
+  }),
+  dogsContainer: () => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginTop: '20px'
+  }),
+  adoptButton: () => ({
+    marginTop: '20px'
+  })
 }
diff --git a/package.json b/package.json
index f6db424..7d45850 100644
--- a/package.json
+++ b/package.json
@@ -34,8 +34,8 @@
     "dog-names": "^1.0.2",
     "dogstack": "0.1",
     "feathers": "^2.1.1",
-    "feathers-action": "^2.2.0",
-    "feathers-action-react": "^1.0.0",
+    "feathers-action": "ahdinosaur/feathers-action#internal",
+    "feathers-action-react": "ahdinosaur/feathers-action-react#cancel",
     "feathers-authentication": "^1.2.2",
     "feathers-authentication-client": "^0.3.2",
     "feathers-authentication-hooks": "^0.1.2",
@@ -63,7 +63,7 @@
     "ramda": "^0.23.0",
     "react": "^15.1.0",
     "react-dom": "^15.1.0",
-    "react-fela": "^4.3.2",
+    "react-fela": "^4.3.5",
     "react-redux": "^4.4.5",
     "react-router-config": "^1.0.0-beta.3",
     "react-router-dom": "^4.1.1",
diff --git a/routes.js b/routes.js
index 646a12c..633462c 100644
--- a/routes.js
+++ b/routes.js
@@ -8,6 +8,7 @@ import UserIsNotAuthenticated from './authentication/hoc/userIsNotAuthenticated'
 // Top Level Containers
 import Home from './app/containers/home'
 import DogsContainer from './dogs/containers/dogs'
+import DogContainer from './dogs/containers/dog'
 import SignInContainer from './authentication/containers/signIn'
 import SignOutContainer from './authentication/containers/signOut'
 import RegisterContainer from './authentication/containers/register'
@@ -51,6 +52,10 @@ export default [
       selector: getIsNotAuthenticated
     }
   },
+  {
+    path: '/dogs/:dogId',
+    Component: UserIsAuthenticated(DogContainer)
+  },
   {
     name: 'dogs',
     path: '/dogs',
@@ -59,15 +64,5 @@ export default [
       title: 'Dogs',
       selector: getIsAuthenticated
     }
-  },
-  /*
-  {
-    path: '/dog',
-    Component: UserIsAuthenticated(DogContainer),
-    navigation: {
-      title: 'Dog',
-      selector: getIsAuthenticated
-    }
   }
-  */
 ]
diff --git a/yarn.lock b/yarn.lock
index c721325..18a17f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2675,6 +2675,19 @@ feathers-action-react@^1.0.0:
     react-redux "^5.0.4"
     redux "^3.6.0"
 
+feathers-action-react@ahdinosaur/feathers-action-react#cancel:
+  version "1.0.0"
+  resolved "https://codeload.github.com/ahdinosaur/feathers-action-react/tar.gz/1691f9bc696a4b5ca17a560723a022097bdfd036"
+  dependencies:
+    babel-preset-es2015 "^6.24.1"
+    babel-preset-react "^6.24.1"
+    babelify "^7.3.0"
+    incremental-id "^1.0.0"
+    ramda "^0.23.0"
+    react "^15.5.4"
+    react-redux "^5.0.4"
+    redux "^3.6.0"
+
 feathers-action@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/feathers-action/-/feathers-action-2.2.0.tgz#12d649c785afca68860d9128959fb9d0a1bb9978"
@@ -2687,6 +2700,18 @@ feathers-action@^2.2.0:
     rxjs "^5.3.0"
     typeof-is "^1.0.2"
 
+feathers-action@ahdinosaur/feathers-action#internal:
+  version "2.2.0"
+  resolved "https://codeload.github.com/ahdinosaur/feathers-action/tar.gz/a492732d9a23178a988d5627f2aef936c9e41bb3"
+  dependencies:
+    "@f/create-action" "^1.1.1"
+    es2040 "^1.2.5"
+    ramda "^0.23.0"
+    redux-fp "^0.2.0"
+    redux-observable "^0.14.1"
+    rxjs "^5.3.0"
+    typeof-is "^1.0.2"
+
 feathers-authentication-client@^0.3.1, feathers-authentication-client@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/feathers-authentication-client/-/feathers-authentication-client-0.3.2.tgz#add0ed0f562c2462228c22d688e1261ef5f96e56"
@@ -5143,7 +5168,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@15.5.8, prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@~15.5.7:
+prop-types@15.5.8, prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
   version "15.5.8"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
   dependencies:
@@ -5266,9 +5291,11 @@ react-dom@^15.1.0:
     object-assign "^4.1.0"
     prop-types "~15.5.7"
 
-react-fela@^4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/react-fela/-/react-fela-4.3.2.tgz#12703afceacca43fb8dcb093917ba6793a5d149e"
+react-fela@^4.3.5:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/react-fela/-/react-fela-4.3.5.tgz#f7d3bed97bcc45915d269ff5238e2bfadd9c02f2"
+  dependencies:
+    prop-types "^15.5.8"
 
 react-redux@^4.4.5:
   version "4.4.8"

From 5ee6b9aec94eea53994ccecd2b18911d63e4af92 Mon Sep 17 00:00:00 2001
From: Michael Williams <michael.williams@enspiral.com>
Date: Mon, 15 May 2017 15:14:20 +1200
Subject: [PATCH 4/4] improved README

---
 README.md | 81 ++++++++++++++++++++++++++++---------------------------
 1 file changed, 42 insertions(+), 39 deletions(-)

diff --git a/README.md b/README.md
index ef9a602..767d31d 100644
--- a/README.md
+++ b/README.md
@@ -1,48 +1,51 @@
-<h1 align="center">
-  <img
-    alt="dogstack on a post-it note"
-    src="http://i.imgur.com/vjfouxn.jpg"
-    height="250"
-  />
-  <br />
-  dogstack
-</h1>
-
-<h4 align="center">
-  :dog: :dog: :dog: a popular-choice grab-bag framework for teams working on production web apps
-</h4>
-
-<h6 align="center">
-  :cat: see also <a href='https://github.com/enspiral-root-systems/cat-stack'>catstack</a>, dogstack's smarter, slimmer, more cunning partner in crime
-</h4>
+# dogstack-example
 
--> make topic called agent
--> agent is an id that links to other foreign objects
--> agent might have a type person group or bot
-agent has many accounts
-account is a way of logging in
-agent has one profile
-agent has and belongs to many relationships
+an example app using the [dogstack framework](https://dogstack.js.org). :dog: :dog: :dog:
+
+TODO see it live at [dogstack.herokuapp.com](https://dogstack.herokuapp.com/)
+
+## how to use
+
+if you want to use this as a starting ground for your new app, simply fork this repository!
 
-## features
+if you want to develop this example further,
 
-- provides generators for scaffolding apps made of popular libraries
-- abstracts away the app plumbing that you don't want to write again, and let's you focus on features
+```
+git clone git@github.com:dogstack/dogstack-example
+cd dogstack-example
+yarn install
+yarn dev
+```
 
-## demos
+### use forked version of `fela`
 
-- [dogstack.herokuapp.com](https://dogstack.herokuapp.com/): this repo's [./example](example) deployed to heroku
+at the moment this example relies on [fela#260](https://github.com/rofrischmann/fela/pull/260)
 
-## modules
+```shell
+cd ../
+git clone git@github:ahdinosaur/fela
+cd fela
+git checkout build
+cd packages/fela
+npm link
+cd ../..
+cd packages/react-fela
+npm link
 
-- React
-- Redux
-- React Router
-- Reselect
+cd ../dogstack-example
+npm link fela
+npm link react-fela
+```
 
-## prior art
+## user stories
+
+TODO
+
+-> make topic called agent
+-> agent is an id that links to other foreign objects
+-> agent might have a type person group or bot
+agent has many accounts
+account is a way of logging in
+agent has one profile
+agent has and belongs to many relationships
 
-- architecture by [@ahdinosaur](https://github.com/ahdinosaur) on previous private projects
-- https://github.com/jlongster/react-redux-universal-hot-example
-- https://github.com/react-boilerplate/react-boilerplate
-- general discussions with teammates