Merge branch 'brian9206-master'

fixed #20

added namespace field and custom socket.io server path

package.json

@@ -8,7 +8,8 @@
     "build": "bash .bin/build.sh",
     "electron": "node_modules/.bin/electron .",
     "electron-build": "bash .bin/electron-build.sh",
-    "package": "bash .bin/package.sh"
+    "package": "bash .bin/package.sh",
+    "server": "node ./socketTest/index.js"
   },
   "devDependencies": {
     "asar": "^0.13.1",
@@ -18,13 +19,13 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-react": "^6.24.1",
     "babelify": "^8.0.0",
-    "browser-sync": "^2.24.4",
+    "browser-sync": "^2.24.7",
     "browserify": "^16.2.0",
     "electron": "^1.8.3",
-    "electron-packager": "^12.0.2",
+    "electron-packager": "^12.1.2",
     "express": "^4.16.3",
-    "node-sass": "^4.8.3",
-    "socket.io": "^2.1.0",
+    "node-sass": "^4.9.3",
+    "socket.io": "^2.1.1",
     "uglify-js": "^3.3.22",
     "watchify": "^3.11.0"
   },
@@ -38,6 +39,6 @@
     "react-inspector": "^2.3.0",
     "react-redux": "^5.0.7",
     "redux": "^3.7.2",
-    "socket.io-client": "^2.1.0"
+    "socket.io-client": "^2.1.1"
   }
 }

socketTest/index.js

@@ -1,6 +1,9 @@
 var app = require('express')();
 var http = require('http').Server(app);
-var io = require('socket.io')(http);
+var options = {
+	path: '/socket.io', // this is the default path but can be changed to anything
+}
+var io = require('socket.io')(http, options);
 const path = require('path')
 
 app.get('/', function(req, res){
@@ -66,7 +69,7 @@ function startIntervals () {
 
 var nsp = io.of('/asd');
 nsp.on('connection', function(socket){
-	console.log('someone connected');
+	console.log('someone connected on /asd');
 	socket.on('chat message', function(msg){
 		console.log('message: ' + msg);
 		nsp.emit('chat message', msg);

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
 
@@ -87,10 +90,14 @@ function listenForChanges () {
         }
 
         if ( url ) {
-            socket = io(url)
+            const parsedURL = new URL(url);
+            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 () {