From d98f71aed1cabbffcefd1559d302ed9cc53ad0a5 Mon Sep 17 00:00:00 2001
From: Yash Rajpal <58601732+yash-rajpal@users.noreply.github.com>
Date: Tue, 9 Aug 2022 18:17:12 +0530
Subject: [PATCH] [FIX] Decrypt E2EE messages on thread list (#26133)

Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
---
 .../client/hooks/useDecryptedMessage.ts       | 25 +++++++++++++++++++
 .../views/room/contextualBar/Threads/Row.tsx  |  4 ++-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 apps/meteor/client/hooks/useDecryptedMessage.ts

diff --git a/apps/meteor/client/hooks/useDecryptedMessage.ts b/apps/meteor/client/hooks/useDecryptedMessage.ts
new file mode 100644
index 00000000000..7c13077787d
--- /dev/null
+++ b/apps/meteor/client/hooks/useDecryptedMessage.ts
@@ -0,0 +1,25 @@
+import { IMessage, isE2EEMessage } from '@rocket.chat/core-typings';
+import { useSafely } from '@rocket.chat/fuselage-hooks';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import { useState, useEffect } from 'react';
+
+import { e2e } from '../../app/e2e/client/rocketchat.e2e';
+
+export const useDecryptedMessage = (message: IMessage): string => {
+	const t = useTranslation();
+	const [decryptedMessage, setDecryptedMessage] = useSafely(useState(t('E2E_message_encrypted_placeholder')));
+
+	useEffect(() => {
+		if (!isE2EEMessage(message)) {
+			return;
+		}
+
+		e2e.decryptMessage(message).then((decryptedMsg) => {
+			if (decryptedMsg.msg) {
+				setDecryptedMessage(decryptedMsg.msg);
+			}
+		});
+	}, [message, t, setDecryptedMessage]);
+
+	return isE2EEMessage(message) ? decryptedMessage : message.msg;
+};
diff --git a/apps/meteor/client/views/room/contextualBar/Threads/Row.tsx b/apps/meteor/client/views/room/contextualBar/Threads/Row.tsx
index b6d074dee60..4132167189a 100644
--- a/apps/meteor/client/views/room/contextualBar/Threads/Row.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Threads/Row.tsx
@@ -2,6 +2,7 @@ import type { IMessage } from '@rocket.chat/core-typings';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { FC, memo, MouseEvent } from 'react';
 
+import { useDecryptedMessage } from '../../../../hooks/useDecryptedMessage';
 import { useTimeAgo } from '../../../../hooks/useTimeAgo';
 import { clickableItem } from '../../../../lib/clickableItem';
 import { callWithErrorHandling } from '../../../../lib/utils/callWithErrorHandling';
@@ -36,7 +37,8 @@ const Row: FC<ThreadRowProps> = memo(function Row({ thread, showRealNames, unrea
 	const t = useTranslation();
 	const formatDate = useTimeAgo();
 
-	const msg = normalizeThreadMessage(thread);
+	const decryptedMsg = useDecryptedMessage(thread);
+	const msg = normalizeThreadMessage({ ...thread, msg: decryptedMsg });
 
 	const { name = thread.u.username } = thread.u;