Hide Group context in Compose button if not Group member

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 };

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(() => {

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,

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 />;
   }