Merge pull request #1169 from gzzhanghao/contentview

[web] Eliminate Router mixin and RawMixin

2 files changed, 49 insertions, 21 deletions

diff --git a/web/src/js/components/flowview/contentview.js b/web/src/js/components/flowview/contentview.js
index 2743eec3..cbac9a75 100644
--- a/web/src/js/components/flowview/contentview.js
+++ b/web/src/js/components/flowview/contentview.js
@@ -4,11 +4,15 @@ import _ from "lodash";
 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({
+    propTypes: {
+        flow: React.PropTypes.object.isRequired,
+        message: React.PropTypes.object.isRequired,
+    },
     statics: {
+        regex: /^image\/(png|jpe?g|gif|vnc.microsoft.icon|x-icon)$/i,
         matches: function (message) {
-            return image_regex.test(MessageUtils.getContentType(message));
+            return ViewImage.regex.test(MessageUtils.getContentType(message));
         }
     },
     render: function () {
@@ -19,7 +23,11 @@ var ViewImage = React.createClass({
     }
 });
 
-var RawMixin = {
+var ContentLoader = React.createClass({
+    propTypes: {
+        flow: React.PropTypes.object.isRequired,
+        message: React.PropTypes.object.isRequired,
+    },
     getInitialState: function () {
         return {
             content: undefined,
@@ -66,41 +74,54 @@ var RawMixin = {
                 <i className="fa fa-spinner fa-spin"></i>
             </div>;
         }
-        return this.renderContent();
+        return React.cloneElement(this.props.children, {
+            content: this.state.content
+        })
     }
-};
+});
 
 var ViewRaw = React.createClass({
-    mixins: [RawMixin],
+    propTypes: {
+        content: React.PropTypes.string.isRequired,
+    },
     statics: {
+        textView: true,
         matches: function (message) {
             return true;
         }
     },
-    renderContent: function () {
-        return <pre>{this.state.content}</pre>;
+    render: function () {
+        return <pre>{this.props.content}</pre>;
     }
 });
 
-var json_regex = /^application\/json$/i;
 var ViewJSON = React.createClass({
-    mixins: [RawMixin],
+    propTypes: {
+        content: React.PropTypes.string.isRequired,
+    },
     statics: {
+        textView: true,
+        regex: /^application\/json$/i,
         matches: function (message) {
-            return json_regex.test(MessageUtils.getContentType(message));
+            return ViewJSON.regex.test(MessageUtils.getContentType(message));
         }
     },
-    renderContent: function () {
-        var json = this.state.content;
+    render: function () {
+        var json = this.props.content;
         try {
             json = JSON.stringify(JSON.parse(json), null, 2);
         } catch (e) {
+            // @noop
         }
         return <pre>{json}</pre>;
     }
 });
 
 var ViewAuto = React.createClass({
+    propTypes: {
+        message: React.PropTypes.object.isRequired,
+        flow: React.PropTypes.object.isRequired,
+    },
     statics: {
         matches: function () {
             return false; // don't match itself
@@ -115,14 +136,18 @@ var ViewAuto = React.createClass({
         }
     },
     render: function () {
+        var { message, flow } = this.props
         var View = ViewAuto.findView(this.props.message);
-        return <View {...this.props}/>;
+        if (View.textView) {
+            return <ContentLoader message={message} flow={flow}><View content="" /></ContentLoader>
+        } else {
+            return <View message={message} flow={flow} />
+        }
     }
 });
 
 var all = [ViewAuto, ViewImage, ViewJSON, ViewRaw];
 
-
 var ContentEmpty = React.createClass({
     render: function () {
         var message_name = this.props.flow.request === this.props.message ? "request" : "response";
@@ -210,6 +235,7 @@ var ContentView = React.createClass({
         }
     },
     render: function () {
+        var { flow, message } = this.props
         var message = this.props.message;
         if (message.contentLength === 0) {
             return <ContentEmpty {...this.props}/>;
@@ -222,7 +248,11 @@ var ContentView = React.createClass({
         var downloadUrl = MessageUtils.getContentURL(this.props.flow, message);
 
         return <div>
-            <this.state.View {...this.props} />
+            {this.state.View.textView ? (
+                <ContentLoader flow={flow} message={message}><this.state.View content="" /></ContentLoader>
+            ) : (
+                <this.state.View flow={flow} message={message} />
+            )}
             <div className="view-options text-center">
                 <ViewSelector selectView={this.selectView} active={this.state.View} message={message}/>
             &nbsp;
@@ -234,4 +264,4 @@ var ContentView = React.createClass({
     }
 });
 
-export default ContentView;
\ No newline at end of file
+export default ContentView;
diff --git a/web/src/js/components/flowview/index.js b/web/src/js/components/flowview/index.js
index 47531f58..6f4f7395 100644
--- a/web/src/js/components/flowview/index.js
+++ b/web/src/js/components/flowview/index.js
@@ -1,6 +1,5 @@
 import React from "react";
 
-import {Router, StickyHeadMixin} from "../common.js"
 import Nav from "./nav.js";
 import {Request, Response, Error} from "./messages.js";
 import Details from "./details.js";
@@ -15,7 +14,6 @@ var allTabs = {
 };
 
 var FlowView = React.createClass({
-    mixins: [StickyHeadMixin, Router],
     getInitialState: function () {
         return {
             prompt: false
@@ -39,7 +37,7 @@ var FlowView = React.createClass({
         this.selectTab(tabs[nextIndex]);
     },
     selectTab: function (panel) {
-        this.updateLocation(`/flows/${this.props.flow.id}/${panel}`);
+        this.props.updateLocation(`/flows/${this.props.flow.id}/${panel}`);
     },
     promptEdit: function () {
         var options;
@@ -114,4 +112,4 @@ var FlowView = React.createClass({
     }
 });
 
-export default FlowView;
\ No newline at end of file
+export default FlowView;