refactor contentviews, dropdown, filemenu and footer

5 files changed, 83 insertions, 93 deletions

diff --git a/web/src/css/dropdown.less b/web/src/css/dropdown.less
new file mode 100644
index 00000000..663373b3
--- /dev/null
+++ b/web/src/css/dropdown.less
@@ -0,0 +1,4 @@
+hr .divider {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx
index cd593023..5b07969c 100644
--- a/web/src/js/components/ContentView/ContentViews.jsx
+++ b/web/src/js/components/ContentView/ContentViews.jsx
@@ -30,6 +30,12 @@ function Edit({ content, onChange }) {
 Edit = ContentLoader(Edit)
 
 class ViewServer extends Component {
+    static propTypes  = {
+        showFullContent: PropTypes.bool.isRequired,
+        maxLines: PropTypes.number.isRequired,
+        setContentViewDescription : PropTypes.func.isRequired,
+        setContent: PropTypes.func.isRequired
+    }
 
     componentWillMount(){
         this.setContentView(this.props)
@@ -40,6 +46,7 @@ class ViewServer extends Component {
             this.setContentView(nextProps)
         }
     }
+
     setContentView(props){
         try {
             this.data = JSON.parse(props.content)
@@ -50,25 +57,31 @@ class ViewServer extends Component {
         props.setContentViewDescription(props.contentView != this.data.description ? this.data.description : '')
         props.setContent(this.data.lines)
     }
+
     render() {
         const {content, contentView, message, maxLines} = this.props
         let lines = this.props.showFullContent ? this.data.lines : this.data.lines.slice(0, maxLines)
-        return <div>
+        return (
+            <div>
                 <pre>
                     {lines.map((line, i) =>
                         <div key={`line${i}`}>
-                            {line.map((tuple, j) =>
-                                <span key={`tuple${j}`} className={tuple[0]}>
-                                    {tuple[1]}
-                                </span>
-                            )}
+                            {line.map((element, j) => {
+                                let style, text = element
+                                return (
+                                    <span key={`tuple${j}`} className={style}>
+                                        {element}
+                                    </span>
+                                )
+                            })}
                         </div>
                     )}
                 </pre>
-            {ViewImage.matches(message) &&
-            <ViewImage {...this.props} />
-            }
-        </div>
+                {ViewImage.matches(message) &&
+                <ViewImage {...this.props} />
+                }
+            </div>
+        )
     }
 
 }
diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx
index 2bda70e1..96e7b7db 100644
--- a/web/src/js/components/Footer.jsx
+++ b/web/src/js/components/Footer.jsx
@@ -7,40 +7,41 @@ Footer.propTypes = {
 }
 
 function Footer({ settings }) {
+    let {mode, intercept, showhost, no_upstream_cert, rawtcp, http2, anticache, anticomp, stickyauth, stickycookie, stream} = settings;
     return (
         <footer>
-            {settings.mode && settings.mode != "regular" && (
-                <span className="label label-success">{settings.mode} mode</span>
+            {mode && mode != "regular" && (
+                <span className="label label-success">{mode} mode</span>
             )}
-            {settings.intercept && (
-                <span className="label label-success">Intercept: {settings.intercept}</span>
+            {intercept && (
+                <span className="label label-success">Intercept: {intercept}</span>
             )}
-            {settings.showhost && (
+            {showhost && (
                 <span className="label label-success">showhost</span>
             )}
-            {settings.no_upstream_cert && (
+            {no_upstream_cert && (
                 <span className="label label-success">no-upstream-cert</span>
             )}
-            {settings.rawtcp && (
+            {rawtcp && (
                 <span className="label label-success">raw-tcp</span>
             )}
-            {!settings.http2 && (
+            {!http2 && (
                 <span className="label label-success">no-http2</span>
             )}
-            {settings.anticache && (
+            {anticache && (
                 <span className="label label-success">anticache</span>
             )}
-            {settings.anticomp && (
+            {anticomp && (
                 <span className="label label-success">anticomp</span>
             )}
-            {settings.stickyauth && (
-                <span className="label label-success">stickyauth: {settings.stickyauth}</span>
+            {stickyauth && (
+                <span className="label label-success">stickyauth: {stickyauth}</span>
             )}
-            {settings.stickycookie && (
-                <span className="label label-success">stickycookie: {settings.stickycookie}</span>
+            {stickycookie && (
+                <span className="label label-success">stickycookie: {stickycookie}</span>
             )}
-            {settings.stream && (
-                <span className="label label-success">stream: {formatSize(settings.stream)}</span>
+            {stream && (
+                <span className="label label-success">stream: {formatSize(stream)}</span>
             )}
         </footer>
     )
diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx
index 6053b2d3..53c63ea1 100644
--- a/web/src/js/components/Header/FileMenu.jsx
+++ b/web/src/js/components/Header/FileMenu.jsx
@@ -1,71 +1,46 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
-import classnames from 'classnames'
 import FileChooser from '../common/FileChooser'
-import Dropdown from '../common/Dropdown'
+import Dropdown, {Divider} from '../common/Dropdown'
 import * as flowsActions from '../../ducks/flows'
 
+FileMenu.propTypes = {
+    clearFlows: PropTypes.func.isRequired,
+    loadFlows: PropTypes.func.isRequired,
+    saveFlows: PropTypes.func.isRequired
+}
 
+FileMenu.onNewClick = (e, clearFlows) => {
+    e.preventDefault();
+    if (confirm('Delete all flows?'))
+        clearFlows()
+}
 
-class FileMenu extends Component {
-
-    static propTypes = {
-        clearFlows: PropTypes.func.isRequired,
-        loadFlows: PropTypes.func.isRequired,
-        saveFlows: PropTypes.func.isRequired
-    }
-
-    constructor(props, context) {
-        super(props, context)
-
-        this.onNewClick = this.onNewClick.bind(this)
-        this.onOpenClick = this.onOpenClick.bind(this)
-        this.onOpenFile = this.onOpenFile.bind(this)
-        this.onSaveClick = this.onSaveClick.bind(this)
-    }
-
-    onNewClick(e) {
-        e.preventDefault()
-        if (confirm('Delete all flows?')) {
-            this.props.clearFlows()
-        }
-    }
-    
-    onOpenFile(file) {
-        this.props.loadFlows(file)
-    }
-
-    onSaveClick(e) {
-        e.preventDefault()
-        this.props.saveFlows()
-    }
-
-    render() {
-        return (
-            <Dropdown className="pull-left" btnClass="special" text="mitmproxy">
-                <a href="#" onClick={this.onNewClick}>
-                    <i className="fa fa-fw fa-file"></i>
-                    New
-                </a>
-                <FileChooser
-                    icon="fa-folder-open"
-                    text="Open..."
-                    onOpenFile={this.onOpenFile}
-                />
-                <a href="#" onClick={this.onSaveClick}>
-                    <i className="fa fa-fw fa-floppy-o"></i>
-                    Save...
-                </a>
-
-                <span name="divider"/>
-
-                <a href="http://mitm.it/" target="_blank">
-                        <i className="fa fa-fw fa-external-link"></i>
-                        Install Certificates...
-                </a>
-            </Dropdown>
-        )
-    }
+function FileMenu ({clearFlows, loadFlows, saveFlows}) {
+     return (
+        <Dropdown className="pull-left" btnClass="special" text="mitmproxy">
+            <a href="#" onClick={e => FileMenu.onNewClick(e, clearFlows)}>
+                <i className="fa fa-fw fa-file"></i>
+                New
+            </a>
+            <FileChooser
+                icon="fa-folder-open"
+                text="Open..."
+                onOpenFile={file => loadFlows(file)}
+            />
+            <a href="#" onClick={e =>{ e.preventDefault(); saveFlows();}}>
+                <i className="fa fa-fw fa-floppy-o"></i>
+                Save...
+            </a>
+
+            <Divider/>
+
+            <a href="http://mitm.it/" target="_blank">
+                <i className="fa fa-fw fa-external-link"></i>
+                Install Certificates...
+            </a>
+        </Dropdown>
+    )
 }
 
 export default connect(
diff --git a/web/src/js/components/common/Dropdown.jsx b/web/src/js/components/common/Dropdown.jsx
index 9180767f..9db131d4 100644
--- a/web/src/js/components/common/Dropdown.jsx
+++ b/web/src/js/components/common/Dropdown.jsx
@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react'
 import classnames from 'classnames'
 
+export function Divider () { return  <hr className="divider"/>}
+
 export default class Dropdown extends Component {
 
     static propTypes = {
@@ -43,12 +45,7 @@ export default class Dropdown extends Component {
                     {text}
                 </a>
                 <ul className="dropdown-menu" role="menu">
-                    {children.map(item =>
-                        item.name == "divider" ?
-                            <li role="presentation" className="divider"/>
-                        :
-                            <li> {item} </li>
-                    )}
+                    {children.map ( (item, i) =>  <li key={i}> {item} </li> )}
                 </ul>
             </div>
         )