.jsx -> .jsx.js

Rename jsx files to be compatible with Chrome Dev Tools and
Workspace Mapping.

libmproxy/web/static/js/app.js

@@ -456,7 +456,7 @@ var FlowRow = React.createClass({displayName: 'FlowRow',
                 flow: flow
             });
         }.bind(this));
-        return React.DOM.tr(null, columns);
+        return React.DOM.tr({onClick: this.props.onClick}, columns);
     }
 });
 
@@ -473,7 +473,7 @@ var FlowTableBody = React.createClass({displayName: 'FlowTableBody',
     render: function(){
         var rows = this.props.flows.map(function(flow){
             //TODO: Add UUID
-            return FlowRow({flow: flow, columns: this.props.columns});
+            return FlowRow({onClick: this.props.onClick, flow: flow, columns: this.props.columns});
         }.bind(this));
         return React.DOM.tbody(null, rows);
     }
@@ -593,6 +593,9 @@ var FlowTable = React.createClass({displayName: 'FlowTable',
             flows: this.flowStore.getAll()
         });
     },
+    onClick: function(e){
+        console.log("rowclick", e);
+    },
     render: function () {
         var flows = this.state.flows.map(function(flow){
          return React.DOM.div(null, flow.request.method, " ", flow.request.scheme, "://", flow.request.host, flow.request.path);
@@ -600,7 +603,7 @@ var FlowTable = React.createClass({displayName: 'FlowTable',
         return (
             React.DOM.table({className: "flow-table"}, 
                 FlowTableHead({columns: this.state.columns}), 
-                FlowTableBody({columns: this.state.columns, flows: this.state.flows})
+                FlowTableBody({onClick: this.onClick, columns: this.state.columns, flows: this.state.flows})
             )
             );
     }

web/gulpfile.js

@@ -41,11 +41,11 @@ var path = {
             'js/stores/eventlogstore.js',
             'js/stores/flowstore.js',
             'js/connection.js',
-            'js/components/header.jsx',
-            'js/components/flowtable.jsx',
-            'js/components/eventlog.jsx',
-            'js/components/footer.jsx',
-            'js/components/proxyapp.jsx',
+            'js/components/header.jsx.js',
+            'js/components/flowtable.jsx.js',
+            'js/components/eventlog.jsx.js',
+            'js/components/footer.jsx.js',
+            'js/components/proxyapp.jsx.js',
             'js/app.js',
         ],
     },

web/src/js/components/flowtable.jsx.js

@@ -9,7 +9,7 @@ var FlowRow = React.createClass({
                 flow: flow
             });
         }.bind(this));
-        return <tr>{columns}</tr>;
+        return <tr onClick={this.props.onClick} >{columns}</tr>;
     }
 });
 
@@ -26,7 +26,7 @@ var FlowTableBody = React.createClass({
     render: function(){
         var rows = this.props.flows.map(function(flow){
             //TODO: Add UUID
-            return <FlowRow flow={flow} columns={this.props.columns}/>;
+            return <FlowRow onClick={this.props.onClick} flow={flow} columns={this.props.columns}/>;
         }.bind(this));
         return <tbody>{rows}</tbody>;
     }
@@ -146,6 +146,9 @@ var FlowTable = React.createClass({
             flows: this.flowStore.getAll()
         });
     },
+    onClick: function(e){
+        console.log("rowclick", e);
+    },
     render: function () {
         var flows = this.state.flows.map(function(flow){
          return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
@@ -153,7 +156,7 @@ var FlowTable = React.createClass({
         return (
             <table className="flow-table">
                 <FlowTableHead columns={this.state.columns}/>
-                <FlowTableBody columns={this.state.columns} flows={this.state.flows}/>
+                <FlowTableBody onClick={this.onClick} columns={this.state.columns} flows={this.state.flows}/>
             </table>
             );
     }