From f156c1026d8c9521a06845a0c1a64b7462fb5b28 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Tue, 25 Oct 2022 13:07:25 -0400
Subject: [PATCH] Hide message history if blocked

---
 .../chats/components/chat-composer.tsx        | 13 +------------
 .../chats/components/chat-message-list.tsx    | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx
index 6d09d1e12..f9104f440 100644
--- a/app/soapbox/features/chats/components/chat-composer.tsx
+++ b/app/soapbox/features/chats/components/chat-composer.tsx
@@ -12,7 +12,6 @@ const messages = defineMessages({
   send: { id: 'chat.actions.send', defaultMessage: 'Send' },
   failedToSend: { id: 'chat.failed_to_send', defaultMessage: 'Message failed to send.' },
   retry: { id: 'chat.retry', defaultMessage: 'Retry?' },
-  blockedBy: { id: 'chat_message_list.blockedBy', defaultMessage: 'You are blocked by' },
   blocked: { id: 'chat_message_list.blocked', defaultMessage: 'You blocked this user' },
   unblock: { id: 'chat_composer.unblock', defaultMessage: 'Unblock' },
   unblockMessage: { id: 'chat_settings.unblock.message', defaultMessage: 'Unblocking will allow you to resume messaging with the user.' },
@@ -71,17 +70,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   }
 
   if (isBlocked) {
-    return (
-      <div className='mt-auto p-6 shadow-3xl dark:border-t-2 dark:border-solid dark:border-gray-800'>
-        <Text align='center' theme='muted'>
-          <>
-            <Text tag='span' theme='inherit'>{intl.formatMessage(messages.blockedBy)}</Text>
-            {' '}
-            <Text tag='span' theme='inherit'>@{chat?.account?.acct}</Text>
-          </>
-        </Text>
-      </div>
-    );
+    return null;
   }
 
   return (
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 63d57b6ed..46b506d03 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -35,6 +35,7 @@ const messages = defineMessages({
   copy: { id: 'chats.actions.copy', defaultMessage: 'Copy' },
   report: { id: 'chats.actions.report', defaultMessage: 'Report' },
   deleteForMe: { id: 'chats.actions.deleteForMe', defaultMessage: 'Delete for me' },
+  blockedBy: { id: 'chat_message_list.blockedBy', defaultMessage: 'You are blocked by' },
   networkFailureTitle: { id: 'chat_message_list.network_failure.title', defaultMessage: 'Whoops!' },
   networkFailureSubtitle: { id: 'chat_message_list.network_failure.subtitle', defaultMessage: 'We encountered a network failure.' },
   networkFailureAction: { id: 'chat_message_list.network_failure.action', defaultMessage: 'Try again' },
@@ -91,6 +92,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
   const formattedChatMessages = chatMessages || [];
 
   const me = useAppSelector((state) => state.me);
+  const isBlocked = useAppSelector((state) => state.getIn(['relationships', chat.account.id, 'blocked_by']));
 
   const handleDeleteMessage = useMutation((chatMessageId: string) => deleteChatMessage(chatMessageId), {
     onSettled: () => {
@@ -349,6 +351,23 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
     }
   }, [formattedChatMessages.length]);
 
+  if (isBlocked) {
+    return (
+      <Stack alignItems='center' justifyContent='center' className='h-full flex-grow'>
+        <Stack alignItems='center' space={2}>
+          <Avatar src={chat.account.avatar} size={75} />
+          <Text align='center'>
+            <>
+              <Text tag='span'>{intl.formatMessage(messages.blockedBy)}</Text>
+              {' '}
+              <Text tag='span' theme='primary'>@{chat.account.acct}</Text>
+            </>
+          </Text>
+        </Stack>
+      </Stack>
+    );
+  }
+
   if (isError) {
     return (
       <Stack alignItems='center' justifyContent='center' className='h-full flex-grow'>