Hide "leave group" button if you've already left

Co-authored-by: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
signalapp · Sep 1, 2021 · aa52129 · aa52129
1 parent 22d3327
commit aa52129
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 34 deletions.
diff --git a/ts/components/conversation/conversation-details/ConversationDetails.tsx b/ts/components/conversation/conversation-details/ConversationDetails.tsx
@@ -388,6 +388,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
         i18n={i18n}
         cannotLeaveBecauseYouAreLastAdmin={cannotLeaveBecauseYouAreLastAdmin}
         conversationTitle={conversation.title}
+        left={Boolean(conversation.left)}
         onLeave={onLeave}
         onBlock={onBlock}
       />

diff --git a/ts/components/conversation/conversation-details/ConversationDetailsActions.stories.tsx b/ts/components/conversation/conversation-details/ConversationDetailsActions.stories.tsx
@@ -28,6 +28,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
     ? overrideProps.cannotLeaveBecauseYouAreLastAdmin
     : false,
   conversationTitle: overrideProps.conversationTitle || '',
+  left: isBoolean(overrideProps.left) ? overrideProps.left : false,
   onBlock: action('onBlock'),
   onLeave: action('onLeave'),
   i18n,
@@ -39,6 +40,12 @@ story.add('Basic', () => {
   return <ConversationDetailsActions {...props} />;
 });
 
+story.add('Left the group', () => {
+  const props = createProps({ left: true });
+
+  return <ConversationDetailsActions {...props} />;
+});
+
 story.add('Cannot leave because you are the last admin', () => {
   const props = createProps({ cannotLeaveBecauseYouAreLastAdmin: true });
 

diff --git a/ts/components/conversation/conversation-details/ConversationDetailsActions.tsx b/ts/components/conversation/conversation-details/ConversationDetailsActions.tsx
@@ -1,7 +1,7 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { LocalizerType } from '../../../types/Util';
@@ -15,6 +15,7 @@ import { ConversationDetailsIcon } from './ConversationDetailsIcon';
 export type Props = {
   cannotLeaveBecauseYouAreLastAdmin: boolean;
   conversationTitle: string;
+  left: boolean;
   onBlock: () => void;
   onLeave: () => void;
   i18n: LocalizerType;
@@ -23,48 +24,52 @@ export type Props = {
 export const ConversationDetailsActions: React.ComponentType<Props> = ({
   cannotLeaveBecauseYouAreLastAdmin,
   conversationTitle,
+  left,
   onBlock,
   onLeave,
   i18n,
 }) => {
   const [confirmingLeave, setConfirmingLeave] = React.useState<boolean>(false);
   const [confirmingBlock, setConfirmingBlock] = React.useState<boolean>(false);
 
-  let leaveGroupNode = (
-    <PanelRow
-      disabled={cannotLeaveBecauseYouAreLastAdmin}
-      onClick={() => setConfirmingLeave(true)}
-      icon={
-        <ConversationDetailsIcon
-          ariaLabel={i18n('ConversationDetailsActions--leave-group')}
-          disabled={cannotLeaveBecauseYouAreLastAdmin}
-          icon="leave"
-        />
-      }
-      label={
-        <div
-          className={classNames(
-            'module-conversation-details__leave-group',
-            cannotLeaveBecauseYouAreLastAdmin &&
-              'module-conversation-details__leave-group--disabled'
-          )}
-        >
-          {i18n('ConversationDetailsActions--leave-group')}
-        </div>
-      }
-    />
-  );
-  if (cannotLeaveBecauseYouAreLastAdmin) {
+  let leaveGroupNode: ReactNode;
+  if (!left) {
     leaveGroupNode = (
-      <Tooltip
-        content={i18n(
-          'ConversationDetailsActions--leave-group-must-choose-new-admin'
-        )}
-        direction={TooltipPlacement.Top}
-      >
-        {leaveGroupNode}
-      </Tooltip>
+      <PanelRow
+        disabled={cannotLeaveBecauseYouAreLastAdmin}
+        onClick={() => setConfirmingLeave(true)}
+        icon={
+          <ConversationDetailsIcon
+            ariaLabel={i18n('ConversationDetailsActions--leave-group')}
+            disabled={cannotLeaveBecauseYouAreLastAdmin}
+            icon="leave"
+          />
+        }
+        label={
+          <div
+            className={classNames(
+              'module-conversation-details__leave-group',
+              cannotLeaveBecauseYouAreLastAdmin &&
+                'module-conversation-details__leave-group--disabled'
+            )}
+          >
+            {i18n('ConversationDetailsActions--leave-group')}
+          </div>
+        }
+      />
     );
+    if (cannotLeaveBecauseYouAreLastAdmin) {
+      leaveGroupNode = (
+        <Tooltip
+          content={i18n(
+            'ConversationDetailsActions--leave-group-must-choose-new-admin'
+          )}
+          direction={TooltipPlacement.Top}
+        >
+          {leaveGroupNode}
+        </Tooltip>
+      );
+    }
   }
 
   return (