Permalink
Browse files

room, user, ddg autocomplete providers (wip)

  • Loading branch information...
aviraldg committed Jun 12, 2016
1 parent 0df201c commit 4bc8ec3e6dac96f92458c1d5186ea20539fb5fcc
@@ -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 ",
@@ -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;
}
@@ -1,3 +1,5 @@
export default class AutocompleteProvider {
getName(): string {
return 'Default Provider';
}
}
@@ -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
};
});
}
@@ -62,4 +62,8 @@ export default class CommandProvider extends AutocompleteProvider {
}
return Q.when(completions);
}
getName() {
return 'Commands';
}
}
@@ -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';
}
}
@@ -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';
}
}
@@ -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';
}
}
@@ -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 (

0 comments on commit 4bc8ec3

Please sign in to comment.