WIP
Carlos Martinez
The textareas for commenting in the app allow users to mention other users. To enhance the user experience, it is required to implement an autocomplete menu to select the user to mention.
- The dropdown should popup in the cursor position
There are a couple of solutions to this problem available:
React mentions is pretty cool, and being a react component would be nice to use. However, they dropped bower support in version v0.3.0. Because we're using rails-assets and no npm we can't get to use this component.
At-js is a jquery component that works nice for our use case too, I selected this component because It will be easy to create a wrapper with react and it allows for customization.
What's needed to implement this feature is the following:
- Refactor out the textarea components in the comments components to a TextArea component.
- Within the TextArea component, use componentDidMount to configure At-Js.
- Expose methods to set and get the value of the textarea
We have to add these methods to get/set the value of the textarea because we can't use a controlled component as the value of the textarea would get out of sync with the plugin.
- Having an autocomplete dropdown component that triggers within the textarea of the comments component when a user types @.
The component is wrapped as a gem and can be fetch for the app adding:
gem 'jquery-atwho-rails'class TextArea {
componentDidMount() {
// these would be get through props
const names = [
{ id: '1', name: 'Carlos Martinez', email: '[email protected]' },
{ id: '2', name: 'Luis Jose', email: '[email protected]' }
];
const config = {
at: '@',
data: names,
// the template to use for each of the items in the dropdown
displayTpl: '<li>${name} <small>${email}</small></li>'
};
let component = this.refs.textarea;
$(component).atwho(config);
}
getValue() {
return this.refs.textarea.value;
}
setValue(value) {
this.refs.textarea.value = value;
}
render() {
return (
<textarea ref='component'></textarea>
);
}
}N/A