From ce49aafc4d966c9204dbaad6902c0ebbeefe3911 Mon Sep 17 00:00:00 2001
From: Riley Eynon-Lynch <riley@peardeck.com>
Date: Tue, 27 Oct 2015 15:50:53 -0500
Subject: [PATCH] Color link, apply to todo example, and generalize store
 access

---
 examples/todomvc/containers/App.js |  9 +++++++--
 src/react/LinkToState.js           | 21 +++++++++++++--------
 src/react/LogMonitor.js            |  4 +---
 src/urlState.js                    |  6 ++++++
 4 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/examples/todomvc/containers/App.js b/examples/todomvc/containers/App.js
index f2166ea7..e37efb7c 100644
--- a/examples/todomvc/containers/App.js
+++ b/examples/todomvc/containers/App.js
@@ -1,14 +1,19 @@
 import React, { Component } from 'react';
 import TodoApp from './TodoApp';
 import { createStore, combineReducers, compose } from 'redux';
-import { devTools, persistState } from 'redux-devtools';
+import { devTools, persistState, urlState } from 'redux-devtools';
 import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
 import { Provider } from 'react-redux';
 import * as reducers from '../reducers';
 
+
+const devStateJsonMatches = window.location.href.match(/[?&]dev_state=([^&]+)\b/);
+const devStateJson = devStateJsonMatches ? devStateJsonMatches[1] : null;
+
 const finalCreateStore = compose(
   devTools(),
-  persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
+  persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)),
+  urlState(devStateJson)
 )(createStore);
 
 const reducer = combineReducers(reducers);
diff --git a/src/react/LinkToState.js b/src/react/LinkToState.js
index 09c2ec30..01cd308c 100644
--- a/src/react/LinkToState.js
+++ b/src/react/LinkToState.js
@@ -1,16 +1,21 @@
 import React, { PropTypes, Component } from 'react';
+import { getUrlForState } from '../urlState';
 
-export default class LogMonitor extends Component {
+const styles = {
+  link: {
+    color: '#6FB3D2'
+  }
+};
+
+export default class LinkToState extends Component {
   static propTypes = {
-    computedState: PropTypes.object.isRequired
+    fullAppState: PropTypes.object.isRequired
   };
 
   render() {
-    const stateUriComponent = encodeURIComponent(JSON.stringify(this.props.computedState));
-
-    // TODO: don't blow away other params
-    const urlForThisState = `?reduxDevState=${stateUriComponent}`;
-
-    return <a href={urlForThisState}>Current State</a>;
+    const urlForState = getUrlForState(this.props.fullAppState);
+    return <a style={{...styles.link}} href={urlForState}>
+      Current State
+    </a>;
   }
 }
diff --git a/src/react/LogMonitor.js b/src/react/LogMonitor.js
index c972193a..2e0492cc 100644
--- a/src/react/LogMonitor.js
+++ b/src/react/LogMonitor.js
@@ -178,8 +178,6 @@ export default class LogMonitor extends Component {
       );
     }
 
-    const currentState = computedStates[computedStates.length - 1];
-    
     return (
       <div style={{...styles.container, backgroundColor: theme.base00}}>
         <div style={{...styles.buttonBar, borderColor: theme.base02}}>
@@ -189,7 +187,7 @@ export default class LogMonitor extends Component {
           <LogMonitorButton theme={theme} onClick={::this.handleCommit} enabled={computedStates.length > 1}>Commit</LogMonitorButton>
         </div>
         <div>
-          <LinkToState computedState={{ monitorState, skippedActions, stagedActions, computedStates, select }} />
+          <LinkToState fullAppState={ this.props.store.getState() } />
         </div>
         <div style={styles.elements} ref="elements">
           {elements}
diff --git a/src/urlState.js b/src/urlState.js
index 83d06b7c..c54c49fa 100644
--- a/src/urlState.js
+++ b/src/urlState.js
@@ -13,6 +13,12 @@ function deserializeState(json) {
   }
 }
 
+export function getUrlForState(state) {
+  const stateUriComponent = serializeState(state);
+
+  // TODO: don't blow away other params
+  return `?dev_state=${stateUriComponent}`;
+}
 
 export default function urlEncodedStateReducer(stateUriComponent) {
   return next => (reducer, initialState) => {