From b3d82921137a28edf5b511390c5d6bc34ee402ff Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Mon, 4 Jul 2016 22:34:58 +0530
Subject: [PATCH] feat: use canonical room alias for room completion

---
 src/autocomplete/Components.js   | 2 +-
 src/autocomplete/RoomProvider.js | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/autocomplete/Components.js b/src/autocomplete/Components.js
index 4a24c79966..168da00c1c 100644
--- a/src/autocomplete/Components.js
+++ b/src/autocomplete/Components.js
@@ -13,7 +13,7 @@ export function TextualCompletion({
         <div style={{width: '100%'}}>
             <span>{title}</span>
             <em>{subtitle}</em>
-            <span style={{color: 'gray'}}>{description}</span>
+            <span style={{color: 'gray', float: 'right'}}>{description}</span>
         </div>
     );
 }
diff --git a/src/autocomplete/RoomProvider.js b/src/autocomplete/RoomProvider.js
index e38be65987..b34fdeb59a 100644
--- a/src/autocomplete/RoomProvider.js
+++ b/src/autocomplete/RoomProvider.js
@@ -4,6 +4,7 @@ import Q from 'q';
 import MatrixClientPeg from '../MatrixClientPeg';
 import Fuse from 'fuse.js';
 import {TextualCompletion} from './Components';
+import {getDisplayAliasForRoom} from '../MatrixTools';
 
 const ROOM_REGEX = /(?=#)([^\s]*)/g;
 
@@ -27,16 +28,18 @@ export default class RoomProvider extends AutocompleteProvider {
             // the only reason we need to do this is because Fuse only matches on properties
             this.fuse.set(client.getRooms().filter(room => !!room).map(room => {
                 return {
+                    room: room,
                     name: room.name,
                     roomId: room.roomId,
                     aliases: room.getAliases(),
                 };
             }));
             completions = this.fuse.search(command[0]).map(room => {
+                let displayAlias = getDisplayAliasForRoom(room.room) || room.roomId;
                 return {
-                    completion: room.roomId,
+                    completion: displayAlias,
                     component: (
-                        <TextualCompletion title={room.name} subtitle={room.roomId} />
+                        <TextualCompletion title={room.name} description={displayAlias} />
                     ),
                     range,
                 };