Emoji provider, DDG working, style improvements

src/autocomplete/Autocompleter.js

@@ -2,12 +2,14 @@ import CommandProvider from './CommandProvider';
 import DuckDuckGoProvider from './DuckDuckGoProvider';
 import RoomProvider from './RoomProvider';
 import UserProvider from './UserProvider';
+import EmojiProvider from './EmojiProvider';
 
 const PROVIDERS = [
     CommandProvider,
     DuckDuckGoProvider,
     RoomProvider,
-    UserProvider
+    UserProvider,
+    EmojiProvider
 ].map(completer => new completer());
 
 export function getCompletions(query: String) {

src/autocomplete/Components.js

@@ -0,0 +1,13 @@
+export function TextualCompletion(props: {
+    title: ?string,
+    subtitle: ?string,
+    description: ?string
+}) {
+    return (
+        <div className="mx_Autocomplete_Completion">
+            <span>{completion.title}</span>
+            <em>{completion.subtitle}</em>
+            <span style={{color: 'gray', float: 'right'}}>{completion.description}</span>
+        </div>
+    );
+}

src/autocomplete/DuckDuckGoProvider.js

@@ -2,31 +2,50 @@ import AutocompleteProvider from './AutocompleteProvider';
 import Q from 'q';
 import 'whatwg-fetch';
 
-const DDG_REGEX = /\/ddg\w+(.+)$/;
+const DDG_REGEX = /\/ddg\s+(.+)$/;
 const REFERER = 'vector';
 
 export default class DuckDuckGoProvider extends AutocompleteProvider {
     static getQueryUri(query: String) {
-        return `http://api.duckduckgo.com/?q=${encodeURIComponent(query)}&format=json&t=${encodeURIComponent(REFERER)}`;
+        return `http://api.duckduckgo.com/?q=${encodeURIComponent(query)}`
+         + `&format=json&no_redirect=1&no_html=1&t=${encodeURIComponent(REFERER)}`;
     }
 
     getCompletions(query: String) {
-        if(!query)
+        let match = DDG_REGEX.exec(query);
+        if(!query || !match)
             return Q.when([]);
 
-        let promise = Q.defer();
-        fetch(DuckDuckGoProvider.getQueryUri(query), {
+        return fetch(DuckDuckGoProvider.getQueryUri(match[1]), {
             method: 'GET'
-        }).then(response => {
-            let results = response.Results.map(result => {
-                return {
-                    title: result.Text,
-                    description: result.Result
-                };
+        })
+            .then(response => response.json())
+            .then(json => {
+                let results = json.Results.map(result => {
+                    return {
+                        title: result.Text,
+                        description: result.Result
+                    };
+                });
+                if(json.Answer) {
+                    results.unshift({
+                        title: json.Answer,
+                        description: json.AnswerType
+                    });
+                }
+                if(json.RelatedTopics && json.RelatedTopics.length > 0) {
+                    results.unshift({
+                        title: json.RelatedTopics[0].Text
+                    });
+                }
+                if(json.AbstractText) {
+                    results.unshift({
+                        title: json.AbstractText
+                    });
+                }
+                // console.log(results);
+                return results;
             });
-            promise.resolve(results);
-        });
-        return promise;
     }
 
     getName() {

src/autocomplete/EmojiProvider.js

@@ -0,0 +1,41 @@
+import AutocompleteProvider from './AutocompleteProvider';
+import Q from 'q';
+import {emojioneList, shortnameToImage} from 'emojione';
+import Fuse from 'fuse.js';
+
+const EMOJI_REGEX = /:\w*:?/g;
+const EMOJI_SHORTNAMES = Object.keys(emojioneList);
+
+export default class EmojiProvider extends AutocompleteProvider {
+    constructor() {
+        super();
+        console.log(EMOJI_SHORTNAMES);
+        this.fuse = new Fuse(EMOJI_SHORTNAMES);
+    }
+
+    getCompletions(query: String) {
+        let completions = [];
+        const matches = query.match(EMOJI_REGEX);
+        console.log(matches);
+        if(!!matches) {
+            const command = matches[0];
+            completions = this.fuse.search(command).map(result => {
+                let shortname = EMOJI_SHORTNAMES[result];
+                let imageHTML = shortnameToImage(shortname);
+                return {
+                    title: shortname,
+                    component: (
+                        <div className="mx_Autocomplete_Completion">
+                            <span dangerouslySetInnerHTML={{__html: imageHTML}}></span> {shortname}
+                        </div>
+                    )
+                };
+            }).slice(0, 4);
+        }
+        return Q.when(completions);
+    }
+
+    getName() {
+        return 'Emoji';
+    }
+}