web: use es6 modules

5 files changed, 69 insertions, 77 deletions

diff --git a/web/src/js/components/flowview/contentview.js b/web/src/js/components/flowview/contentview.js
index 63d22c1c..2743eec3 100644
--- a/web/src/js/components/flowview/contentview.js
+++ b/web/src/js/components/flowview/contentview.js
@@ -1,8 +1,8 @@
-var React = require("react");
-var _ = require("lodash");
+import React from "react";
+import _ from "lodash";
 
-var MessageUtils = require("../../flow/utils.js").MessageUtils;
-var utils = require("../../utils.js");
+import {MessageUtils} from "../../flow/utils.js";
+import {formatSize} from "../../utils.js";
 
 var image_regex = /^image\/(png|jpe?g|gif|vnc.microsoft.icon|x-icon)$/i;
 var ViewImage = React.createClass({
@@ -145,7 +145,7 @@ var TooLarge = React.createClass({
         }
     },
     render: function () {
-        var size = utils.formatSize(this.props.message.contentLength);
+        var size = formatSize(this.props.message.contentLength);
         return <div className="alert alert-warning">
             <button onClick={this.props.onClick} className="btn btn-xs btn-warning pull-right">Display anyway</button>
             {size} content size.
@@ -234,4 +234,4 @@ var ContentView = React.createClass({
     }
 });
 
-module.exports = ContentView;
\ No newline at end of file
+export default ContentView;
\ No newline at end of file
diff --git a/web/src/js/components/flowview/details.js b/web/src/js/components/flowview/details.js
index 00e0116c..45fe1292 100644
--- a/web/src/js/components/flowview/details.js
+++ b/web/src/js/components/flowview/details.js
@@ -1,7 +1,7 @@
-var React = require("react");
-var _ = require("lodash");
+import React from "react";
+import _ from "lodash";
 
-var utils = require("../../utils.js");
+import {formatTimeStamp, formatTimeDelta} from "../../utils.js";
 
 var TimeStamp = React.createClass({
     render: function () {
@@ -11,11 +11,11 @@ var TimeStamp = React.createClass({
             return <tr></tr>;
         }
 
-        var ts = utils.formatTimeStamp(this.props.t);
+        var ts = formatTimeStamp(this.props.t);
 
         var delta;
         if (this.props.deltaTo) {
-            delta = utils.formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
+            delta = formatTimeDelta(1000 * (this.props.t - this.props.deltaTo));
             delta = <span className="text-muted">{"(" + delta + ")"}</span>;
         } else {
             delta = null;
@@ -178,4 +178,4 @@ var Details = React.createClass({
     }
 });
 
-module.exports = Details;
\ No newline at end of file
+export default Details;
\ No newline at end of file
diff --git a/web/src/js/components/flowview/index.js b/web/src/js/components/flowview/index.js
index bd34fe8d..47531f58 100644
--- a/web/src/js/components/flowview/index.js
+++ b/web/src/js/components/flowview/index.js
@@ -1,17 +1,16 @@
-var React = require("react");
-var _ = require("lodash");
+import React from "react";
 
-import { Router, StickyHeadMixin } from "../common.js"
-var Nav = require("./nav.js");
-var Messages = require("./messages.js");
-var Details = require("./details.js");
-var Prompt = require("../prompt.js");
+import {Router, StickyHeadMixin} from "../common.js"
+import Nav from "./nav.js";
+import {Request, Response, Error} from "./messages.js";
+import Details from "./details.js";
+import Prompt from "../prompt.js";
 
 
 var allTabs = {
-    request: Messages.Request,
-    response: Messages.Response,
-    error: Messages.Error,
+    request: Request,
+    response: Response,
+    error: Error,
     details: Details
 };
 
@@ -40,22 +39,22 @@ var FlowView = React.createClass({
         this.selectTab(tabs[nextIndex]);
     },
     selectTab: function (panel) {
-        this.updateLocation(`/flows/${this.getParams().flowId}/${panel}`);
+        this.updateLocation(`/flows/${this.props.flow.id}/${panel}`);
     },
     promptEdit: function () {
         var options;
-        switch(this.props.tab){
+        switch (this.props.tab) {
             case "request":
                 options = [
                     "method",
                     "url",
-                    {text:"http version", key:"v"},
+                    {text: "http version", key: "v"},
                     "header"
                     /*, "content"*/];
                 break;
             case "response":
                 options = [
-                    {text:"http version", key:"v"},
+                    {text: "http version", key: "v"},
                     "code",
                     "message",
                     "header"
@@ -71,7 +70,7 @@ var FlowView = React.createClass({
             prompt: {
                 done: function (k) {
                     this.setState({prompt: false});
-                    if(k){
+                    if (k) {
                         this.refs.tab.edit(k);
                     }
                 }.bind(this),
@@ -104,10 +103,10 @@ var FlowView = React.createClass({
         return (
             <div className="flow-detail" onScroll={this.adjustHead}>
                 <Nav ref="head"
-                    flow={flow}
-                    tabs={tabs}
-                    active={active}
-                    selectTab={this.selectTab}/>
+                     flow={flow}
+                     tabs={tabs}
+                     active={active}
+                     selectTab={this.selectTab}/>
                 <Tab ref="tab" flow={flow}/>
                 {prompt}
             </div>
@@ -115,4 +114,4 @@ var FlowView = React.createClass({
     }
 });
 
-module.exports = FlowView;
\ No newline at end of file
+export default FlowView;
\ No newline at end of file
diff --git a/web/src/js/components/flowview/messages.js b/web/src/js/components/flowview/messages.js
index c11ee46f..2885b3b1 100644
--- a/web/src/js/components/flowview/messages.js
+++ b/web/src/js/components/flowview/messages.js
@@ -1,13 +1,12 @@
-var React = require("react");
-var ReactDOM = require('react-dom');
-var _ = require("lodash");
+import React from "react";
+import ReactDOM from 'react-dom';
+import _ from "lodash";
 
-var common = require("../common.js");
-var actions = require("../../actions.js");
-var flowutils = require("../../flow/utils.js");
-var utils = require("../../utils.js");
-var ContentView = require("./contentview.js");
-var ValueEditor = require("../editor.js").ValueEditor;
+import {FlowActions} from "../../actions.js";
+import {RequestUtils, isValidHttpVersion, parseUrl, parseHttpVersion} from "../../flow/utils.js";
+import {Key, formatTimeStamp} from "../../utils.js";
+import ContentView from "./contentview.js";
+import {ValueEditor} from "../editor.js";
 
 var Headers = React.createClass({
     propTypes: {
@@ -103,13 +102,13 @@ var HeaderEditor = React.createClass({
     },
     onKeyDown: function (e) {
         switch (e.keyCode) {
-            case utils.Key.BACKSPACE:
+            case Key.BACKSPACE:
                 var s = window.getSelection().getRangeAt(0);
                 if (s.startOffset === 0 && s.endOffset === 0) {
                     this.props.onRemove(e);
                 }
                 break;
-            case utils.Key.TAB:
+            case Key.TAB:
                 if (!e.shiftKey) {
                     this.props.onTab(e);
                 }
@@ -121,7 +120,7 @@ var HeaderEditor = React.createClass({
 var RequestLine = React.createClass({
     render: function () {
         var flow = this.props.flow;
-        var url = flowutils.RequestUtils.pretty_url(flow.request);
+        var url = RequestUtils.pretty_url(flow.request);
         var httpver = flow.request.http_version;
 
         return <div className="first-line request-line">
@@ -142,31 +141,31 @@ var RequestLine = React.createClass({
                 ref="httpVersion"
                 content={httpver}
                 onDone={this.onHttpVersionChange}
-                isValid={flowutils.isValidHttpVersion}
+                isValid={isValidHttpVersion}
                 inline/>
         </div>
     },
     isValidUrl: function (url) {
-        var u = flowutils.parseUrl(url);
+        var u = parseUrl(url);
         return !!u.host;
     },
     onMethodChange: function (nextMethod) {
-        actions.FlowActions.update(
+        FlowActions.update(
             this.props.flow,
             {request: {method: nextMethod}}
         );
     },
     onUrlChange: function (nextUrl) {
-        var props = flowutils.parseUrl(nextUrl);
+        var props = parseUrl(nextUrl);
         props.path = props.path || "";
-        actions.FlowActions.update(
+        FlowActions.update(
             this.props.flow,
             {request: props}
         );
     },
     onHttpVersionChange: function (nextVer) {
-        var ver = flowutils.parseHttpVersion(nextVer);
-        actions.FlowActions.update(
+        var ver = parseHttpVersion(nextVer);
+        FlowActions.update(
             this.props.flow,
             {request: {http_version: ver}}
         );
@@ -182,7 +181,7 @@ var ResponseLine = React.createClass({
                 ref="httpVersion"
                 content={httpver}
                 onDone={this.onHttpVersionChange}
-                isValid={flowutils.isValidHttpVersion}
+                isValid={isValidHttpVersion}
                 inline/>
         &nbsp;
             <ValueEditor
@@ -194,7 +193,7 @@ var ResponseLine = React.createClass({
         &nbsp;
             <ValueEditor
                 ref="msg"
-                content={flow.response.msg}
+                content={flow.response.reason}
                 onDone={this.onMsgChange}
                 inline/>
         </div>;
@@ -203,28 +202,28 @@ var ResponseLine = React.createClass({
         return /^\d+$/.test(code);
     },
     onHttpVersionChange: function (nextVer) {
-        var ver = flowutils.parseHttpVersion(nextVer);
-        actions.FlowActions.update(
+        var ver = parseHttpVersion(nextVer);
+        FlowActions.update(
             this.props.flow,
             {response: {http_version: ver}}
         );
     },
     onMsgChange: function (nextMsg) {
-        actions.FlowActions.update(
+        FlowActions.update(
             this.props.flow,
             {response: {msg: nextMsg}}
         );
     },
     onCodeChange: function (nextCode) {
         nextCode = parseInt(nextCode);
-        actions.FlowActions.update(
+        FlowActions.update(
             this.props.flow,
             {response: {code: nextCode}}
         );
     }
 });
 
-var Request = React.createClass({
+export var Request = React.createClass({
     render: function () {
         var flow = this.props.flow;
         return (
@@ -256,7 +255,7 @@ var Request = React.createClass({
         }
     },
     onHeaderChange: function (nextHeaders) {
-        actions.FlowActions.update(this.props.flow, {
+        FlowActions.update(this.props.flow, {
             request: {
                 headers: nextHeaders
             }
@@ -264,7 +263,7 @@ var Request = React.createClass({
     }
 });
 
-var Response = React.createClass({
+export var Response = React.createClass({
     render: function () {
         var flow = this.props.flow;
         return (
@@ -296,7 +295,7 @@ var Response = React.createClass({
         }
     },
     onHeaderChange: function (nextHeaders) {
-        actions.FlowActions.update(this.props.flow, {
+        FlowActions.update(this.props.flow, {
             response: {
                 headers: nextHeaders
             }
@@ -304,7 +303,7 @@ var Response = React.createClass({
     }
 });
 
-var Error = React.createClass({
+export var Error = React.createClass({
     render: function () {
         var flow = this.props.flow;
         return (
@@ -312,16 +311,10 @@ var Error = React.createClass({
                 <div className="alert alert-warning">
                 {flow.error.msg}
                     <div>
-                        <small>{ utils.formatTimeStamp(flow.error.timestamp) }</small>
+                        <small>{ formatTimeStamp(flow.error.timestamp) }</small>
                     </div>
                 </div>
             </section>
         );
     }
 });
-
-module.exports = {
-    Request: Request,
-    Response: Response,
-    Error: Error
-};
diff --git a/web/src/js/components/flowview/nav.js b/web/src/js/components/flowview/nav.js
index 46eda707..a12fd1fd 100644
--- a/web/src/js/components/flowview/nav.js
+++ b/web/src/js/components/flowview/nav.js
@@ -1,6 +1,6 @@
-var React = require("react");
+import React from "react";
 
-var actions = require("../../actions.js");
+import {FlowActions} from "../../actions.js";
 
 var NavAction = React.createClass({
     onClick: function (e) {
@@ -38,19 +38,19 @@ var Nav = React.createClass({
 
         var acceptButton = null;
         if(flow.intercepted){
-            acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={actions.FlowActions.accept.bind(null, flow)} />;
+            acceptButton = <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={FlowActions.accept.bind(null, flow)} />;
         }
         var revertButton = null;
         if(flow.modified){
-            revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={actions.FlowActions.revert.bind(null, flow)} />;
+            revertButton = <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={FlowActions.revert.bind(null, flow)} />;
         }
 
         return (
             <nav ref="head" className="nav-tabs nav-tabs-sm">
                 {tabs}
-                <NavAction title="[d]elete flow" icon="fa-trash" onClick={actions.FlowActions.delete.bind(null, flow)} />
-                <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={actions.FlowActions.duplicate.bind(null, flow)} />
-                <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={actions.FlowActions.replay.bind(null, flow)} />
+                <NavAction title="[d]elete flow" icon="fa-trash" onClick={FlowActions.delete.bind(null, flow)} />
+                <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={FlowActions.duplicate.bind(null, flow)} />
+                <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={FlowActions.replay.bind(null, flow)} />
                 {acceptButton}
                 {revertButton}
             </nav>
@@ -58,4 +58,4 @@ var Nav = React.createClass({
     }
 });
 
-module.exports = Nav;
\ No newline at end of file
+export default Nav;
\ No newline at end of file