Rewrite Contextual Bar Discussion List in React

app/api/server/lib/messages.js

@@ -116,14 +116,14 @@ export async function findSnippetedMessages({ uid, roomId, pagination: { offset,
 	};
 }
 
-export async function findDiscussionsFromRoom({ uid, roomId, pagination: { offset, count, sort } }) {
+export async function findDiscussionsFromRoom({ uid, roomId, text, pagination: { offset, count, sort } }) {
 	const room = await Rooms.findOneById(roomId);
 
 	if (!await canAccessRoomAsync(room, { _id: uid })) {
 		throw new Error('error-not-allowed');
 	}
 
-	const cursor = Messages.findDiscussionsByRoom(roomId, {
+	const cursor = Messages.findDiscussionsByRoomAndText(roomId, text, {
 		sort: sort || { ts: -1 },
 		skip: offset,
 		limit: count,

app/api/server/v1/chat.js

@@ -697,7 +697,7 @@ API.v1.addRoute('chat.getSnippetedMessages', { authRequired: true }, {
 
 API.v1.addRoute('chat.getDiscussions', { authRequired: true }, {
 	get() {
-		const { roomId } = this.queryParams;
+		const { roomId, text } = this.queryParams;
 		const { sort } = this.parseJsonQuery();
 		const { offset, count } = this.getPaginationItems();
 
@@ -707,6 +707,7 @@ API.v1.addRoute('chat.getDiscussions', { authRequired: true }, {
 		const messages = Promise.await(findDiscussionsFromRoom({
 			uid: this.userId,
 			roomId,
+			text,
 			pagination: {
 				offset,
 				count,

app/discussion/client/tabBar.js

@@ -10,6 +10,7 @@ Meteor.startup(function() {
 		i18nTitle: 'Discussions',
 		icon: 'discussion',
 		template: 'discussionsTabbar',
+		full: true,
 		order: 1,
 		condition: () => settings.get('Discussion_enabled'),
 	});

app/discussion/client/views/DiscussionTabbar.html

@@ -1,24 +1,3 @@
 <template name="discussionsTabbar">
-	{{#if Template.subscriptionsReady}}
-		{{#unless hasMessages}}
-			<div class="list-view discussions-list flex-tab__header">
-					<h2>{{_ "No_discussions_yet"}}</h2>
-			</div>
-		{{/unless}}
-	{{/if}}
-	<div class="flex-tab__result discussions-list js-list">
-		<ul class="list clearfix">
-			{{# with messageContext}}
-				{{#each msg in messages}}
-					{{> message msg=msg room=room subscription=subscription groupable=false settings=settings u=u}}
-				{{/each}}
-			{{/with}}
-		</ul>
-
-		{{#if hasMore}}
-			<div class="load-more">
-				{{> loading}}
-			</div>
-		{{/if}}
-	</div>
+	{{ > DiscussionMessageList rid=rid onClose=close}}
 </template>

app/discussion/client/views/DiscussionTabbar.js

@@ -1,74 +1,11 @@
-import _ from 'underscore';
-import { ReactiveVar } from 'meteor/reactive-var';
-import { Mongo } from 'meteor/mongo';
 import { Template } from 'meteor/templating';
 
-import { messageContext } from '../../../ui-utils/client/lib/messageContext';
-import { Messages } from '../../../models/client';
-import { APIClient } from '../../../utils/client';
-import { upsertMessageBulk } from '../../../ui-utils/client/lib/RoomHistoryManager';
-
 import './DiscussionTabbar.html';
 
-const LIMIT_DEFAULT = 50;
-
 Template.discussionsTabbar.helpers({
-	hasMessages() {
-		return Template.instance().messages.find().count();
-	},
-	messages() {
-		const instance = Template.instance();
-		return instance.messages.find({}, { limit: instance.limit.get(), sort: { ts: -1 } });
-	},
-	hasMore() {
-		return Template.instance().hasMore.get();
+	close() {
+		const { data } = Template.instance();
+		const { tabBar } = data;
+		return () => tabBar.close();
 	},
-	messageContext,
-});
-
-Template.discussionsTabbar.onCreated(function() {
-	this.rid = this.data.rid;
-	this.messages = new Mongo.Collection(null);
-	this.hasMore = new ReactiveVar(true);
-	this.limit = new ReactiveVar(LIMIT_DEFAULT);
-
-	this.autorun(() => {
-		const query = {
-			rid: this.rid,
-			drid: { $exists: true },
-		};
-
-		this.cursor && this.cursor.stop();
-
-		this.limit.set(LIMIT_DEFAULT);
-
-		this.cursor = Messages.find(query).observe({
-			added: ({ _id, ...message }) => {
-				this.messages.upsert({ _id }, message);
-			},
-			changed: ({ _id, ...message }) => {
-				this.messages.upsert({ _id }, message);
-			},
-			removed: ({ _id }) => {
-				this.messages.remove({ _id });
-			},
-		});
-	});
-
-	this.autorun(async () => {
-		const limit = this.limit.get();
-		const { messages, total } = await APIClient.v1.get(`chat.getDiscussions?roomId=${ this.rid }&count=${ limit }`);
-
-		upsertMessageBulk({ msgs: messages }, this.messages);
-
-		this.hasMore.set(total > limit);
-	});
-});
-
-Template.discussionsTabbar.events({
-	'scroll .js-list': _.throttle(function(e, instance) {
-		if (e.target.scrollTop >= e.target.scrollHeight - e.target.clientHeight - 10 && instance.hasMore.get()) {
-			instance.limit.set(instance.limit.get() + LIMIT_DEFAULT);
-		}
-	}, 200),
 });

app/models/server/raw/Messages.js

@@ -48,6 +48,20 @@ export class MessagesRaw extends BaseRaw {
 		return this.find(query, options);
 	}
 
+	findDiscussionsByRoomAndText(rid, text, options) {
+		const query = {
+			rid,
+			drid: { $exists: true },
+			...text && {
+				$text: {
+					$search: text,
+				},
+			},
+		};
+
+		return this.find(query, options);
+	}
+
 	findAllNumberOfTransferredRooms({ start, end, departmentId, onlyCount = false, options = {} }) {
 		const match = {
 			$match: {

app/threads/client/components/ThreadComponent.js

@@ -11,7 +11,7 @@ import { roomTypes, APIClient } from '../../../utils/client';
 import { call } from '../../../ui-utils/client';
 import { useTranslation } from '../../../../client/contexts/TranslationContext';
 import VerticalBar from '../../../../client/components/basic/VerticalBar';
-import { useLocalStorage } from './hooks/useLocalstorage';
+import { useLocalStorage } from '../../../../client/Channel/hooks/useLocalstorage';
 import { normalizeThreadTitle } from '../lib/normalizeThreadTitle';
 
 export default function ThreadComponent({ mid, rid, jump, room, ...props }) {

app/threads/client/flextab/threads.js

@@ -1,15 +1,8 @@
 
 import { Template } from 'meteor/templating';
-import { HTML } from 'meteor/htmljs';
 
 import './threads.html';
 import '../threads.css';
-import { createTemplateForComponent } from '../../../../client/reactAdapters';
-
-
-createTemplateForComponent('ThreadsList', () => import('../components/ThreadList'), {
-	renderContainerView: () => HTML.DIV({ class: 'contextual-bar' }), // eslint-disable-line new-cap
-});
 
 Template.threads.helpers({
 	rid() {