From 0466e0a3067c31dff975677e131c1d291c7a7201 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 27 Mar 2019 14:17:24 +0000
Subject: [PATCH] Reorganise room directory code so new room is always
available
This reorganises the room directory so that the new room buttons is always
available no matter what state the overall directory is in.
Part of https://github.com/vector-im/riot-web/issues/9046
---
src/components/structures/RoomDirectory.js | 91 ++++++++++------------
1 file changed, 43 insertions(+), 48 deletions(-)
diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js
index b155f514f4..d0c0c32eaa 100644
--- a/src/components/structures/RoomDirectory.js
+++ b/src/components/structures/RoomDirectory.js
@@ -515,20 +515,9 @@ module.exports = React.createClass({
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
- // TODO: clean this up
- if (this.state.protocolsLoading) {
- return (
- <div className="mx_RoomDirectory">
- <Loader />
- </div>
- );
- }
-
let content;
- if (this.state.loading) {
- content = <div className="mx_RoomDirectory">
- <Loader />
- </div>;
+ if (this.state.protocolsLoading || this.state.loading) {
+ content = <Loader />;
} else {
const rows = this.getRows();
// we still show the scrollpanel, at least for now, because
@@ -556,33 +545,48 @@ module.exports = React.createClass({
</ScrollPanel>;
}
- const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId);
- let instance_expected_field_type;
- if (
- protocolName &&
- this.protocols &&
- this.protocols[protocolName] &&
- this.protocols[protocolName].location_fields.length > 0 &&
- this.protocols[protocolName].field_types
- ) {
- const last_field = this.protocols[protocolName].location_fields.slice(-1)[0];
- instance_expected_field_type = this.protocols[protocolName].field_types[last_field];
- }
+ let listHeader;
+ if (!this.state.protocolsLoading) {
+ const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
+ const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
-
- let placeholder = _t('Search for a room');
- if (!this.state.instanceId) {
- placeholder = _t('Search for a room like #example') + ':' + this.state.roomServer;
- } else if (instance_expected_field_type) {
- placeholder = instance_expected_field_type.placeholder;
- }
-
- let showJoinButton = this._stringLooksLikeId(this.state.filterString, instance_expected_field_type);
- if (protocolName) {
- const instance = instanceForInstanceId(this.protocols, this.state.instanceId);
- if (this._getFieldsForThirdPartyLocation(this.state.filterString, this.protocols[protocolName], instance) === null) {
- showJoinButton = false;
+ const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId);
+ let instance_expected_field_type;
+ if (
+ protocolName &&
+ this.protocols &&
+ this.protocols[protocolName] &&
+ this.protocols[protocolName].location_fields.length > 0 &&
+ this.protocols[protocolName].field_types
+ ) {
+ const last_field = this.protocols[protocolName].location_fields.slice(-1)[0];
+ instance_expected_field_type = this.protocols[protocolName].field_types[last_field];
}
+
+
+ let placeholder = _t('Search for a room');
+ if (!this.state.instanceId) {
+ placeholder = _t('Search for a room like #example') + ':' + this.state.roomServer;
+ } else if (instance_expected_field_type) {
+ placeholder = instance_expected_field_type.placeholder;
+ }
+
+ let showJoinButton = this._stringLooksLikeId(this.state.filterString, instance_expected_field_type);
+ if (protocolName) {
+ const instance = instanceForInstanceId(this.protocols, this.state.instanceId);
+ if (this._getFieldsForThirdPartyLocation(this.state.filterString, this.protocols[protocolName], instance) === null) {
+ showJoinButton = false;
+ }
+ }
+
+ listHeader = <div className="mx_RoomDirectory_listheader">
+ <DirectorySearchBox
+ className="mx_RoomDirectory_searchbox"
+ onChange={this.onFilterChange} onClear={this.onFilterClear} onJoinClick={this.onJoinClick}
+ placeholder={placeholder} showJoinButton={showJoinButton}
+ />
+ <NetworkDropdown config={this.props.config} protocols={this.protocols} onOptionChange={this.onOptionChange} />
+ </div>;
}
const createRoomButton = (<AccessibleButton
@@ -590,8 +594,6 @@ module.exports = React.createClass({
className="mx_RoomDirectory_createRoom"
>{_t("Create new room")}</AccessibleButton>);
- const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
- const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
return (
<BaseDialog
className={'mx_RoomDirectory_dialog'}
@@ -602,14 +604,7 @@ module.exports = React.createClass({
>
<div className="mx_RoomDirectory">
<div className="mx_RoomDirectory_list">
- <div className="mx_RoomDirectory_listheader">
- <DirectorySearchBox
- className="mx_RoomDirectory_searchbox"
- onChange={this.onFilterChange} onClear={this.onFilterClear} onJoinClick={this.onJoinClick}
- placeholder={placeholder} showJoinButton={showJoinButton}
- />
- <NetworkDropdown config={this.props.config} protocols={this.protocols} onOptionChange={this.onOptionChange} />
- </div>
+ {listHeader}
{content}
</div>
</div>