From 7548c264904967ac584c10b22a5cc98ed195ea11 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Wed, 26 Apr 2023 10:11:54 -0400
Subject: [PATCH] Hide 'View group' button if already on Group

---
 .../groups/popover/group-popover.tsx          | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/soapbox/components/groups/popover/group-popover.tsx b/app/soapbox/components/groups/popover/group-popover.tsx
index ba2457fb3..245420af6 100644
--- a/app/soapbox/components/groups/popover/group-popover.tsx
+++ b/app/soapbox/components/groups/popover/group-popover.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
+import { Link, matchPath, useHistory } from 'react-router-dom';
 
 import { Button, Divider, HStack, Popover, Stack, Text } from 'soapbox/components/ui';
 import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
@@ -26,6 +26,13 @@ const GroupPopover = (props: IGroupPopoverContainer) => {
   const { children, group, isEnabled } = props;
 
   const intl = useIntl();
+  const history = useHistory();
+
+  const path = history.location.pathname;
+  const shouldHideAction = matchPath(path, {
+    path: ['/group/:groupSlug'],
+    exact: true,
+  });
 
   if (!isEnabled) {
     return children;
@@ -36,7 +43,7 @@ const GroupPopover = (props: IGroupPopoverContainer) => {
       interaction='click'
       referenceElementClassName='cursor-pointer'
       content={
-        <Stack space={4} className='w-80'>
+        <Stack space={4} className='w-80 pb-4'>
           <Stack
             className='relative h-60 rounded-lg bg-white dark:border-primary-800 dark:bg-primary-900'
             data-testid='group-card'
@@ -79,13 +86,15 @@ const GroupPopover = (props: IGroupPopoverContainer) => {
             </Text>
           </Stack>
 
-          <div className='px-4 pb-4'>
-            <Link to={`/group/${group.slug}`}>
-              <Button type='button' theme='secondary' block>
-                {intl.formatMessage(messages.action)}
-              </Button>
-            </Link>
-          </div>
+          {!shouldHideAction && (
+            <div className='px-4'>
+              <Link to={`/group/${group.slug}`}>
+                <Button type='button' theme='secondary' block>
+                  {intl.formatMessage(messages.action)}
+                </Button>
+              </Link>
+            </div>
+          )}
         </Stack>
       }
       isFlush