From 90f7c712560f4bd65adc22d4f2110ee68bca4f1e Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Thu, 11 May 2023 14:41:31 -0400
Subject: [PATCH] Hide Group context in Compose button if not Group member

---
 app/soapbox/api/hooks/groups/useGroupLookup.ts        | 11 ++++++++++-
 app/soapbox/api/hooks/groups/useGroupRelationship.ts  |  9 ++++++---
 app/soapbox/entity-store/hooks/useEntity.ts           |  6 +++++-
 app/soapbox/features/ui/components/compose-button.tsx |  6 +++++-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/api/hooks/groups/useGroupLookup.ts b/app/soapbox/api/hooks/groups/useGroupLookup.ts
index 89c778a15..6e41975e5 100644
--- a/app/soapbox/api/hooks/groups/useGroupLookup.ts
+++ b/app/soapbox/api/hooks/groups/useGroupLookup.ts
@@ -3,15 +3,24 @@ import { useEntityLookup } from 'soapbox/entity-store/hooks';
 import { useApi } from 'soapbox/hooks/useApi';
 import { groupSchema } from 'soapbox/schemas';
 
+import { useGroupRelationship } from './useGroupRelationship';
+
 function useGroupLookup(slug: string) {
   const api = useApi();
 
-  return useEntityLookup(
+  const { entity: group, ...result } = useEntityLookup(
     Entities.GROUPS,
     (group) => group.slug === slug,
     () => api.get(`/api/v1/groups/lookup?name=${slug}`),
     { schema: groupSchema },
   );
+
+  const { entity: relationship } = useGroupRelationship(group?.id);
+
+  return {
+    ...result,
+    entity: group ? { ...group, relationship: relationship || null } : undefined,
+  };
 }
 
 export { useGroupLookup };
\ No newline at end of file
diff --git a/app/soapbox/api/hooks/groups/useGroupRelationship.ts b/app/soapbox/api/hooks/groups/useGroupRelationship.ts
index 6b24c463c..21d8d3efd 100644
--- a/app/soapbox/api/hooks/groups/useGroupRelationship.ts
+++ b/app/soapbox/api/hooks/groups/useGroupRelationship.ts
@@ -7,14 +7,17 @@ import { useEntity } from 'soapbox/entity-store/hooks';
 import { useApi, useAppDispatch } from 'soapbox/hooks';
 import { type GroupRelationship, groupRelationshipSchema } from 'soapbox/schemas';
 
-function useGroupRelationship(groupId: string) {
+function useGroupRelationship(groupId: string | undefined) {
   const api = useApi();
   const dispatch = useAppDispatch();
 
   const { entity: groupRelationship, ...result } = useEntity<GroupRelationship>(
-    [Entities.GROUP_RELATIONSHIPS, groupId],
+    [Entities.GROUP_RELATIONSHIPS, groupId as string],
     () => api.get(`/api/v1/groups/relationships?id[]=${groupId}`),
-    { schema: z.array(groupRelationshipSchema).transform(arr => arr[0]) },
+    {
+      enabled: !!groupId,
+      schema: z.array(groupRelationshipSchema).transform(arr => arr[0]),
+    },
   );
 
   useEffect(() => {
diff --git a/app/soapbox/entity-store/hooks/useEntity.ts b/app/soapbox/entity-store/hooks/useEntity.ts
index 63447ae67..3d57c8ab0 100644
--- a/app/soapbox/entity-store/hooks/useEntity.ts
+++ b/app/soapbox/entity-store/hooks/useEntity.ts
@@ -14,6 +14,8 @@ interface UseEntityOpts<TEntity extends Entity> {
   schema?: EntitySchema<TEntity>
   /** Whether to refetch this entity every time the hook mounts, even if it's already in the store. */
   refetch?: boolean
+  /** A flag to potentially disable sending requests to the API. */
+  enabled?: boolean
 }
 
 function useEntity<TEntity extends Entity>(
@@ -31,6 +33,7 @@ function useEntity<TEntity extends Entity>(
 
   const entity = useAppSelector(state => state.entities[entityType]?.store[entityId] as TEntity | undefined);
 
+  const isEnabled = opts.enabled ?? true;
   const isLoading = isFetching && !entity;
 
   const fetchEntity = async () => {
@@ -44,10 +47,11 @@ function useEntity<TEntity extends Entity>(
   };
 
   useEffect(() => {
+    if (!isEnabled) return;
     if (!entity || opts.refetch) {
       fetchEntity();
     }
-  }, []);
+  }, [isEnabled]);
 
   return {
     entity,
diff --git a/app/soapbox/features/ui/components/compose-button.tsx b/app/soapbox/features/ui/components/compose-button.tsx
index a21909bb1..7686f9c55 100644
--- a/app/soapbox/features/ui/components/compose-button.tsx
+++ b/app/soapbox/features/ui/components/compose-button.tsx
@@ -10,8 +10,12 @@ import { useAppDispatch } from 'soapbox/hooks';
 
 const ComposeButton = () => {
   const location = useLocation();
+  const isOnGroupPage = location.pathname.startsWith('/group/');
+  const match = useRouteMatch<{ groupSlug: string }>('/group/:groupSlug');
+  const { entity: group } = useGroupLookup(match?.params.groupSlug || '');
+  const isGroupMember = !!group?.relationship?.member;
 
-  if (location.pathname.startsWith('/group/')) {
+  if (isOnGroupPage && isGroupMember) {
     return <GroupComposeButton />;
   }