From fa37d03db65b564ba1cab3c0630e8b57c0840e28 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 6 Jul 2017 19:13:14 +0100 Subject: [PATCH] Improve the Group View page Show the rooms in the group in thir various categories, etc --- src/components/structures/GroupView.js | 114 ++++++++++++++++++++- src/components/views/avatars/RoomAvatar.js | 11 +- src/i18n/strings/en_EN.json | 3 +- 3 files changed, 124 insertions(+), 4 deletions(-) diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 0f10ba60e2..0a7674f4d8 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -18,10 +18,67 @@ import React from 'react'; import PropTypes from 'prop-types'; import MatrixClientPeg from '../../MatrixClientPeg'; import sdk from '../../index'; +import dis from '../../dispatcher'; import { sanitizedHtmlNode } from '../../HtmlUtils'; import { _t } from '../../languageHandler'; +import AccessibleButton from '../views/elements/AccessibleButton'; +function categoryRoomListNode(rooms, categoryId, category) { + const roomNodes = rooms.map((r) => { + return ; + }); + let catHeader = null; + if (category && category.profile) catHeader =
{category.profile.name}
+ return
+ {catHeader} + {roomNodes} +
; +} + +const FeaturedRoom = React.createClass({ + displayName: 'FeaturedRoom', + + props: { + summaryInfo: PropTypes.object.isRequired, + }, + + onClick: function(e) { + e.preventDefault(); + + dis.dispatch({ + action: 'view_room', + room_alias: this.props.summaryInfo.profile.canonical_alias, + room_id: this.props.summaryInfo.room_id, + }); + }, + + render: function() { + const RoomAvatar = sdk.getComponent("avatars.RoomAvatar"); + + const oobData = { + roomId: this.props.summaryInfo.room_id, + avatarUrl: this.props.summaryInfo.profile.avatar_url, + name: this.props.summaryInfo.profile.name, + }; + let permalink = null; + if (this.props.summaryInfo.profile && this.props.summaryInfo.profile.canonical_alias) { + permalink = 'https://matrix.to/#/' + this.props.summaryInfo.profile.canonical_alias; + } + let roomNameNode = null; + if (permalink) { + roomNameNode = {this.props.summaryInfo.profile.name}; + } else { + roomNameNode = {this.props.summaryInfo.profile.name}; + } + + return + +
{roomNameNode}
+
; + } +}); + export default React.createClass({ displayName: 'GroupView', @@ -33,6 +90,7 @@ export default React.createClass({ return { summary: null, error: null, + editing: false, }; }, @@ -64,12 +122,19 @@ export default React.createClass({ }); }, + _onSettingsClick: function() { + this.setState({editing: true}); + }, + render: function() { const GroupAvatar = sdk.getComponent("avatars.GroupAvatar"); const Loader = sdk.getComponent("elements.Spinner"); + const TintableSvg = sdk.getComponent("elements.TintableSvg"); if (this.state.summary === null && this.state.error === null) { return ; + } else if (this.state.editing) { + return
; } else if (this.state.summary) { const summary = this.state.summary; let description = null; @@ -77,6 +142,50 @@ export default React.createClass({ description = sanitizedHtmlNode(summary.profile.long_description); } + let featuredRooms = null; + if (summary.rooms_section.rooms.length > 0) { + let defaultCategoryRooms = []; + let categoryRooms = {}; + summary.rooms_section.rooms.forEach((r) => { + if (r.category_id === null) { + defaultCategoryRooms.push(r); + } else { + let list = categoryRooms[r.category_id]; + if (list === undefined) { + list = []; + categoryRooms[r.category_id] = list; + } + list.push(r); + } + }); + /*[defaultCategoryRooms, ...Object.values(categoryRooms)].forEach((roomList) => { + roomList.sort((r1, r2) => { + return r1.order - r2.order; + }); + });*/ + + let defaultCategoryNode = null; + if (defaultCategoryRooms.length > 0) { + defaultCategoryNode = categoryRoomListNode(defaultCategoryRooms); + } + const categoryRoomNodes = Object.keys(categoryRooms).map((catId) => { + const cat = summary.rooms_section.categories[catId]; + return categoryRoomListNode(categoryRooms[catId], catId, cat); + }); + + featuredRooms =
+
+ {_t('Featured Rooms:')} +
+ {defaultCategoryNode} + {categoryRoomNodes} +
; + } + const roomBody =
+
{description}
+ {featuredRooms} +
; + let nameNode; if (summary.profile.name) { nameNode =
@@ -108,9 +217,12 @@ export default React.createClass({ {summary.profile.short_description}
+ + + - {description} + {roomBody} ); } else if (this.state.error) { diff --git a/src/components/views/avatars/RoomAvatar.js b/src/components/views/avatars/RoomAvatar.js index 8041fd5cd7..728d71a6a9 100644 --- a/src/components/views/avatars/RoomAvatar.js +++ b/src/components/views/avatars/RoomAvatar.js @@ -126,9 +126,16 @@ module.exports = React.createClass({ }, getFallbackAvatar: function(props) { - if (!this.props.room) return null; + let roomId = null; + if (props.oobData && props.oobData.roomId) { + roomId = this.props.oobData.roomId; + } else if (props.room) { + roomId = props.room.roomId; + } else { + return null; + } - return Avatar.defaultAvatarUrlForString(props.room.roomId); + return Avatar.defaultAvatarUrlForString(roomId); }, render: function() { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 2b0f15703c..f187a6f034 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -946,5 +946,6 @@ "You are a member of these groups": "You are a member of these groups", "Create a group to represent your community! Define a set of rooms and your own custom homepage to mark out your space in the Matrix universe.": "Create a group to represent your community! Define a set of rooms and your own custom homepage to mark out your space in the Matrix universe.", "Join an existing group": "Join an existing group", - "To join an exisitng group you'll have to know its group identifier; this will look something like +example:matrix.org.": "To join an exisitng group you'll have to know its group identifier; this will look something like +example:matrix.org." + "To join an exisitng group you'll have to know its group identifier; this will look something like +example:matrix.org.": "To join an exisitng group you'll have to know its group identifier; this will look something like +example:matrix.org.", + "Featured Rooms:": "Featured Rooms:" }