[FIX] Read receipts are broken (#22203)

app/message-read-receipt/client/index.js

@@ -0,0 +1 @@
+import './views/readReceipts';

app/message-read-receipt/client/views/readReceipts.html

@@ -0,0 +1,16 @@
+<template name="readReceipts">
+	{{#if isLoading}}
+		{{> loading class="loading-animation--primary"}}
+	{{else}}
+		<p>{{_ "Read_by"}}:</p>
+		<ul class="read-receipts">
+			{{#each receipts}}
+				<li class="read-receipts__user background-transparent-dark-hover">
+					{{> avatar username=user.username}}
+					<div class="read-receipts__name color-primary-font-color">{{displayName}}</div>
+					<span class="read-receipts__time color-info-font-color" title="{{dateTime}}">{{time}}</span>
+				</li>
+			{{/each}}
+		</ul>
+	{{/if}}
+</template>

app/message-read-receipt/client/views/readReceipts.js

@@ -0,0 +1,39 @@
+import { Meteor } from 'meteor/meteor';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Template } from 'meteor/templating';
+import moment from 'moment';
+
+import { settings } from '../../../settings';
+
+import './readReceipts.html';
+
+Template.readReceipts.helpers({
+	receipts() {
+		return Template.instance().readReceipts.get();
+	},
+	displayName() {
+		return (settings.get('UI_Use_Real_Name') && this.user.name) || this.user.username;
+	},
+	time() {
+		return moment(this.ts).format('L LTS');
+	},
+	isLoading() {
+		return Template.instance().loading.get();
+	},
+});
+
+Template.readReceipts.onCreated(function readReceiptsOnCreated() {
+	this.loading = new ReactiveVar(false);
+	this.readReceipts = new ReactiveVar([]);
+});
+
+Template.readReceipts.onRendered(function readReceiptsOnRendered() {
+	this.loading.set(true);
+	Meteor.call('getReadReceipts', { messageId: this.data.messageId }, (error, result) => {
+		if (!error) {
+			this.readReceipts.set(result);
+		}
+
+		this.loading.set(false);
+	});
+});

client/importPackages.ts

@@ -94,3 +94,4 @@ import '../app/livechat/client';
 import '../app/meteor-autocomplete/client';
 import '../app/theme/client';
 import '../app/custom/client';
+import '../app/message-read-receipt/client';