From 7b23fa7a4f93304fc3e258e2698c9d704e4679dd Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 7 Feb 2019 10:49:23 +0000 Subject: [PATCH] implement PR feedback --- res/css/structures/_TagPanelButtons.scss | 2 +- .../structures/CustomRoomTagPanel.js | 65 ++++++++----------- src/components/structures/TagPanelButtons.js | 2 +- src/stores/CustomRoomTagStore.js | 48 +++++++------- 4 files changed, 52 insertions(+), 65 deletions(-) diff --git a/res/css/structures/_TagPanelButtons.scss b/res/css/structures/_TagPanelButtons.scss index 309c50fb3e..f7cb189e25 100644 --- a/res/css/structures/_TagPanelButtons.scss +++ b/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. diff --git a/src/components/structures/CustomRoomTagPanel.js b/src/components/structures/CustomRoomTagPanel.js index a957c9c4ca..4e33f0a22d 100644 --- a/src/components/structures/CustomRoomTagPanel.js +++ b/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 (); }); @@ -58,19 +51,14 @@ const CustomRoomTagPanel = React.createClass({ mx_CustomRoomTagPanel_empty: this.state.tags.length === 0, }); - const clearButton = undefined; - - return
-
- { clearButton } -
+ return (
{tags} -
; - }, -}); +
); + } +} 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 ? :
); - return ( -
- - { badgeElement } - { tip } -
- ); + return ( + +
+ + { badgeElement } + { tip } +
+ + ); } } diff --git a/src/components/structures/TagPanelButtons.js b/src/components/structures/TagPanelButtons.js index 54f1733d7a..e976fdd436 100644 --- a/src/components/structures/TagPanelButtons.js +++ b/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. diff --git a/src/stores/CustomRoomTagStore.js b/src/stores/CustomRoomTagStore.js index 721fdfd3e0..0670ed0e6c 100644 --- a/src/stores/CustomRoomTagStore.js +++ b/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) {