remove markup from js

so themes can use different styles

public/src/client/chats/search.js

@@ -2,20 +2,27 @@
 
 
 define('forum/chats/search', [
-	'components', 'api', 'alerts', 'helpers',
-], function (components, api, alerts, helpers) {
+	'components', 'api', 'alerts',
+], function (components, api, alerts) {
 	const search = {};
 
 	search.init = function () {
 		components.get('chat/search').on('keyup', utils.debounce(doSearch, 250));
+		const chatsListEl = $('[component="chat/search/list"]');
+		chatsListEl.on('click', '[data-uid]', function () {
+			onUserClick($(this).attr('data-uid'));
+		});
 	};
 
 	function doSearch() {
+		const chatsListEl = $('[component="chat/search/list"]');
 		const username = components.get('chat/search').val();
 		if (!username) {
-			return $('[component="chat/search/list"]').translateHtml('<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>');
+			removeResults(chatsListEl);
+			chatsListEl.find('[component="chat/search/no-users"]').addClass('hidden');
+			return chatsListEl.find('[component="chat/search/start-typing"]').removeClass('hidden');
 		}
-
+		chatsListEl.find('[component="chat/search/start-typing"]').addClass('hidden');
 		api.get('/api/users', {
 			query: username,
 			searchBy: 'username',
@@ -24,56 +31,43 @@ define('forum/chats/search', [
 			.catch(alerts.error);
 	}
 
-	function displayResults(data) {
-		const chatsListEl = $('[component="chat/search/list"]');
-		chatsListEl.empty();
+	function removeResults(chatsListEl) {
+		chatsListEl.find('[data-uid]').remove();
+	}
 
+	async function displayResults(data) {
+		const chatsListEl = $('[component="chat/search/list"]');
+		removeResults(chatsListEl);
 		data.users = data.users.filter(function (user) {
 			return parseInt(user.uid, 10) !== parseInt(app.user.uid, 10);
 		});
 
 		if (!data.users.length) {
-			return chatsListEl.translateHtml('<li><a href="#" class="dropdown-item">[[users:no-users-found]]</a></li>');
+			return chatsListEl.find('[component="chat/search/no-users"]').removeClass('hidden');
 		}
-
-		data.users.forEach(function (userObj) {
-			const chatEl = displayUser(chatsListEl, userObj);
-			onUserClick(chatEl, userObj);
-		});
-
-		chatsListEl.parent().toggleClass('open', true);
+		chatsListEl.find('[component="chat/search/no-users"]').addClass('hidden');
+		const html = await app.parseAndTranslate('chats', 'searchUsers', { searchUsers: data.users });
+		chatsListEl.append(html);
+		chatsListEl.parent().toggleClass('show', true);
 	}
 
-	function displayUser(chatsListEl, userObj) {
-		function createUserImage() {
-			const img = helpers.buildAvatar(userObj, '24px', true);
-			return `<a href="#" class="dropdown-item">${img} ${userObj.username}<a>`;
+	function onUserClick(uid) {
+		if (!uid) {
+			return;
 		}
-
-		const chatEl = $('<li component="chat/search/user"></li>')
-			.attr('data-uid', userObj.uid)
-			.appendTo(chatsListEl);
-
-		chatEl.append(createUserImage());
-		return chatEl;
-	}
-
-	function onUserClick(chatEl, userObj) {
-		chatEl.on('click', function () {
-			socket.emit('modules.chats.hasPrivateChat', userObj.uid, function (err, roomId) {
-				if (err) {
-					return alerts.error(err);
-				}
-				if (roomId) {
-					require(['forum/chats'], function (chats) {
-						chats.switchChat(roomId);
-					});
-				} else {
-					require(['chat'], function (chat) {
-						chat.newChat(userObj.uid);
-					});
-				}
-			});
+		socket.emit('modules.chats.hasPrivateChat', uid, function (err, roomId) {
+			if (err) {
+				return alerts.error(err);
+			}
+			if (roomId) {
+				require(['forum/chats'], function (chats) {
+					chats.switchChat(roomId);
+				});
+			} else {
+				require(['chat'], function (chat) {
+					chat.newChat(uid);
+				});
+			}
 		});
 	}