Refactoring

src/client/app/common/views/components/autocomplete.vue

@@ -17,7 +17,7 @@
 			<span class="emoji" v-if="emoji.url"><img :src="emoji.url" :alt="emoji.emoji"/></span>
 			<span class="emoji" v-else>{{ emoji.emoji }}</span>
 			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
-			<span class="alias" v-if="emoji.alias">({{ emoji.alias }})</span>
+			<span class="alias" v-if="emoji.aliasOf">({{ emoji.aliasOf }})</span>
 		</li>
 	</ol>
 </div>
@@ -28,14 +28,21 @@ import Vue from 'vue';
 import * as emojilib from 'emojilib';
 import contains from '../../../common/scripts/contains';
 
+type EmojiDef = {
+	emoji: string;
+	name: string;
+	aliasOf?: string;
+	url?: string;
+};
+
 const lib = Object.entries(emojilib.lib).filter((x: any) => {
 	return x[1].category != 'flags';
 });
 
-const emjdb = lib.map((x: any) => ({
+const emjdb: EmojiDef[] = lib.map((x: any) => ({
 	emoji: x[1].char,
 	name: x[0],
-	alias: null
+	aliasOf: null
 }));
 
 lib.forEach((x: any) => {
@@ -44,7 +51,7 @@ lib.forEach((x: any) => {
 			emjdb.push({
 				emoji: x[1].char,
 				name: k,
-				alias: x[0]
+				aliasOf: x[0]
 			});
 		});
 	}
@@ -62,7 +69,8 @@ export default Vue.extend({
 			hashtags: [],
 			emojis: [],
 			select: -1,
-			emojilib
+			emojilib,
+			emojiDb: [] as EmojiDef[]
 		}
 	},
 
@@ -91,6 +99,34 @@ export default Vue.extend({
 	},
 
 	mounted() {
+		//#region Construct Emoji DB
+		const customEmojis = (this.os.getMetaSync() || { emojis: [] }).emojis || [];
+		const emojiDefinitions: EmojiDef[] = [];
+
+		customEmojis.forEach(x => {
+			emojiDefinitions.push({
+				name: x.name,
+				emoji: `:${x.name}:`,
+				url: x.url
+			});
+
+			if (x.aliases) {
+				x.aliases.forEach(alias => {
+					emojiDefinitions.push({
+						name: alias,
+						aliasOf: x.name,
+						emoji: `:${x.name}:`,
+						url: x.url
+					});
+				});
+			}
+		});
+
+		emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
+
+		this.emojiDb = emojiDefinitions.concat(emjdb);
+		//#endregion
+
 		this.textarea.addEventListener('keydown', this.onKeydown);
 
 		Array.from(document.querySelectorAll('body *')).forEach(el => {
@@ -172,38 +208,18 @@ export default Vue.extend({
 				const matched = [];
 				const max = 30;
 
-				const customEmojis = (this.os.getMetaSync() || { emojis: [] }).emojis || [];
-				customEmojis.some(x => {
-					if (x.name.startsWith(this.q)) matched.push({
-						name: x.name,
-						emoji: `:${x.name}:`,
-						url: x.url
-					});
-					return matched.length == max;
-				});
-				customEmojis.some(x => {
-					const alias = (x.aliases || []).find(a => a.startsWith(this.q));
-					if (alias) matched.push({
-						alias: x.name,
-						name: alias,
-						emoji: `:${x.name}:`,
-						url: x.url
-					});
-					return matched.length == max;
-				});
-
-				emjdb.some(x => {
-					if (x.name.startsWith(this.q) && !x.alias && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
+				this.emojiDb.some(x => {
+					if (x.name.startsWith(this.q) && !x.aliasOf && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
 					return matched.length == max;
 				});
 				if (matched.length < max) {
-					emjdb.some(x => {
+					this.emojiDb.some(x => {
 						if (x.name.startsWith(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
 						return matched.length == max;
 					});
 				}
 				if (matched.length < max) {
-					emjdb.some(x => {
+					this.emojiDb.some(x => {
 						if (x.name.includes(this.q) && !matched.some(y => y.emoji == x.emoji)) matched.push(x);
 						return matched.length == max;
 					});