From 043eb516232ca03a50afea6819ce7b9526a8081d Mon Sep 17 00:00:00 2001
From: pierre-lehnen-rc <55164754+pierre-lehnen-rc@users.noreply.github.com>
Date: Tue, 1 Jun 2021 14:13:24 -0300
Subject: [PATCH] [FIX] Read receipts are broken (#22203)

---
 app/message-read-receipt/client/index.js      |  1 +
 .../client/views/readReceipts.html            | 16 ++++++++
 .../client/views/readReceipts.js              | 39 +++++++++++++++++++
 client/importPackages.ts                      |  1 +
 4 files changed, 57 insertions(+)
 create mode 100644 app/message-read-receipt/client/index.js
 create mode 100644 app/message-read-receipt/client/views/readReceipts.html
 create mode 100644 app/message-read-receipt/client/views/readReceipts.js

diff --git a/app/message-read-receipt/client/index.js b/app/message-read-receipt/client/index.js
new file mode 100644
index 00000000000..537b2f2268a
--- /dev/null
+++ b/app/message-read-receipt/client/index.js
@@ -0,0 +1 @@
+import './views/readReceipts';
diff --git a/app/message-read-receipt/client/views/readReceipts.html b/app/message-read-receipt/client/views/readReceipts.html
new file mode 100644
index 00000000000..3a81ee9cdcd
--- /dev/null
+++ b/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>
diff --git a/app/message-read-receipt/client/views/readReceipts.js b/app/message-read-receipt/client/views/readReceipts.js
new file mode 100644
index 00000000000..7664d860ba1
--- /dev/null
+++ b/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);
+	});
+});
diff --git a/client/importPackages.ts b/client/importPackages.ts
index e71d31b4260..a6c7c487b98 100644
--- a/client/importPackages.ts
+++ b/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';