Merge pull request #5139 from matrix-org/travis/communities/room-behaviour

Communities v2 prototype: Explore rooms, global state, and default room

src/components/views/dialogs/CreateGroupDialog.js

@@ -83,11 +83,18 @@ export default createReactClass({
             localpart: this.state.groupId,
             profile: profile,
         }).then((result) => {
-            dis.dispatch({
-                action: 'view_group',
-                group_id: result.group_id,
-                group_is_new: true,
-            });
+            if (result.room_id) {
+                dis.dispatch({
+                    action: 'view_room',
+                    room_id: result.room_id,
+                });
+            } else {
+                dis.dispatch({
+                    action: 'view_group',
+                    group_id: result.group_id,
+                    group_is_new: true,
+                });
+            }
             this.props.onFinished(true);
         }).catch((e) => {
             this.setState({createError: e});

src/components/views/elements/TagTile.js

@@ -47,6 +47,7 @@ export default createReactClass({
         contextMenuButtonRef: PropTypes.object,
         openMenu: PropTypes.func,
         menuDisplayed: PropTypes.bool,
+        selected: PropTypes.bool,
     },
 
     statics: {

src/components/views/elements/UserTagTile.tsx

@@ -0,0 +1,99 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+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 React from "react";
+import defaultDispatcher from "../../../dispatcher/dispatcher";
+import { OwnProfileStore } from "../../../stores/OwnProfileStore";
+import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+import * as fbEmitter from "fbemitter";
+import TagOrderStore from "../../../stores/TagOrderStore";
+import AccessibleTooltipButton from "./AccessibleTooltipButton";
+import BaseAvatar from "../avatars/BaseAvatar";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import classNames from "classnames";
+
+interface IProps{}
+
+interface IState {
+    selected: boolean;
+}
+
+export default class UserTagTile extends React.PureComponent<IProps, IState> {
+    private tagStoreRef: fbEmitter.EventSubscription;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            selected: TagOrderStore.getSelectedTags().length === 0,
+        };
+    }
+
+    public componentDidMount() {
+        OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate);
+        this.tagStoreRef = TagOrderStore.addListener(this.onTagStoreUpdate);
+    }
+
+    public componentWillUnmount() {
+        OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate);
+    }
+
+    private onProfileUpdate = () => {
+        this.forceUpdate();
+    };
+
+    private onTagStoreUpdate = () => {
+        const selected = TagOrderStore.getSelectedTags().length === 0;
+        this.setState({selected});
+    };
+
+    private onTileClick = (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+
+        // Deselect all tags
+        defaultDispatcher.dispatch({action: "deselect_tags"});
+    };
+
+    public render() {
+        // XXX: We reuse TagTile classes for ease of demonstration - we should probably generify
+        // TagTile instead if we continue to use this component.
+        const avatarHeight = 36;
+        const name = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId();
+        const className = classNames({
+            mx_TagTile: true,
+            mx_TagTile_selected: this.state.selected,
+            mx_TagTile_large: true,
+        });
+        return (
+            <AccessibleTooltipButton
+                className={className}
+                onClick={this.onTileClick}
+                title={name}
+            >
+                <div className="mx_TagTile_avatar">
+                    <BaseAvatar
+                        name={name}
+                        idName={MatrixClientPeg.get().getUserId()}
+                        url={OwnProfileStore.instance.getHttpAvatarUrl(avatarHeight)}
+                        width={avatarHeight}
+                        height={avatarHeight}
+                    />
+                </div>
+            </AccessibleTooltipButton>
+        );
+    }
+}