Make the network dropdown work

src/components/structures/RoomDirectory.js

@@ -32,6 +32,13 @@ var sanitizeHtml = require('sanitize-html');
 
 linkifyMatrix(linkify);
 
+const NETWORK_PATTERNS = {
+    'gitter': /#gitter_.*/,
+    'irc:freenode': /#freenode_.*:.*/,
+    'irc:mozilla': /#mozilla_.*:.*/,
+    'irc:w3c': /@w3c_.*:.*/,
+};
+
 module.exports = React.createClass({
     displayName: 'RoomDirectory',
 
@@ -40,6 +47,7 @@ module.exports = React.createClass({
             publicRooms: [],
             roomAlias: '',
             loading: true,
+            filterByNetwork: null,
         }
     },
 
@@ -143,6 +151,12 @@ module.exports = React.createClass({
         }
     },
 
+    onNetworkChange: function(network) {
+        this.setState({
+            filterByNetwork: network,
+        });
+    },
+
     showRoomAlias: function(alias) {
         this.showRoom(null, alias);
     },
@@ -192,9 +206,13 @@ module.exports = React.createClass({
 
         if (!this.state.publicRooms) return [];
 
-        var rooms = this.state.publicRooms.filter(function(a) {
+        var rooms = this.state.publicRooms.filter((a) => {
             // FIXME: if incrementally typing, keep narrowing down the search set
             // incrementally rather than starting over each time.
+            if (this.state.filterByNetwork) {
+                if (this._networkForRoom(a) != this.state.filterByNetwork) return false;
+            }
+
             return (((a.name && a.name.toLowerCase().search(filter.toLowerCase()) >= 0) ||
                      (a.aliases && a.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0)) &&
                       a.num_joined_members > 0);
@@ -266,6 +284,22 @@ module.exports = React.createClass({
         }
     },
 
+    /**
+     * Terrible temporary function that guess what network a public room
+     * entry is in, until synapse is able to tell us
+     */
+    _networkForRoom(room) {
+        if (room.aliases) {
+            for (const alias of room.aliases) {
+                for (const network of Object.keys(NETWORK_PATTERNS)) {
+                    if (NETWORK_PATTERNS[network].test(alias)) return network;
+                }
+            }
+        }
+
+        return 'matrix:matrix_org';
+    },
+
     render: function() {
         if (this.state.loading) {
             var Loader = sdk.getComponent("elements.Spinner");
@@ -284,7 +318,7 @@ module.exports = React.createClass({
                 <div className="mx_RoomDirectory_list">
                     <div className="mx_RoomDirectory_listheader">
                         <input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
-                        <NetworkDropdown />
+                        <NetworkDropdown onNetworkChange={this.onNetworkChange} />
                     </div>
                     <GeminiScrollbar className="mx_RoomDirectory_tableWrapper">
                         <table ref="directory_table" className="mx_RoomDirectory_table">

src/components/views/directory/NetworkDropdown.js

@@ -23,7 +23,7 @@ export default class NetworkDropdown extends React.Component {
         this.dropdownRootElement = null;
         this.ignoreEvent = null;
 
-        this.onClick = this.onClick.bind(this);
+        this.onInputClick = this.onInputClick.bind(this);
         this.onRootClick = this.onRootClick.bind(this);
         this.onDocumentClick = this.onDocumentClick.bind(this);
         this.onNetworkClick = this.onNetworkClick.bind(this);
@@ -31,24 +31,30 @@ export default class NetworkDropdown extends React.Component {
 
         this.state = {
             expanded: false,
-            selectedNetwork: 'all',
+            selectedNetwork: null,
         };
 
         this.networks = [
-            'matrix_org',
+            'matrix:matrix_org',
-            'freenode',
             'gitter',
+            'irc:freenode',
+            'irc:mozilla',
+            'irc:w3c',
         ];
 
         this.networkNames = {
-            'matrix_org': 'matrix.org',
+            'matrix:matrix_org': 'matrix.org',
-            'freenode': 'Freenode',
+            'irc:freenode': 'Freenode',
+            'irc:mozilla': 'Mozilla',
+            'irc:w3c': 'W3C',
             'gitter': 'Gitter',
         };
 
         this.networkIcons = {
-            'matrix_org': '//matrix.org/favicon.ico',
+            'matrix:matrix_org': '//matrix.org/favicon.ico',
-            'freenode': '//matrix.org/_matrix/media/v1/download/matrix.org/DHLHpDDgWNNejFmrewvwEAHX',
+            'irc:freenode': '//matrix.org/_matrix/media/v1/download/matrix.org/DHLHpDDgWNNejFmrewvwEAHX',
+            'irc:mozilla': '//matrix.org/_matrix/media/v1/download/matrix.org/DHLHpDDgWNNejFmrewvwEAHX',
+            'irc:w3c': '//matrix.org/_matrix/media/v1/download/matrix.org/DHLHpDDgWNNejFmrewvwEAHX',
             'gitter': '//gitter.im/favicon.ico',
         };
     }
@@ -83,10 +89,11 @@ export default class NetworkDropdown extends React.Component {
         this.ignoreEvent = ev;
     }
 
-    onClick(ev) {
+    onInputClick(ev) {
         this.setState({
             expanded: !this.state.expanded,
         });
+        ev.preventDefault();
     }
 
     onNetworkClick(network, ev) {
@@ -94,6 +101,7 @@ export default class NetworkDropdown extends React.Component {
             expanded: false,
             selectedNetwork: network,
         });
+        this.props.onNetworkChange(network);
     }
 
     collectRoot(e) {
@@ -106,43 +114,46 @@ export default class NetworkDropdown extends React.Component {
         this.dropdownRootElement = e;
     }
 
-    _optionForNetwork(network) {
+    _optionForNetwork(network, wire_onclick) {
+        if (wire_onclick === undefined) wire_onclick = true;
         let icon;
         let name;
-        let spanClass;
+        let span_class;
 
-        if (network == 'all') {
+        if (network === null) {
             name = 'All networks';
-            spanClass = 'mx_NetworkDropdown_menu_all';
+            span_class = 'mx_NetworkDropdown_menu_all';
         } else {
             name = this.networkNames[network];
             icon = <img src={this.networkIcons[network]} />;
-            spanClass = 'mx_NetworkDropdown_menu_network';
+            span_class = 'mx_NetworkDropdown_menu_network';
         }
 
-        return <div key={network} className="mx_NetworkDropdown_networkoption" onClick={this.onNetworkClick.bind(this, network)}>
+        const click_handler = wire_onclick ? this.onNetworkClick.bind(this, network) : null;
+
+        return <div key={network} className="mx_NetworkDropdown_networkoption" onClick={click_handler}>
             {icon}
-            <span className={spanClass}>{name}</span>
+            <span className={span_class}>{name}</span>
         </div>;
     }
 
     render() {
-        const currentValue = this._optionForNetwork(this.state.selectedNetwork);
+        const current_value = this._optionForNetwork(this.state.selectedNetwork, false);
 
         let menu;
         if (this.state.expanded) {
-           const menuOptions = [this._optionForNetwork('all')];
+           const menu_options = [this._optionForNetwork(null)];
             for (const network of this.networks) {
-                menuOptions.push(this._optionForNetwork(network));
+                menu_options.push(this._optionForNetwork(network));
             }
             menu = <div className="mx_NetworkDropdown_menu">
-                {menuOptions}
+                {menu_options}
             </div>;
         }
 
         return <div className="mx_NetworkDropdown" ref={this.collectRoot}>
-            <div className="mx_NetworkDropdown_input" onClick={this.onClick}>
+            <div className="mx_NetworkDropdown_input" onClick={this.onInputClick}>
-                {currentValue}
+                {current_value}
                 <span className="mx_NetworkDropdown_arrow"></span>
                 {menu}
             </div>
@@ -150,3 +161,7 @@ export default class NetworkDropdown extends React.Component {
     }
 }
 
+NetworkDropdown.propTypes = {
+    onNetworkChange: React.PropTypes.func.isRequired,
+};
+

src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css

@@ -26,6 +26,7 @@ limitations under the License.
     font-size: 13px;
     margin-top: 12px;
     margin-bottom: 12px;
+    user-select: none;
 }
 
 .mx_NetworkDropdown_arrow {