@all & @here mention (#200)

app/containers/MessageBox/index.js

@@ -212,11 +212,21 @@ export default class MessageBox extends React.PureComponent {
 		});
 	}
 
+	_getFixedMentions(keyword) {
+		if ('all'.indexOf(keyword) !== -1) {
+			this.users = [{ _id: -1, username: 'all', desc: 'all' }, ...this.users];
+		}
+		if ('here'.indexOf(keyword) !== -1) {
+			this.users = [{ _id: -2, username: 'here', desc: 'active users' }, ...this.users];
+		}
+	}
+
 	async _getUsers(keyword) {
 		this.users = database.objects('users');
 		if (keyword) {
 			this.users = this.users.filtered('username CONTAINS[c] $0', keyword);
 		}
+		this._getFixedMentions(keyword);
 		this.setState({ mentions: this.users.slice() });
 
 		const usernames = [];
@@ -244,8 +254,9 @@ export default class MessageBox extends React.PureComponent {
 			console.log('spotlight canceled');
 		} finally {
 			delete this.oldPromise;
-			this.users = database.objects('users').filtered('username CONTAINS[c] $0', keyword);
+			this.users = database.objects('users').filtered('username CONTAINS[c] $0', keyword).slice();
-			this.setState({ mentions: this.users.slice() });
+			this._getFixedMentions(keyword);
+			this.setState({ mentions: this.users });
 		}
 	}
 
@@ -345,20 +356,34 @@ export default class MessageBox extends React.PureComponent {
 		this.component.setNativeProps({ text: newText });
 		this.setState({ text: newText });
 	}
-	renderMentionItem = item => (
+	renderFixedMentionItem = item => (
 		<TouchableOpacity
 			style={styles.mentionItem}
 			onPress={() => this._onPressMention(item)}
 		>
-			<Avatar
+			<Text style={styles.fixedMentionAvatar}>{item.username}</Text>
-				style={{ margin: 8 }}
+			<Text>Notify {item.desc} in this room</Text>
-				text={item.username || item.name}
-				size={30}
-				baseUrl={this.props.baseUrl}
-			/>
-			<Text>{item.username || item.name }</Text>
 		</TouchableOpacity>
 	)
+	renderMentionItem = (item) => {
+		if (item.username === 'all' || item.username === 'here') {
+			return this.renderFixedMentionItem(item);
+		}
+		return (
+			<TouchableOpacity
+				style={styles.mentionItem}
+				onPress={() => this._onPressMention(item)}
+			>
+				<Avatar
+					style={{ margin: 8 }}
+					text={item.username || item.name}
+					size={30}
+					baseUrl={this.props.baseUrl}
+				/>
+				<Text>{item.username || item.name }</Text>
+			</TouchableOpacity>
+		);
+	}
 	renderEmoji() {
 		const emojiContainer = (
 			<View style={styles.emojiContainer}>

app/containers/MessageBox/style.js

@@ -85,5 +85,10 @@ export default StyleSheet.create({
 		borderTopColor: '#ECECEC',
 		borderTopWidth: 1,
 		backgroundColor: '#fff'
+	},
+	fixedMentionAvatar: {
+		fontWeight: 'bold',
+		textAlign: 'center',
+		width: 46
 	}
 });