From 3b1f7115a369c22f937d2d34373edfe5fb494387 Mon Sep 17 00:00:00 2001
From: Bernat Orell <bernatorellvicens@gmail.com>
Date: Sun, 8 Jan 2017 15:04:35 +0000
Subject: [PATCH] Routing on the client with Redux (#691)

* Routing on the client with Redux

* Removing unused import
---
 examples/with-redux/components/Clock.js |  7 ++---
 examples/with-redux/components/Page.js  | 15 +++++++++++
 examples/with-redux/package.json        |  2 +-
 examples/with-redux/pages/index.js      |  6 ++---
 examples/with-redux/pages/other.js      | 34 +++++++++++++++++++++++++
 examples/with-redux/store.js            |  2 +-
 6 files changed, 56 insertions(+), 10 deletions(-)
 create mode 100644 examples/with-redux/components/Page.js
 create mode 100644 examples/with-redux/pages/other.js

diff --git a/examples/with-redux/components/Clock.js b/examples/with-redux/components/Clock.js
index 3174e21789d78..bd09f5407e73d 100644
--- a/examples/with-redux/components/Clock.js
+++ b/examples/with-redux/components/Clock.js
@@ -1,7 +1,4 @@
-import React from 'react'
-import { connect } from 'react-redux'
-
-export default connect(state => state)(({ lastUpdate, light }) => {
+export default ({ lastUpdate, light }) => {
   return (
     <div className={light ? 'light' : ''}>
       {format(new Date(lastUpdate))}
@@ -20,7 +17,7 @@ export default connect(state => state)(({ lastUpdate, light }) => {
       `}</style>
     </div>
   )
-})
+}
 
 const format = t => `${pad(t.getHours())}:${pad(t.getMinutes())}:${pad(t.getSeconds())}`
 
diff --git a/examples/with-redux/components/Page.js b/examples/with-redux/components/Page.js
new file mode 100644
index 0000000000000..7846bbb236a86
--- /dev/null
+++ b/examples/with-redux/components/Page.js
@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import { connect } from 'react-redux'
+import Clock from './Clock'
+
+export default connect(state => state)(({ title, linkTo, lastUpdate, light }) => {
+  return (
+    <div>
+      <h1>{title}</h1>
+      <Clock lastUpdate={lastUpdate} light={light} />
+      <nav>
+        <Link href={linkTo}>Navigate</Link>
+      </nav>
+    </div>
+  )
+})
diff --git a/examples/with-redux/package.json b/examples/with-redux/package.json
index 242ebc5c34127..14ca195e88983 100644
--- a/examples/with-redux/package.json
+++ b/examples/with-redux/package.json
@@ -7,7 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "*",
+    "next": "^2.0.0-beta",
     "react-redux": "^5.0.1",
     "redux": "^3.6.0",
     "redux-thunk": "^2.1.0"
diff --git a/examples/with-redux/pages/index.js b/examples/with-redux/pages/index.js
index f5abc581ca823..5cb1b96028a72 100644
--- a/examples/with-redux/pages/index.js
+++ b/examples/with-redux/pages/index.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import { Provider } from 'react-redux'
 import { reducer, initStore, startClock } from '../store'
-import Clock from '../components/Clock'
+import Page from '../components/Page'
 
 export default class Counter extends React.Component {
   static getInitialProps ({ req }) {
     const isServer = !!req
     const store = initStore(reducer, null, isServer)
-    store.dispatch({ type: 'TICK', ts: Date.now() })
+    store.dispatch({ type: 'TICK', light: !isServer, ts: Date.now() })
     return { initialState: store.getState(), isServer }
   }
 
@@ -27,7 +27,7 @@ export default class Counter extends React.Component {
   render () {
     return (
       <Provider store={this.store}>
-        <Clock />
+        <Page title='Index Page' linkTo='/other' />
       </Provider>
     )
   }
diff --git a/examples/with-redux/pages/other.js b/examples/with-redux/pages/other.js
new file mode 100644
index 0000000000000..b2d8a43def7d6
--- /dev/null
+++ b/examples/with-redux/pages/other.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import { reducer, initStore, startClock } from '../store'
+import Page from '../components/Page'
+
+export default class Counter extends React.Component {
+  static getInitialProps ({ req }) {
+    const isServer = !!req
+    const store = initStore(reducer, null, isServer)
+    store.dispatch({ type: 'TICK', light: !isServer, ts: Date.now() })
+    return { initialState: store.getState(), isServer }
+  }
+
+  constructor (props) {
+    super(props)
+    this.store = initStore(reducer, props.initialState, props.isServer)
+  }
+
+  componentDidMount () {
+    this.timer = this.store.dispatch(startClock())
+  }
+
+  componentWillUnmount () {
+    clearInterval(this.timer)
+  }
+
+  render () {
+    return (
+      <Provider store={this.store}>
+        <Page title='Other Page' linkTo='/' />
+      </Provider>
+    )
+  }
+}
diff --git a/examples/with-redux/store.js b/examples/with-redux/store.js
index d9c05f7f532e1..250e47f2148df 100644
--- a/examples/with-redux/store.js
+++ b/examples/with-redux/store.js
@@ -9,7 +9,7 @@ export const reducer = (state = { lastUpdate: 0, light: false }, action) => {
 }
 
 export const startClock = () => dispatch => {
-  setInterval(() => dispatch({ type: 'TICK', light: true, ts: Date.now() }), 800)
+  return setInterval(() => dispatch({ type: 'TICK', light: true, ts: Date.now() }), 800)
 }
 
 export const initStore = (reducer, initialState, isServer) => {