From 0dbb8d52945c6ea72e8da0ed7745ec8ebcf56c06 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 22 Dec 2015 10:00:30 +0000
Subject: [PATCH] Use MemberAvatar to generate image JSX. Split out entries
 from tab-complete logic

---
 src/TabComplete.js                            | 13 ++--
 src/TabCompleteEntries.js                     | 65 +++++++++++++++++++
 src/components/views/rooms/MessageComposer.js | 12 +---
 src/components/views/rooms/TabCompleteBar.js  |  7 +-
 4 files changed, 73 insertions(+), 24 deletions(-)
 create mode 100644 src/TabCompleteEntries.js

diff --git a/src/TabComplete.js b/src/TabComplete.js
index be1520c5cd..7e5a02c7ea 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -13,6 +13,7 @@ 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.
 */
+var Entry = require("./TabCompleteEntries").Entry;
 
 const DELAY_TIME_MS = 500;
 const KEY_TAB = 9;
@@ -40,7 +41,7 @@ class TabComplete {
     }
 
     /**
-     * @param {TabComplete.Entry[]} completeList
+     * @param {Entry[]} completeList
      */
     setCompletionList(completeList) {
         this.list = completeList;
@@ -74,7 +75,7 @@ class TabComplete {
 
     /**
      * @param {Number} numAheadToPeek Return *up to* this many elements.
-     * @return {TabComplete.Entry[]}
+     * @return {Entry[]}
      */
     peek(numAheadToPeek) {
         if (this.matchedList.length === 0) {
@@ -227,7 +228,7 @@ class TabComplete {
         this.isFirstWord = group.length === this.originalText.length;
 
         this.matchedList = [
-            new TabComplete.Entry(group) // first entry is always the original partial
+            new Entry(group) // first entry is always the original partial
         ];
 
         // find matching entries in the set of entries given to us
@@ -247,10 +248,4 @@ class TabComplete {
     }
 };
 
-TabComplete.Entry = function(text, imgUrl) {
-    this.text = text;
-    this.imgUrl = imgUrl;
-};
-
-
 module.exports = TabComplete;
diff --git a/src/TabCompleteEntries.js b/src/TabCompleteEntries.js
new file mode 100644
index 0000000000..00af3473c8
--- /dev/null
+++ b/src/TabCompleteEntries.js
@@ -0,0 +1,65 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+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.
+*/
+var React = require("react");
+var sdk = require("./index");
+
+class Entry {
+    constructor(text) {
+        this.text = text;
+    }
+
+    /**
+     * @return {string} The text to display in this entry.
+     */
+    getText() {
+        return this.text;
+    }
+
+    /**
+     * @return {ReactClass} Raw JSX
+     */
+    getImageJsx() {
+        return null;
+    }
+
+    /**
+     * @return {?string} The unique key= prop for React dedupe
+     */
+    getKey() {
+        return null;
+    }
+}
+
+class MemberEntry extends Entry {
+    constructor(member) {
+        super(member.name || member.userId);
+        this.member = member;
+    }
+
+    getImageJsx() {
+        var MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
+        return (
+            <MemberAvatar member={this.member} width={24} height={24} />
+        );
+    }
+
+    getKey() {
+        return this.member.userId;
+    }
+}
+
+module.exports.Entry = Entry;
+module.exports.MemberEntry = MemberEntry;
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 838f2cbb9a..2e35614f9c 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -31,7 +31,7 @@ var MatrixClientPeg = require("../../../MatrixClientPeg");
 var SlashCommands = require("../../../SlashCommands");
 var Modal = require("../../../Modal");
 var CallHandler = require('../../../CallHandler');
-var TabComplete = require("../../../TabComplete");
+var MemberEntry = require("../../../TabCompleteEntries").MemberEntry;
 var sdk = require('../../../index');
 
 var dis = require("../../../dispatcher");
@@ -229,15 +229,7 @@ module.exports = React.createClass({
                         }
                     }
                 }).map(function(m) {
-                    var url = m.getAvatarUrl(
-                        MatrixClientPeg.get().getHomeserverUrl(), 32, 32, "crop"
-                    );
-                    return new TabComplete.Entry(
-                        m.name || m.userId,
-                        // TODO: annoying that the JS SDK can return 0-len strings when
-                        // it should be returning null.. can't use truthy constructs!
-                        url && url.length > 0 ? url : null
-                    );
+                    return new MemberEntry(m);
                 });
             }
             if (this.props.tabComplete) {
diff --git a/src/components/views/rooms/TabCompleteBar.js b/src/components/views/rooms/TabCompleteBar.js
index 05bf2a7901..413aacbb3b 100644
--- a/src/components/views/rooms/TabCompleteBar.js
+++ b/src/components/views/rooms/TabCompleteBar.js
@@ -30,12 +30,9 @@ module.exports = React.createClass({
         return (
             <div className="mx_TabCompleteBar">
             {this.props.entries.map(function(entry, i) {
-                var image = (
-                    entry.imgUrl ? <img src={entry.imgUrl} width="24" height="24"/> : null
-                );
                 return (
-                    <div key={i + ""} className="mx_TabCompleteBar_item">
-                        {image}
+                    <div key={entry.getKey() || i + ""} className="mx_TabCompleteBar_item">
+                        {entry.getImageJsx()}
                         <span className="mx_TabCompleteBar_text">
                             {entry.text}
                         </span>