refactor contentviews, dropdown, filemenu and footer

1 files changed, 36 insertions, 61 deletions

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(