diff --git a/src/app/css/components/_search.scss b/src/app/css/components/_search.scss
index d353990..a66da97 100644
--- a/src/app/css/components/_search.scss
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/src/app/js/components/search/NamespaceTextbar.js b/src/app/js/components/search/NamespaceTextbar.js
new file mode 100644
index 0000000..ceffafe
--- /dev/null
+++ b/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}) =>
+
+
+
+
+export default NamespaceTextBar
diff --git a/src/app/js/components/search/RefreshIcon.js b/src/app/js/components/search/RefreshIcon.js
index 500dcd8..4e04e87 100644
--- a/src/app/js/components/search/RefreshIcon.js
+++ b/src/app/js/components/search/RefreshIcon.js
@@ -2,8 +2,8 @@ import React from 'react'
import RepeatIcon from '../../icons/Repeat'
-const RefreshIcon = ({faded, setUrl}) =>
-
+const RefreshIcon = ({faded, setNamespaceAndUrl}) =>
+
diff --git a/src/app/js/components/search/Search.js b/src/app/js/components/search/Search.js
index b0d9313..42266b6 100644
--- a/src/app/js/components/search/Search.js
+++ b/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)
})
}
diff --git a/src/app/js/components/search/SearchView.js b/src/app/js/components/search/SearchView.js
index 85dc067..c51a995 100644
--- a/src/app/js/components/search/SearchView.js
+++ b/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 (
-
-
+
+
+
)
}
diff --git a/src/app/js/components/search/TextBar.js b/src/app/js/components/search/TextBar.js
index dfef5b7..2ba7a98 100644
--- a/src/app/js/components/search/TextBar.js
+++ b/src/app/js/components/search/TextBar.js
@@ -7,7 +7,7 @@
* @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'
@@ -15,13 +15,13 @@ 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}) =>
-
+
{getIcon(originalUrl, connected)}
-
diff --git a/src/app/js/reducers/connections.js b/src/app/js/reducers/connections.js
index 867146d..3fd5afd 100644
--- a/src/app/js/reducers/connections.js
+++ b/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
diff --git a/src/app/js/socketManager.js b/src/app/js/socketManager.js
index d3f0168..a7dd981 100644
--- a/src/app/js/socketManager.js
+++ b/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 () {