implement PR feedback

res/css/structures/_TagPanelButtons.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector Ltd.
+Copyright 2019 New Vector Ltd.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

src/components/structures/CustomRoomTagPanel.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2017, 2018 New Vector Ltd.
+Copyright 2019 New Vector Ltd.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,34 +22,27 @@ import dis from '../../dispatcher';
 import classNames from 'classnames';
 import * as FormattingUtils from '../../utils/FormattingUtils';
 
-
-const CustomRoomTagPanel = React.createClass({
-    displayName: 'CustomRoomTagPanel',
-
-    getInitialState() {
-        return {
+class CustomRoomTagPanel extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
             tags: CustomRoomTagStore.getSortedTags(),
         };
-    },
+    }
 
-    componentWillMount: function() {
+    componentWillMount() {
         this._tagStoreToken = CustomRoomTagStore.addListener(() => {
             this.setState({tags: CustomRoomTagStore.getSortedTags()});
         });
-    },
+    }
 
     componentWillUnmount() {
         if (this._tagStoreToken) {
             this._tagStoreToken.remove();
         }
-    },
-
-    onClearFilterClick(ev) {
-        dis.dispatch({action: 'deselect_custom_room_tags'});
-    },
+    }
 
     render() {
-        console.log("CustomRoomTagPanel", this.state.tags);
         const tags = this.state.tags.map((tag) => {
             return (<CustomRoomTagTile tag={tag} key={tag.name} />);
         });
@@ -58,19 +51,14 @@ const CustomRoomTagPanel = React.createClass({
             mx_CustomRoomTagPanel_empty: this.state.tags.length === 0,
         });
 
-        const clearButton = undefined;
-
-        return <div className={classes}>
-            <div className="mx_CustomRoomTagPanel_clearButton_container">
-                { clearButton }
-            </div>
+        return (<div className={classes}>
             <div className="mx_CustomRoomTagPanel_divider" />
             <AutoHideScrollbar className="mx_CustomRoomTagPanel_scroller">
                 {tags}
             </AutoHideScrollbar>
-        </div>;
-    },
-});
+        </div>);
+    }
+}
 
 class CustomRoomTagTile extends React.Component {
     constructor(props) {
@@ -94,7 +82,6 @@ class CustomRoomTagTile extends React.Component {
     }
 
     render() {
-        console.log("rendering CustomRoomTagTile", this.props.tag.name);
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
@@ -118,18 +105,20 @@ class CustomRoomTagTile extends React.Component {
         const tip = (this.state.hover ?
             <RoomTooltip className="mx_TagTile_tooltip" label={name} /> :
             <div />);
-        return (<AccessibleButton className={className} onClick={this.onClick}>
-                    <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
-                        <BaseAvatar
-                            name={tag.avatarLetter}
-                            idName={name}
-                            width={avatarHeight}
-                            height={avatarHeight}
-                        />
-                        { badgeElement }
-                        { tip }
-                    </div>
-                </AccessibleButton>);
+        return (
+            <AccessibleButton className={className} onClick={this.onClick}>
+                <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+                    <BaseAvatar
+                        name={tag.avatarLetter}
+                        idName={name}
+                        width={avatarHeight}
+                        height={avatarHeight}
+                    />
+                    { badgeElement }
+                    { tip }
+                </div>
+            </AccessibleButton>
+        );
     }
 }
 

src/components/structures/TagPanelButtons.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2017, 2018 New Vector Ltd.
+Copyright 2019 New Vector Ltd.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

src/stores/CustomRoomTagStore.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -13,10 +13,11 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import {Store} from 'flux/utils';
 import dis from '../dispatcher';
 import * as RoomNotifs from '../RoomNotifs';
 import RoomListStore from './RoomListStore';
+import EventEmitter from 'events';
+
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
 
 function commonPrefix(a, b) {
@@ -43,26 +44,36 @@ function commonPrefix(a, b) {
 /**
  * A class for storing application state for ordering tags in the TagPanel.
  */
-class CustomRoomTagStore extends Store {
+class CustomRoomTagStore extends EventEmitter {
     constructor() {
-        super(dis);
-
+        super();
         // Initialise state
-        this._state = Object.assign({}, {tags: this._getUpdatedTags()});
+        this._state = {tags: this._getUpdatedTags()};
 
         this._roomListStoreToken = RoomListStore.addListener(() => {
-            // UGLY: FluxStore doens't emit changes that
-            // didn't come from a dispatcher action
-            // so emit the change ourselves for now ...
-            this._state.tags = this._getUpdatedTags();
-            this.__emitter.emit("change");
+            this._setState({tags: this._getUpdatedTags()});
         });
+        dis.register(payload => this._onDispatch(payload));
     }
 
     getTags() {
         return this._state.tags;
     }
 
+    _setState(newState) {
+        this._state = Object.assign(this._state, newState);
+        this.emit("change");
+    }
+
+    addListener(callback) {
+        this.on("change", callback);
+        return {
+            remove() {
+                this.removeListener("change", callback);
+            },
+        };
+    }
+
     getSortedTags() {
         const roomLists = RoomListStore.getRoomLists();
 
@@ -88,12 +99,8 @@ class CustomRoomTagStore extends Store {
         });
     }
 
-    _setState(newState) {
-        this._state = Object.assign(this._state, newState);
-        this.__emitChange();
-    }
 
-    __onDispatch(payload) {
+    _onDispatch(payload) {
         switch (payload.action) {
             case 'select_custom_room_tag': {
                 const oldTags = this._state.tags;
@@ -105,15 +112,6 @@ class CustomRoomTagStore extends Store {
                 }
             }
             break;
-            case 'deselect_custom_room_tags': {
-                const tags = Object.keys(this._state.tags)
-                    .reduce((tags, tagName) => {
-                        tags[tagName] = false;
-                        return tags;
-                    }, {});
-                this._setState({tags});
-            }
-            break;
             case 'on_logged_out': {
                 this._state = {};
                 if (this._roomListStoreToken) {