room, user, ddg autocomplete providers (wip)

Author: aviraldg

package.json

@@ -38,7 +38,8 @@
     "react-dom": "^15.0.1",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#c3d942e",
     "sanitize-html": "^1.11.1",
-    "velocity-vector": "vector-im/velocity#059e3b2"
+    "velocity-vector": "vector-im/velocity#059e3b2",
+    "whatwg-fetch": "^1.0.0"
   },
   "//babelversion": [
     "brief experiments with babel6 seems to show that it generates source ",

src/MatrixClientPeg.js

@@ -20,7 +20,7 @@ limitations under the License.
 var Matrix = require("matrix-js-sdk");
 var GuestAccess = require("./GuestAccess");
 
-var matrixClient = null;
+let matrixClient: MatrixClient = null;
 
 var localStorage = window.localStorage;
 
@@ -82,7 +82,7 @@ class MatrixClient {
         this.guestAccess = guestAccess;
     }
 
-    get() {
+    get(): MatrixClient {
         return matrixClient;
     }
 

src/autocomplete/AutocompleteProvider.js

@@ -1,3 +1,5 @@
 export default class AutocompleteProvider {
-
+    getName(): string {
+        return 'Default Provider';
+    }
 }

src/autocomplete/Autocompleter.js

@@ -1,7 +1,20 @@
 import CommandProvider from './CommandProvider';
+import DuckDuckGoProvider from './DuckDuckGoProvider';
+import RoomProvider from './RoomProvider';
+import UserProvider from './UserProvider';
 
-const COMPLETERS = [CommandProvider].map(completer => new completer());
+const PROVIDERS = [
+    CommandProvider,
+    DuckDuckGoProvider,
+    RoomProvider,
+    UserProvider
+].map(completer => new completer());
 
 export function getCompletions(query: String) {
-    return COMPLETERS.map(completer => completer.getCompletions(query));
+    return PROVIDERS.map(provider => {
+        return {
+            completions: provider.getCompletions(query),
+            provider
+        };
+    });
 }

src/autocomplete/CommandProvider.js

@@ -62,4 +62,8 @@ export default class CommandProvider extends AutocompleteProvider {
         }
         return Q.when(completions);
     }
+
+    getName() {
+        return 'Commands';
+    }
 }

src/autocomplete/DuckDuckGoProvider.js

@@ -0,0 +1,35 @@
+import AutocompleteProvider from './AutocompleteProvider';
+import Q from 'q';
+import 'whatwg-fetch';
+
+const DDG_REGEX = /\/ddg\w+(.+)$/;
+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)}`;
+    }
+
+    getCompletions(query: String) {
+        if(!query)
+            return Q.when([]);
+
+        let promise = Q.defer();
+        fetch(DuckDuckGoProvider.getQueryUri(query), {
+            method: 'GET'
+        }).then(response => {
+            let results = response.Results.map(result => {
+                return {
+                    title: result.Text,
+                    description: result.Result
+                };
+            });
+            promise.resolve(results);
+        });
+        return promise;
+    }
+
+    getName() {
+        return 'Results from DuckDuckGo';
+    }
+}

src/autocomplete/RoomProvider.js

@@ -0,0 +1,31 @@
+import AutocompleteProvider from './AutocompleteProvider';
+import Q from 'q';
+import MatrixClientPeg from '../MatrixClientPeg';
+
+const ROOM_REGEX = /(?=#)[^\s]*/g;
+
+export default class RoomProvider extends AutocompleteProvider {
+    constructor() {
+        super();
+    }
+
+    getCompletions(query: String) {
+        let client = MatrixClientPeg.get();
+        let completions = [];
+        const matches = query.match(ROOM_REGEX);
+        if(!!matches) {
+            const command = matches[0];
+            completions = client.getRooms().map(room => {
+                return {
+                    title: room.name,
+                    subtitle: room.roomId
+                };
+            });
+        }
+        return Q.when(completions);
+    }
+
+    getName() {
+        return 'Rooms';
+    }
+}

src/autocomplete/UserProvider.js

@@ -0,0 +1,31 @@
+import AutocompleteProvider from './AutocompleteProvider';
+import Q from 'q';
+import MatrixClientPeg from '../MatrixClientPeg';
+
+const ROOM_REGEX = /@[^\s]*/g;
+
+export default class UserProvider extends AutocompleteProvider {
+    constructor() {
+        super();
+    }
+
+    getCompletions(query: String) {
+        let client = MatrixClientPeg.get();
+        let completions = [];
+        const matches = query.match(ROOM_REGEX);
+        if(!!matches) {
+            const command = matches[0];
+            completions = client.getUsers().map(user => {
+                return {
+                    title: user.displayName,
+                    description: user.userId
+                };
+            });
+        }
+        return Q.when(completions);
+    }
+
+    getName() {
+        return 'Users';
+    }
+}

src/components/views/rooms/Autocomplete.js

@@ -11,11 +11,28 @@ export default class Autocomplete extends React.Component {
     }
 
     componentWillReceiveProps(props, state) {
-        getCompletions(props.query)[0].then(completions => {
-            console.log(completions);
-            this.setState({
-                completions
-            });
+        getCompletions(props.query).map(completionResult => {
+            try {
+                completionResult.completions.then(completions => {
+                    let i = this.state.completions.findIndex(
+                        completion => completion.provider === completionResult.provider
+                    );
+
+                    i = i == -1 ? this.state.completions.length : i;
+                    console.log(completionResult);
+                    let newCompletions = Object.assign([], this.state.completions);
+                    completionResult.completions = completions;
+                    newCompletions[i] = completionResult;
+                    console.log(newCompletions);
+                    this.setState({
+                        completions: newCompletions
+                    });
+                }, err => {
+
+                });
+            } catch (e) {
+                // An error in one provider shouldn't mess up the rest.
+            }
         });
     }
 
@@ -33,18 +50,28 @@ export default class Autocomplete extends React.Component {
         };
 
         this.props.pinTo.forEach(direction => {
-            console.log(`${direction} = ${position[direction]}`);
             style[direction] = position[direction];
         });
 
-        const renderedCompletions = this.state.completions.map((completion, i) => {
-            return (
-                <div key={i} class="mx_Autocomplete_Completion">
-                    <strong>{completion.title}</strong>
-                    <em>{completion.subtitle}</em>
-                    <span style={{color: 'gray', float: 'right'}}>{completion.description}</span>
+        const renderedCompletions = this.state.completions.map((completionResult, i) => {
+            console.log(completionResult);
+            let completions = completionResult.completions.map((completion, i) => {
+                return (
+                    <div key={i} class="mx_Autocomplete_Completion">
+                        <strong>{completion.title}</strong>
+                        <em>{completion.subtitle}</em>
+                        <span style={{color: 'gray', float: 'right'}}>{completion.description}</span>
+                    </div>
+                );
+            });
+
+
+            return completions.length > 0 ? (
+                <div key={i} class="mx_Autocomplete_ProviderSection">
+                    <strong>{completionResult.provider.getName()}</strong>
+                    {completions}
                 </div>
-            );
+            ) : null;
         });
 
         return (