change state from domainToAliases to local and alt aliases

src/components/views/room_settings/AliasSettings.js

@@ -87,91 +87,59 @@ export default class AliasSettings extends React.Component {
         super(props);
 
         const state = {
-            domainToAliases: {}, // { domain.com => [#alias1:domain.com, #alias2:domain.com] }
+            altAliases: [], // [ #alias:domain.tld, ... ]
-            remoteDomains: [], // [ domain.com, foobar.com ]
+            localAliases: [], // [ #alias:my-hs.tld, ... ]
-            canonicalAlias: null, // #canonical:domain.com
+            canonicalAlias: null, // #canonical:domain.tld
             updatingCanonicalAlias: false,
-            localAliasesLoading: true,
+            localAliasesLoading: false,
         };
 
         if (props.canonicalAliasEvent) {
-            state.canonicalAlias = props.canonicalAliasEvent.getContent().alias;
+            const content = props.canonicalAliasEvent.getContent();
+            const altAliases = content.alt_aliases;
+            if (Array.isArray(altAliases)) {
+                state.altAliases = altAliases.slice();
+            }
+            state.canonicalAlias = content.alias;
         }
 
         this.state = state;
     }
 
-    async componentWillMount() {
+    componentDidMount() {
-        const cli = MatrixClientPeg.get();
+        return this.loadLocalAliases();
+    }
+
+    async loadLocalAliases() {
+        this.setState({ localAliasesLoading: true });
         try {
+            const cli = MatrixClientPeg.get();
+            let localAliases = [];
             if (await cli.doesServerSupportUnstableFeature("org.matrix.msc2432")) {
                 const response = await cli.unstableGetLocalAliases(this.props.roomId);
-                const localAliases = response.aliases;
+                if (Array.isArray(response.aliases)) {
-                const localDomain = cli.getDomain();
+                    localAliases = response.aliases;
-                const domainToAliases = Object.assign(
+                }
-                    {},
-                    // FIXME, any localhost alt_aliases will be ignored as they are overwritten by localAliases
-                    this.aliasesToDictionary(this._getAltAliases()),
-                    {[localDomain]: localAliases || []},
-                );
-                const remoteDomains = Object.keys(domainToAliases).filter((domain) => {
-                    return domain !== localDomain && domainToAliases[domain].length > 0;
-                });
-                this.setState({ domainToAliases, remoteDomains });
-            } else {
-                const state = {};
-                const localDomain = cli.getDomain();
-                state.domainToAliases = this.aliasEventsToDictionary(this.props.aliasEvents || []);
-                state.remoteDomains = Object.keys(state.domainToAliases).filter((domain) => {
-                    return domain !== localDomain && state.domainToAliases[domain].length > 0;
-                });
-                this.setState(state);
             }
+            this.setState({ localAliases });
         } finally {
-            this.setState({localAliasesLoading: false});
+            this.setState({ localAliasesLoading: false });
         }
     }
 
-    aliasesToDictionary(aliases) {
-        return aliases.reduce((dict, alias) => {
-            const domain = alias.split(":")[1];
-            dict[domain] = dict[domain] || [];
-            dict[domain].push(alias);
-            return dict;
-        }, {});
-    }
-
-    aliasEventsToDictionary(aliasEvents) { // m.room.alias events
-        const dict = {};
-        aliasEvents.forEach((event) => {
-            dict[event.getStateKey()] = (
-                (event.getContent().aliases || []).slice() // shallow-copy
-            );
-        });
-        return dict;
-    }
-
-    _getAltAliases() {
-        if (this.props.canonicalAliasEvent) {
-            const altAliases = this.props.canonicalAliasEvent.getContent().alt_aliases;
-            if (Array.isArray(altAliases)) {
-                return altAliases;
-            }
-        }
-        return [];
-    }
-
     changeCanonicalAlias(alias) {
         if (!this.props.canSetCanonicalAlias) return;
 
+        const oldAlias = this.state.canonicalAlias;
         this.setState({
             canonicalAlias: alias,
             updatingCanonicalAlias: true,
         });
 
-        const eventContent = {};
+        const eventContent = {
-        const altAliases = this._getAltAliases();
+            alt_aliases: this.state.altAliases,
-        if (altAliases) eventContent["alt_aliases"] = altAliases;
+        };
+
         if (alias) eventContent["alias"] = alias;
 
         MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.canonical_alias",
@@ -184,6 +152,7 @@ export default class AliasSettings extends React.Component {
                     "or a temporary failure occurred.",
                 ),
             });
+            this.setState({canonicalAlias: oldAlias});
         }).finally(() => {
             this.setState({updatingCanonicalAlias: false});
         });
@@ -200,16 +169,10 @@ export default class AliasSettings extends React.Component {
         if (!alias.includes(':')) alias += ':' + localDomain;
 
         MatrixClientPeg.get().createAlias(alias, this.props.roomId).then(() => {
-            const localAliases = this.state.domainToAliases[localDomain] || [];
-            const domainAliases = Object.assign({}, this.state.domainToAliases);
-            domainAliases[localDomain] = [...localAliases, alias];
-
             this.setState({
-                domainToAliases: domainAliases,
+                localAliases: this.state.localAliases.concat(alias),
-                // Reset the add field
+                newAlias: null,
-                newAlias: "",
             });
-
             if (!this.state.canonicalAlias) {
                 this.changeCanonicalAlias(alias);
             }
@@ -226,18 +189,13 @@ export default class AliasSettings extends React.Component {
     };
 
     onLocalAliasDeleted = (index) => {
-        const localDomain = MatrixClientPeg.get().getDomain();
+        const alias = this.state.localAliases[index];
-
-        const alias = this.state.domainToAliases[localDomain][index];
-
         // TODO: In future, we should probably be making sure that the alias actually belongs
         // to this room. See https://github.com/vector-im/riot-web/issues/7353
         MatrixClientPeg.get().deleteAlias(alias).then(() => {
-            const localAliases = this.state.domainToAliases[localDomain].filter((a) => a !== alias);
+            const localAliases = this.state.localAliases.slice();
-            const domainAliases = Object.assign({}, this.state.domainToAliases);
+            localAliases.splice(index);
-            domainAliases[localDomain] = localAliases;
+            this.setState({localAliases});
-
-            this.setState({domainToAliases: domainAliases});
 
             if (this.state.canonicalAlias === alias) {
                 this.changeCanonicalAlias(null);
@@ -258,6 +216,15 @@ export default class AliasSettings extends React.Component {
         this.changeCanonicalAlias(event.target.value);
     };
 
+    _getAliases() {
+        return this.state.altAliases.concat(this._getLocalNonAltAliases());
+    }
+
+    _getLocalNonAltAliases() {
+        const {altAliases} = this.state;
+        return this.state.localAliases.filter(alias => !altAliases.includes(alias));
+    }
+
     render() {
         const localDomain = MatrixClientPeg.get().getDomain();
 
@@ -269,15 +236,13 @@ export default class AliasSettings extends React.Component {
                    element='select' id='canonicalAlias' label={_t('Main address')}>
                 <option value="" key="unset">{ _t('not specified') }</option>
                 {
-                    Object.keys(this.state.domainToAliases).map((domain, i) => {
+                    this._getAliases().map((alias, i) => {
-                        return this.state.domainToAliases[domain].map((alias, j) => {
+                        if (alias === this.state.canonicalAlias) found = true;
-                            if (alias === this.state.canonicalAlias) found = true;
+                        return (
-                            return (
+                            <option value={alias} key={i}>
-                                <option value={alias} key={i + "_" + j}>
+                                { alias }
-                                    { alias }
+                            </option>
-                                </option>
+                        );
-                            );
-                        });
                     })
                 }
                 {
@@ -289,53 +254,33 @@ export default class AliasSettings extends React.Component {
             </Field>
         );
 
-        let remoteAliasesSection;
-        if (this.state.remoteDomains.length) {
-            remoteAliasesSection = (
-                <div>
-                    <div>
-                        { _t("Remote addresses for this room:") }
-                    </div>
-                    <ul>
-                        { this.state.remoteDomains.map((domain, i) => {
-                            return this.state.domainToAliases[domain].map((alias, j) => {
-                                return <li key={i + "_" + j}>{alias}</li>;
-                            });
-                        }) }
-                    </ul>
-                </div>
-            );
-        }
-
         let localAliasesList;
         if (this.state.localAliasesLoading) {
             const Spinner = sdk.getComponent("elements.Spinner");
             localAliasesList = <Spinner />;
         } else {
-            localAliasesList = <EditableAliasesList
+            localAliasesList = (<EditableAliasesList
                 id="roomAliases"
                 className={"mx_RoomSettings_localAliases"}
-                items={this.state.domainToAliases[localDomain] || []}
+                items={this.state.localAliases}
                 newItem={this.state.newAlias}
                 onNewItemChanged={this.onNewAliasChanged}
                 canRemove={this.props.canSetAliases}
                 canEdit={this.props.canSetAliases}
                 onItemAdded={this.onLocalAliasAdded}
                 onItemRemoved={this.onLocalAliasDeleted}
-                itemsLabel={_t('Local addresses for this room:')}
                 noItemsLabel={_t('This room has no local addresses')}
                 placeholder={_t(
                     'New address (e.g. #foo:%(localDomain)s)', {localDomain: localDomain},
                 )}
                 domain={localDomain}
-            />;
+            />);
         }
 
         return (
             <div className='mx_AliasSettings'>
                 {canonicalAliasSection}
                 {localAliasesList}
-                {remoteAliasesSection}
             </div>
         );
     }

src/i18n/strings/en_EN.json

@@ -1149,10 +1149,10 @@
     "There was an error removing that alias. It may no longer exist or a temporary error occurred.": "There was an error removing that alias. It may no longer exist or a temporary error occurred.",
     "Main address": "Main address",
     "not specified": "not specified",
-    "Remote addresses for this room:": "Remote addresses for this room:",
     "Local addresses for this room:": "Local addresses for this room:",
     "This room has no local addresses": "This room has no local addresses",
     "New address (e.g. #foo:%(localDomain)s)": "New address (e.g. #foo:%(localDomain)s)",
+    "New address (e.g. #foo:domain)": "New address (e.g. #foo:domain)",
     "Error updating flair": "Error updating flair",
     "There was an error updating the flair for this room. The server may not allow it or a temporary error occurred.": "There was an error updating the flair for this room. The server may not allow it or a temporary error occurred.",
     "Invalid community ID": "Invalid community ID",