Add useGroupStream hook

app/soapbox/actions/streaming.ts

@@ -193,14 +193,10 @@ const connectTimelineStream = (
 const connectHashtagStream   = (id: string, tag: string, accept: (status: APIEntity) => boolean) =>
   connectTimelineStream(`hashtag:${id}`, `hashtag&tag=${tag}`, null, accept);
 
-const connectGroupStream     = (id: string) =>
-  connectTimelineStream(`group:${id}`, `group&group=${id}`);
-
 export {
   STREAMING_CHAT_UPDATE,
   STREAMING_FOLLOW_RELATIONSHIPS_UPDATE,
   connectTimelineStream,
   connectHashtagStream,
-  connectGroupStream,
   type TimelineStreamOpts,
 };

app/soapbox/api/hooks/index.ts

@@ -50,5 +50,6 @@ export { useCommunityStream } from './streaming/useCommunityStream';
 export { usePublicStream } from './streaming/usePublicStream';
 export { useDirectStream } from './streaming/useDirectStream';
 export { useListStream } from './streaming/useListStream';
+export { useGroupStream } from './streaming/useGroupStream';
 export { useRemoteStream } from './streaming/useRemoteStream';
 export { useNostrStream } from './streaming/useNostrStream';

app/soapbox/api/hooks/streaming/useGroupStream.ts

@@ -0,0 +1,10 @@
+import { useTimelineStream } from './useTimelineStream';
+
+function useGroupStream(groupId: string) {
+  return useTimelineStream(
+    `group:${groupId}`,
+    `group&group=${groupId}`,
+  );
+}
+
+export { useGroupStream };

app/soapbox/features/group/group-timeline.tsx

@@ -4,9 +4,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { groupCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose';
-import { connectGroupStream } from 'soapbox/actions/streaming';
 import { expandGroupFeaturedTimeline, expandGroupTimeline } from 'soapbox/actions/timelines';
-import { useGroup } from 'soapbox/api/hooks';
+import { useGroup, useGroupStream } from 'soapbox/api/hooks';
 import { Avatar, HStack, Icon, Stack, Text, Toggle } from 'soapbox/components/ui';
 import ComposeForm from 'soapbox/features/compose/components/compose-form';
 import { useAppDispatch, useAppSelector, useDraggedFiles, useOwnAccount } from 'soapbox/hooks';
@@ -49,16 +48,12 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
     dispatch(setGroupTimelineVisible(composeId, !groupTimelineVisible));
   };
 
+  useGroupStream(groupId);
+
   useEffect(() => {
     dispatch(expandGroupTimeline(groupId));
     dispatch(expandGroupFeaturedTimeline(groupId));
     dispatch(groupCompose(composeId, groupId));
-
-    const disconnect = dispatch(connectGroupStream(groupId));
-
-    return () => {
-      disconnect();
-    };
   }, [groupId]);
 
   if (!group) {