room, user, ddg autocomplete providers (wip)

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 (