From 09bcbe61395390a8bd96fba0fd6e6324e03ee75e Mon Sep 17 00:00:00 2001
From: warrickct <warrickct@gmail.com>
Date: Thu, 17 Feb 2022 18:35:58 +1100
Subject: [PATCH] Adding empty state for request list.

---
 _locales/en/messages.json                     |  1 +
 .../overlay/OverlayMessageRequest.tsx         | 37 +++++++++++++------
 ts/types/LocalizerKeys.ts                     |  1 +
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 2adcf2c33..e099f4687 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -472,5 +472,6 @@
   "respondingToRequestWarning": "Sending a message to this user will automatically accept their message request and reveal your Session ID.",
   "hideRequestBanner": "Hide Message Request Banner",
   "openMessageRequestInbox": "View Message Requests",
+  "noMessageRequestsPending": "No pending message requests",
   "openMessageRequestInboxDescription": "View your Message Request inbox"
 }
diff --git a/ts/components/leftpane/overlay/OverlayMessageRequest.tsx b/ts/components/leftpane/overlay/OverlayMessageRequest.tsx
index 11576ae68..b1a635d7c 100644
--- a/ts/components/leftpane/overlay/OverlayMessageRequest.tsx
+++ b/ts/components/leftpane/overlay/OverlayMessageRequest.tsx
@@ -57,26 +57,41 @@ export const OverlayMessageRequest = () => {
   function closeOverlay() {
     dispatch(setOverlayMode(undefined));
   }
+  const hasRequests = useSelector(getConversationRequests).length > 0;
 
   const buttonText = window.i18n('clearAll');
 
   return (
     <div className="module-left-pane-overlay">
-      <MessageRequestList />
-      <SpacerLG />
-
-      <SessionButton
-        buttonColor={SessionButtonColor.Danger}
-        buttonType={SessionButtonType.BrandOutline}
-        text={buttonText}
-        onClick={() => {
-          void handleBlockAllRequestsClick();
-        }}
-      />
+      {hasRequests ? (
+        <>
+          <MessageRequestList />
+          <SpacerLG />
+          <SessionButton
+            buttonColor={SessionButtonColor.Danger}
+            buttonType={SessionButtonType.BrandOutline}
+            text={buttonText}
+            onClick={() => {
+              void handleBlockAllRequestsClick();
+            }}
+          />
+        </>
+      ) : (
+        <>
+          <SpacerLG />
+          <MessageRequestListPlaceholder>
+            {window.i18n('noMessageRequestsPending')}
+          </MessageRequestListPlaceholder>
+        </>
+      )}
     </div>
   );
 };
 
+const MessageRequestListPlaceholder = styled.div`
+  color: var(--color-text);
+`;
+
 const MessageRequestListContainer = styled.div`
   width: 100%;
   overflow-y: auto;
diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts
index 5dac87a96..6c0f29db7 100644
--- a/ts/types/LocalizerKeys.ts
+++ b/ts/types/LocalizerKeys.ts
@@ -475,4 +475,5 @@ export type LocalizerKeys =
   | 'openMessageRequestInbox'
   | 'openMessageRequestInboxDescription'
   | 'hideRequestBanner'
+  | 'noMessageRequestsPending'
   | 'reportIssue';