added a namespace field in tab search component

src/app/css/components/_search.scss

@@ -44,4 +44,12 @@
     border: none;
     outline: none;
     font-size: initial;
+}
+
+.namespace-text {
+    flex: 0.2;
+
+    input {
+        padding-left: 10px;
+    }
 }

src/app/js/components/search/NamespaceTextbar.js

@@ -0,0 +1,20 @@
+/**
+ * TextBar
+ *
+ * Renders the input field of the searchbar
+ *
+ * @property {String} namespace the current state of the input field
+ * @property {Function} changeNamespace handle inputchange
+ * @property {Function} setNamespaceAndUrl confirm namespace and url and save in redux store
+ */
+
+import React from 'react'
+
+const NamespaceTextBar = ({namespace, changeNamespace, setNamespaceAndUrl}) =>
+    <span className="search-text namespace-text">
+        <form className="search-text-form" onSubmit={setNamespaceAndUrl}>
+            <input onChange={changeNamespace} className="search-text-input" type="text" value={namespace} placeholder="namespace (optional)" />
+        </form>
+    </span>
+
+export default NamespaceTextBar

src/app/js/components/search/RefreshIcon.js

@@ -2,8 +2,8 @@ import React from 'react'
 
 import RepeatIcon from '../../icons/Repeat'
 
-const RefreshIcon = ({faded, setUrl}) =>
-    <span className="search-refresh" onClick={faded ? null : setUrl}>
+const RefreshIcon = ({faded, setNamespaceAndUrl}) =>
+    <span className="search-refresh" onClick={faded ? null : setNamespaceAndUrl}>
         <RepeatIcon size={24} color={faded ? '#9071b4' : '#333'} customStyle={faded ? {opacity: 0.2} : {}} />
     </span>
 

src/app/js/components/search/Search.js

@@ -15,10 +15,11 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
     return {
-        setUrl (id, url) {
+        setNamespaceAndUrl (id, namespace, url) {
             dispatch({
-                type: 'SET_URL',
+                type: 'SET_NAMESPACE_AND_URL',
                 id,
+                namespace,
                 url: makeSureItsGotHttp(url)
             })
         }

src/app/js/components/search/SearchView.js

@@ -12,6 +12,7 @@ import React, { Component } from 'react'
 
 import RefreshIcon from './RefreshIcon'
 import TextBar from './TextBar'
+import NamespaceTextBar from './NamespaceTextBar'
 
 class Search extends Component {
 
@@ -22,18 +23,21 @@ class Search extends Component {
 
         this.state = {
             tab,
-            url: tab.url || ''
+            url: tab.url || '',
+            namespace: tab.namespace || ''
         }
 
         this.changeUrl = this.changeUrl.bind(this)
-        this.setUrl = this.setUrl.bind(this)
+        this.changeNamespace = this.changeNamespace.bind(this)
+        this.setNamespaceAndUrl = this.setNamespaceAndUrl.bind(this)
     }
 
     componentWillReceiveProps(nextProps) {
         const tab = this.getThisTab(nextProps)
         this.setState({
             tab,
-            url: tab.url || ''
+            url: tab.url || '',
+            namespace: tab.namespace || ''
         })
     }
 
@@ -63,16 +67,29 @@ class Search extends Component {
         })
     }
 
+    /**
+     * Update namespace in component state
+     * 
+     * @param {Event} e
+     */
+    changeNamespace (e) {
+        this.setState({
+            namespace: e.target.value
+        })
+    }
+
     /**
      * Save new url to redux store
      * 
      * @param {Event} e
      */
-    setUrl (e) {
+    setNamespaceAndUrl (e) {
         e && e.preventDefault()
         const url = this.state.url
-        if ( url )
-            this.props.setUrl(this.state.tab.id, url)
+        const namespace = this.state.namespace
+        if (url)
+            this.props.setNamespaceAndUrl(this.state.tab.id, namespace, url)
+
     }
 
     render () {
@@ -96,8 +113,9 @@ class Search extends Component {
 
         return (
             <div className="search">
-                <RefreshIcon faded={connected || !tabUrl} setUrl={this.setUrl} />
-                <TextBar url={state.url} originalUrl={tabUrl} changeUrl={this.changeUrl} setUrl={this.setUrl} connected={connected} />
+                <RefreshIcon faded={connected || !tabUrl} setNamespaceAndUrl={this.setNamespaceAndUrl} />
+                <TextBar url={state.url} originalUrl={tabUrl} changeUrl={this.changeUrl} setNamespaceAndUrl={this.setNamespaceAndUrl} connected={connected} />
+                <NamespaceTextBar namespace={state.namespace} changeNamespace={this.changeNamespace} setNamespaceAndUrl={this.setNamespaceAndUrl} />
             </div>
         )
     }

src/app/js/components/search/TextBar.js

@@ -7,21 +7,21 @@
  * @property {String} originalUrl the current url of the socket.io connection
  * @property {String} url the current state of the input field
  * @property {Function} changeUrl handle inputchange
- * @property {Function} setUrl confirm url and save in redux store
+ * @property {Function} setNamespaceAndUrl confirm namespace and url and save in redux store
  */
 
 import React from 'react'
 
 import SearchIcon from '../../icons/Search'
 import ConnectionIcon from '../../icons/Connection'
 
-const TextBar = ({url, originalUrl, changeUrl, setUrl, connected}) =>
+const TextBar = ({url, originalUrl, changeUrl, setNamespaceAndUrl, connected}) =>
     <span className="search-text">
-        <span className="search-text-icon" onClick={setUrl}>
+        <span className="search-text-icon" onClick={setNamespaceAndUrl}>
             {getIcon(originalUrl, connected)}
         </span>
-        <form className="search-text-form" onSubmit={setUrl}>
-            <input onChange={changeUrl} className="search-text-input" type="text" value={url} />
+        <form className="search-text-form" onSubmit={setNamespaceAndUrl}>
+            <input onChange={changeUrl} className="search-text-input" type="text" value={url} placeholder="http://www.example.com/socket.io" />
         </form>
     </span>
 

src/app/js/reducers/connections.js

@@ -13,8 +13,8 @@ export default function connections (state = defaultState, action) {
         case 'REMOVE_CONNECTION':
         return removeConnection(state, action)
 
-        case 'SET_URL':
-        return setUrl(state, action)
+        case 'SET_NAMESPACE_AND_URL':
+        return setNamespaceAndUrl(state, action)
 
         case 'SET_CONNECTED':
         return setConnected(state, action, true)
@@ -93,12 +93,21 @@ function removeConnection (state, action) {
 /**
  * Updates the url of a connection
  */
-function setUrl (state, action) {
+function setNamespaceAndUrl (state, action) {
     const list = state.list.slice()
-
     const id = action.id
 
+    // set namespace
+    if(action.namespace) {
+        const namespaceWithLeadingSlash = action.namespace.charAt(0) === '/' ? action.namespace : '/' + action.namespace
+        list[state.connections[id].index].namespace = namespaceWithLeadingSlash
+    } else {
+        list[state.connections[id].index].namespace = ''
+    }
+
+    // set URL
     list[state.connections[id].index].url = action.url
+
     return {
         connections: state.connections,
         list
@@ -114,6 +123,11 @@ function setConnected (state, action, newValue) {
     const id = action.id
 
     list[state.connections[id].index].connected = newValue
+
+    if(!newValue) {
+        list[state.connections[id].index].events = []
+    }
+
     return {
         connections: state.connections,
         list

src/app/js/socketManager.js

@@ -75,9 +75,12 @@ function listenForChanges () {
     const connection = state.connections.list[state.connections.connections[id].index]
 
     const url = connection.url
-    if ( url !== storedConnections[id].url ) {
+    let namespace = connection.namespace || ''
+
+    if ( url !== storedConnections[id].url || namespace !== storedConnections[id].namespace) {
 
         storedConnections[id].url = url
+        storedConnections[id].namespace = namespace
 
         let socket = storedConnection.socket
 
@@ -88,12 +91,13 @@ function listenForChanges () {
 
         if ( url ) {
             const parsedURL = new URL(url);
-            socket = io(parsedURL.origin + parsedURL.search, { 
-                path: parsedURL.pathname === '/' ? '/socket.io' : parsedURL.pathname,
-            });
+            const path = parsedURL.pathname === '/' ? '/socket.io' : parsedURL.pathname
+            socket = io(parsedURL.origin + namespace, {path});
             storedConnections[id].socket = socket
 
             socket.on('connect', function () {
+                store.dispatch({type: 'REMOVE_ALL_MESSAGES'})
+                store.dispatch({type: 'REMOVE_ALL_SENTMESSAGES'})
                 store.dispatch({type: 'SET_CONNECTED', id})
             })
             socket.on('disconnect', function () {