Use react-router to fully support /123 URLs

Author: danvk

bower.json

@@ -18,6 +18,7 @@
     "jquery": "~2.1.1",
     "highlightjs": "~8.0.0",
     "underscore": "~1.6.0",
-    "react": "~0.11.1"
+    "react": "~0.11.1",
+    "react-router": "~0.10.2"
   }
 }

webdiff/app.py

@@ -143,15 +143,12 @@ def index():
         return file_diff('0')
 
 
-@app.route("/<idx>")
+@app.route("/<int:idx>")
 def file_diff(idx):
     idx = int(idx)
     return render_template('file_diff.html',
                            idx=idx,
-                           pairs=DIFF,
-                           this_pair=DIFF[idx],
-                           is_image_diff=util.is_image_diff(DIFF[idx]),
-                           num_pairs=len(DIFF))
+                           pairs=DIFF)
 
 
 @app.route('/favicon.ico')
@@ -172,7 +169,8 @@ def seriouslykill():
 
 @app.route('/kill', methods=['POST'])
 def kill():
-    if 'STAY_RUNNING' in app.config: return
+    if 'STAY_RUNNING' in app.config:
+        return 'Will stay running.'
 
     last_ms = LAST_REQUEST_MS
     def shutdown():
@@ -183,7 +181,7 @@ def shutdown():
 
     Timer(0.5, shutdown).start()
 
-    return "Shutting down..."
+    return 'Shutting down...'
 
 
 def open_browser():

webdiff/static/js/components.jsx

@@ -1,30 +1,41 @@
 /** @jsx React.DOM */
+var Route = ReactRouter.Route;
+var Routes = ReactRouter.Routes;
+var Link = ReactRouter.Link;
 
 IMAGE_DIFF_MODES = ['side-by-side', 'blink', 'onion-skin', 'swipe'];
 
 // Webdiff application root.
 var Root = React.createClass({
   propTypes: {
-    filePairs: React.PropTypes.array.isRequired
+    filePairs: React.PropTypes.array.isRequired,
+    initiallySelectedIndex: React.PropTypes.number,
+    params: React.PropTypes.object
   },
+  mixins: [ReactRouter.Navigation],
   getInitialState: () => ({
-    selectedFileIndex: 0,
     imageDiffMode: 'side-by-side'
   }),
-  fileChangeHandler: function(idx) {
-    this.setState({selectedFileIndex: idx});
+  selectIndex: function(idx) {
+    this.transitionTo('pair', {index:idx});
+  },
+  getIndex: function() {
+    var idx = this.props.params.index;
+    if (idx == null) idx = this.props.initiallySelectedIndex;
+    return Number(idx);
   },
   changeImageDiffModeHandler: function(mode) {
     this.setState({imageDiffMode: mode});
   },
   render: function() {
-    var filePair = this.props.filePairs[this.state.selectedFileIndex];
+    var idx = this.getIndex(),
+        filePair = this.props.filePairs[idx];
 
     return (
       <div>
-        <FileSelector selectedFileIndex={this.state.selectedFileIndex}
+        <FileSelector selectedFileIndex={idx}
                       filePairs={this.props.filePairs}
-                      fileChangeHandler={this.fileChangeHandler} />
+                      fileChangeHandler={this.selectIndex} />
         <DiffView filePair={filePair}
                   imageDiffMode={this.state.imageDiffMode}
                   changeImageDiffModeHandler={this.changeImageDiffModeHandler} />
@@ -34,14 +45,14 @@ var Root = React.createClass({
   componentDidMount: function() {
     $(document).on('keydown', (e) => {
       if (!isLegitKeypress(e)) return;
-      var idx = this.state.selectedFileIndex;
+      var idx = this.getIndex();
       if (e.keyCode == 75) {  // j
         if (idx > 0) {
-          this.setState({selectedFileIndex: idx - 1});
+          this.selectIndex(idx - 1);
         }
       } else if (e.keyCode == 74) {  // k
         if (idx < this.props.filePairs.length - 1) {
-          this.setState({selectedFileIndex: idx + 1});
+          this.selectIndex(idx + 1);
         }
       } else if (e.keyCode == 83) {  // s
         this.setState({imageDiffMode: 'side-by-side'});

webdiff/templates/base.html

@@ -11,6 +11,7 @@
 
   <script src="/static/components/react/react.js"></script>
   <script src="/static/components/react/JSXTransformer.js"></script>
+  <script src="/static/components/react-router/dist/react-router.js"></script>
 
   <script src="/static/codediff.js/difflib.js"></script>
   <script src="/static/codediff.js/codediff.js"></script>

webdiff/templates/file_diff.html

@@ -11,13 +11,42 @@
 
 <script src="/static/js/file_diff.js"></script>
 
-<script>var pairs = {{pairs|tojson}};</script>
+<script>
+var pairs = {{pairs|tojson}};
+var initialIdx = {{idx|tojson}};
+</script>
 
 <script type="text/jsx;harmony=true" src="/static/js/util.js"></script>
 <script type="text/jsx;harmony=true" src="/static/js/components.jsx"></script>
 <script type="text/jsx;harmony=true">
 /** @jsx React.DOM */
-React.renderComponent(<Root filePairs={pairs} />, $('#application').get(0));
+
+var Route = ReactRouter.Route;
+var Routes = ReactRouter.Routes;
+
+var App = React.createClass({
+  render: function() {
+    return this.props.activeRouteHandler();
+  }
+});
+
+var routes = (
+  <Routes location="history">
+    <Route handler={App}>
+      <Route name="pair" path="/:index?" handler={Root}
+             filePairs={pairs}
+             initiallySelectedIndex={initialIdx} />
+    </Route>
+  </Routes>
+);
+
+React.renderComponent(routes, $('#application').get(0));
+</script>
+
+<script>
+window.addEventListener('beforeunload', function(e) {
+  $.post('/kill');
+});
 </script>
 
 {% endblock %}