[IMPROVE] Replace customSounds publication by REST (RocketChat#15907)

app/api/server/index.js

@@ -32,6 +32,7 @@ import './v1/subscriptions';
 import './v1/users';
 import './v1/video-conference';
 import './v1/autotranslate';
+import './v1/custom-sounds';
 import './v1/custom-user-status';
 
 export { API, APIClass, defaultRateLimiterOptions } from './api';

app/api/server/lib/custom-sounds.js

@@ -0,0 +1,20 @@
+import { CustomSounds } from '../../../models/server/raw';
+
+export async function findCustomSounds({ query = {}, pagination: { offset, count, sort } }) {
+	const cursor = await CustomSounds.find(query, {
+		sort: sort || { name: 1 },
+		skip: offset,
+		limit: count,
+	});
+
+	const total = await cursor.count();
+
+	const sounds = await cursor.toArray();
+
+	return {
+		sounds,
+		count: sounds.length,
+		offset,
+		total,
+	};
+}

app/api/server/v1/custom-sounds.js

@@ -0,0 +1,18 @@
+import { API } from '../api';
+import { findCustomSounds } from '../lib/custom-sounds';
+
+API.v1.addRoute('custom-sounds.list', { authRequired: true }, {
+	get() {
+		const { offset, count } = this.getPaginationItems();
+		const { sort, query } = this.parseJsonQuery();
+
+		return API.v1.success(Promise.await(findCustomSounds({
+			query,
+			pagination: {
+				offset,
+				count,
+				sort,
+			},
+		})));
+	},
+});

app/custom-sounds/client/admin/adminSounds.html

@@ -7,10 +7,10 @@
 					<form class="search-form" role="form">
 						<div class="rc-input__wrapper">
 							<div class="rc-input__icon">
-								{{#if isReady}}
-									{{> icon block="rc-input__icon-svg" icon="magnifier" }}
-								{{else}}
+								{{#if isLoading}}
 									{{> loading }}
+								{{else}}
+									{{> icon block="rc-input__icon-svg" icon="magnifier" }}
 								{{/if}}
 							</div>
 							<input id="sound-filter" type="text" class="rc-input__element"
@@ -43,13 +43,13 @@
 										</div>
 									</div>
 								</td>
-                                                                <td width="20%">
-                                                                        <div class="rc-table-wrapper">
-                                                                                {{>icon _id=_id icon="play" block="icon-play-circled"}}
-                                                                                {{>icon _id=_id icon="pause" block="icon-pause-circled"}}
-                                                                                {{>icon _id=_id icon="ban" block="icon-reset-circled"}}
-                                                                        </div>
-                                                                </td>
+								<td width="20%">
+										<div class="rc-table-wrapper">
+												{{>icon _id=_id icon="play" block="icon-play-circled"}}
+												{{>icon _id=_id icon="pause" block="icon-pause-circled"}}
+												{{>icon _id=_id icon="ban" block="icon-reset-circled"}}
+										</div>
+								</td>
 							</tr>
 							{{else}}
 								{{# with searchText}}
@@ -58,11 +58,11 @@
 									</tr>
 								{{/with}}
 							{{/each}}
-							{{#unless isReady}}
+							{{#if isLoading}}
 							<tr class="table-no-click">
 								<td class="table-loading-td">{{> loading}}</td>
 							</tr>
-							{{/unless}}
+							{{/if}}
 						</tbody>
 					{{/table}}
 				{{/requiresPermission}}

app/custom-sounds/client/admin/adminSounds.js

@@ -2,40 +2,25 @@ import { ReactiveVar } from 'meteor/reactive-var';
 import { Tracker } from 'meteor/tracker';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { Template } from 'meteor/templating';
-import s from 'underscore.string';
+import _ from 'underscore';
 
-import { CustomSounds as CustomSoundsModel } from '../../../models';
 import { RocketChatTabBar, SideNav, TabBar } from '../../../ui-utils';
 import { CustomSounds } from '../lib/CustomSounds';
+import { APIClient } from '../../../utils/client';
+
+const LIST_SIZE = 50;
+const DEBOUNCE_TIME_TO_SEARCH_IN_MS = 500;
 
 Template.adminSounds.helpers({
 	searchText() {
 		const instance = Template.instance();
 		return instance.filter && instance.filter.get();
 	},
-	isReady() {
-		if (Template.instance().ready != null) {
-			return Template.instance().ready.get();
-		}
-		return undefined;
-	},
 	customsounds() {
-		return Template.instance().customsounds();
+		return Template.instance().sounds.get();
 	},
 	isLoading() {
-		if (Template.instance().ready != null) {
-			if (!Template.instance().ready.get()) {
-				return 'btn-loading';
-			}
-		}
-	},
-	hasMore() {
-		if (Template.instance().limit != null) {
-			if (typeof Template.instance().customsounds === 'function') {
-				return Template.instance().limit.get() === Template.instance().customsounds().length;
-			}
-		}
-		return false;
+		return Template.instance().isLoading.get();
 	},
 	flexData() {
 		return {
@@ -47,18 +32,22 @@ Template.adminSounds.helpers({
 	onTableScroll() {
 		const instance = Template.instance();
 		return function(currentTarget) {
-			if (
-				currentTarget.offsetHeight + currentTarget.scrollTop
-				>= currentTarget.scrollHeight - 100
-			) {
-				return instance.limit.set(instance.limit.get() + 50);
+			if (currentTarget.offsetHeight + currentTarget.scrollTop < currentTarget.scrollHeight - 100) {
+				return;
+			}
+			const sounds = instance.sounds.get();
+			if (instance.total.get() > sounds.length) {
+				instance.offset.set(instance.offset.get() + LIST_SIZE);
 			}
 		};
 	},
 	onTableItemClick() {
 		const instance = Template.instance();
 		return function(item) {
-			instance.tabBarData.set(CustomSoundsModel.findOne({ _id: item._id }));
+			instance.tabBarData.set({
+				sound: instance.sounds.get().find((sound) => sound._id === item._id),
+				onSuccess: instance.onSuccessCallback,
+			});
 			instance.tabBar.showGroup('custom-sounds-selected');
 			instance.tabBar.open('admin-sound-info');
 		};
@@ -67,9 +56,12 @@ Template.adminSounds.helpers({
 
 Template.adminSounds.onCreated(function() {
 	const instance = this;
-	this.limit = new ReactiveVar(50);
+	this.sounds = new ReactiveVar([]);
+	this.offset = new ReactiveVar(0);
+	this.total = new ReactiveVar(0);
+	this.query = new ReactiveVar({});
+	this.isLoading = new ReactiveVar(false);
 	this.filter = new ReactiveVar('');
-	this.ready = new ReactiveVar(false);
 
 	this.tabBar = new RocketChatTabBar();
 	this.tabBar.showGroup(FlowRouter.current().route.name);
@@ -81,10 +73,6 @@ Template.adminSounds.onCreated(function() {
 		i18nTitle: 'Custom_Sound_Add',
 		icon: 'plus',
 		template: 'adminSoundEdit',
-		openClick(/* e, t*/) {
-			instance.tabBarData.set();
-			return true;
-		},
 		order: 1,
 	});
 
@@ -97,26 +85,36 @@ Template.adminSounds.onCreated(function() {
 		order: 2,
 	});
 
-	this.autorun(function() {
-		const limit = instance.limit != null ? instance.limit.get() : 0;
-		const subscription = instance.subscribe('customSounds', '', limit);
-		instance.ready.set(subscription.ready());
-	});
+	this.onSuccessCallback = () => {
+		this.offset.set(0);
+		return this.loadSounds(this.query.get(), this.offset.get());
+	};
 
-	this.customsounds = function() {
-		const filter = instance.filter != null ? s.trim(instance.filter.get()) : '';
+	this.tabBarData.set({
+		onSuccess: instance.onSuccessCallback,
+	});
 
-		let query = {};
+	this.loadSounds = _.debounce(async (query, offset) => {
+		this.isLoading.set(true);
+		const { sounds, total } = await APIClient.v1.get(`custom-sounds.list?count=${ LIST_SIZE }&offset=${ offset }&query=${ JSON.stringify(query) }`);
+		this.total.set(total);
+		if (offset === 0) {
+			this.sounds.set(sounds);
+		} else {
+			this.sounds.set(this.sounds.get().concat(sounds));
+		}
+		this.isLoading.set(false);
+	}, DEBOUNCE_TIME_TO_SEARCH_IN_MS);
 
+	this.autorun(() => {
+		const filter = this.filter.get() && this.filter.get().trim();
+		const offset = this.offset.get();
 		if (filter) {
-			const filterReg = new RegExp(s.escapeRegExp(filter), 'i');
-			query = { name: filterReg };
+			const regex = { $regex: filter, $options: 'i' };
+			return this.loadSounds({ name: regex }, offset);
 		}
-
-		const limit = instance.limit != null ? instance.limit.get() : 0;
-
-		return CustomSoundsModel.find(query, { limit, sort: { name: 1 } }).fetch();
-	};
+		return this.loadSounds({}, offset);
+	});
 });
 
 Template.adminSounds.onRendered(() =>
@@ -138,6 +136,7 @@ Template.adminSounds.events({
 		e.stopPropagation();
 		e.preventDefault();
 		t.filter.set(e.currentTarget.value);
+		t.offset.set(0);
 	},
 	'click .icon-play-circled'(e) {
 		e.preventDefault();

app/custom-sounds/client/admin/route.js

@@ -1,12 +1,8 @@
-import { Meteor } from 'meteor/meteor';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { BlazeLayout } from 'meteor/kadira:blaze-layout';
 
 FlowRouter.route('/admin/custom-sounds', {
 	name: 'custom-sounds',
-	subscriptions(/* params, queryParams*/) {
-		this.register('customSounds', Meteor.subscribe('customSounds'));
-	},
 	async action(/* params*/) {
 		await import('./views');
 		BlazeLayout.render('main', { center: 'adminSounds' });

app/custom-sounds/client/admin/soundEdit.js

@@ -57,7 +57,7 @@ Template.soundEdit.onCreated(function() {
 		this.sound = undefined;
 		this.data.tabBar.showGroup('custom-sounds');
 	}
-
+	this.onSuccess = Template.currentData().onSuccess;
 	this.cancel = (form, name) => {
 		form.reset();
 		this.data.tabBar.close();
@@ -141,6 +141,7 @@ Template.soundEdit.onCreated(function() {
 					}
 
 					toastr.success(t('Custom_Sound_Saved_Successfully'));
+					this.onSuccess();
 
 					this.cancel(form, soundData.name);
 				}

app/custom-sounds/client/admin/soundInfo.js

@@ -25,6 +25,7 @@ Template.soundInfo.helpers({
 			tabBar: instance.data.tabBar,
 			data: instance.data.data,
 			sound: instance.sound.get(),
+			onSuccess: instance.onSuccess,
 			back(name) {
 				instance.editingSound.set();
 
@@ -68,7 +69,7 @@ Template.soundInfo.events({
 							timer: 2000,
 							showConfirmButton: false,
 						});
-
+						instance.onSuccess();
 						instance.data.tabBar.showGroup('custom-sounds');
 						instance.data.tabBar.close();
 					}
@@ -91,6 +92,7 @@ Template.soundInfo.onCreated(function() {
 	this.editingSound = new ReactiveVar();
 
 	this.loadedName = new ReactiveVar();
+	this.onSuccess = Template.currentData().onSuccess;
 
 	this.autorun(() => {
 		const data = Template.currentData();
@@ -100,7 +102,7 @@ Template.soundInfo.onCreated(function() {
 	});
 
 	this.autorun(() => {
-		const data = Template.currentData();
+		const data = Template.currentData().sound;
 		const sound = this.sound.get();
 		if (sound && sound.name != null) {
 			this.loadedName.set(sound.name);
@@ -110,7 +112,7 @@ Template.soundInfo.onCreated(function() {
 	});
 
 	this.autorun(() => {
-		const data = Template.currentData();
+		const data = Template.currentData().sound;
 		this.sound.set(data);
 	});
 });

app/custom-sounds/server/publications/customSounds.js

@@ -4,6 +4,7 @@ import s from 'underscore.string';
 import { CustomSounds } from '../../../models';
 
 Meteor.publish('customSounds', function(filter, limit) {
+	console.warn('The publication "customSounds" is deprecated and will be removed after version v3.0.0');
 	if (!this.userId) {
 		return this.ready();
 	}

app/models/server/raw/CustomSounds.js

@@ -0,0 +1,5 @@
+import { BaseRaw } from './BaseRaw';
+
+export class CustomSoundsRaw extends BaseRaw {
+
+}

app/models/server/raw/index.js

@@ -28,6 +28,8 @@ import LivechatExternalMessagesModel from '../models/LivechatExternalMessages';
 import { LivechatExternalMessageRaw } from './LivechatExternalMessages';
 import LivechatVisitorsModel from '../models/LivechatVisitors';
 import { LivechatVisitorsRaw } from './LivechatVisitors';
+import CustomSoundsModel from '../models/CustomSounds';
+import { CustomSoundsRaw } from './CustomSounds';
 import CustomUserStatusModel from '../models/CustomUserStatus';
 import { CustomUserStatusRaw } from './CustomUserStatus';
 import LivechatAgentActivityModel from '../models/LivechatAgentActivity';
@@ -48,5 +50,6 @@ export const LivechatRooms = new LivechatRoomsRaw(LivechatRoomsModel.model.rawCo
 export const Messages = new MessagesRaw(MessagesModel.model.rawCollection());
 export const LivechatExternalMessage = new LivechatExternalMessageRaw(LivechatExternalMessagesModel.model.rawCollection());
 export const LivechatVisitors = new LivechatVisitorsRaw(LivechatVisitorsModel.model.rawCollection());
+export const CustomSounds = new CustomSoundsRaw(CustomSoundsModel.model.rawCollection());
 export const CustomUserStatus = new CustomUserStatusRaw(CustomUserStatusModel.model.rawCollection());
 export const LivechatAgentActivity = new LivechatAgentActivityRaw(LivechatAgentActivityModel.model.rawCollection());

tests/end-to-end/api/17-custom-sounds.js

@@ -0,0 +1,22 @@
+import { getCredentials, api, request, credentials } from '../../data/api-data.js';
+
+describe('[CustomSounds]', function() {
+	this.retries(0);
+
+	before((done) => getCredentials(done));
+
+	describe('[/custom-sounds.list]', () => {
+		it('should return custom sounds', (done) => {
+			request.get(api('custom-sounds.list'))
+				.set(credentials)
+				.expect(200)
+				.expect((res) => {
+					expect(res.body).to.have.property('sounds').and.to.be.an('array');
+					expect(res.body).to.have.property('total');
+					expect(res.body).to.have.property('offset');
+					expect(res.body).to.have.property('count');
+				})
+				.end(done);
+		});
+	});
+});