Add useCommunityStream hook, refresh socket when timelineId or path changes

app/soapbox/actions/streaming.ts

@@ -190,9 +190,6 @@ const connectTimelineStream = (
   };
 });
 
-const connectCommunityStream = ({ onlyMedia }: Record<string, any> = {}) =>
-  connectTimelineStream(`community${onlyMedia ? ':media' : ''}`, `public:local${onlyMedia ? ':media' : ''}`);
-
 const connectPublicStream    = ({ onlyMedia }: Record<string, any> = {}) =>
   connectTimelineStream(`public${onlyMedia ? ':media' : ''}`, `public${onlyMedia ? ':media' : ''}`);
 
@@ -215,7 +212,6 @@ export {
   STREAMING_CHAT_UPDATE,
   STREAMING_FOLLOW_RELATIONSHIPS_UPDATE,
   connectTimelineStream,
-  connectCommunityStream,
   connectPublicStream,
   connectRemoteStream,
   connectHashtagStream,

app/soapbox/api/hooks/index.ts

@@ -46,4 +46,5 @@ export { useUpdateGroupTag } from './groups/useUpdateGroupTag';
 
 // Streaming
 export { useUserStream } from './streaming/useUserStream';
+export { useCommunityStream } from './streaming/useCommunityStream';
 export { useNostrStream } from './streaming/useNostrStream';

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

@@ -0,0 +1,14 @@
+import { useTimelineStream } from './useTimelineStream';
+
+interface UseCommunityStreamOpts {
+  onlyMedia?: boolean
+}
+
+function useCommunityStream({ onlyMedia }: UseCommunityStreamOpts = {}) {
+  return useTimelineStream(
+    `community${onlyMedia ? ':media' : ''}`,
+    `public:local${onlyMedia ? ':media' : ''}`,
+  );
+}
+
+export { useCommunityStream };

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

@@ -6,6 +6,7 @@ import { getAccessToken } from 'soapbox/utils/auth';
 
 function useTimelineStream(...args: Parameters<typeof connectTimelineStream>) {
   // TODO: get rid of streaming.ts and move the actual opts here.
+  const [timelineId, path] = args;
   const { enabled = true } = args[4] ?? {};
 
   const dispatch = useAppDispatch();
@@ -31,7 +32,7 @@ function useTimelineStream(...args: Parameters<typeof connectTimelineStream>) {
   useEffect(() => {
     connect();
     return disconnect;
-  }, [accessToken, streamingUrl, enabled]);
+  }, [accessToken, streamingUrl, timelineId, path, enabled]);
 
   return {
     disconnect,

app/soapbox/features/community-timeline/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { connectCommunityStream } from 'soapbox/actions/streaming';
 import { expandCommunityTimeline } from 'soapbox/actions/timelines';
+import { useCommunityStream } from 'soapbox/api/hooks';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Column } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
@@ -18,7 +18,7 @@ const CommunityTimeline = () => {
   const dispatch = useAppDispatch();
 
   const settings = useSettings();
-  const onlyMedia = settings.getIn(['community', 'other', 'onlyMedia']);
+  const onlyMedia = !!settings.getIn(['community', 'other', 'onlyMedia'], false);
   const next = useAppSelector(state => state.timelines.get('community')?.next);
 
   const timelineId = 'community';
@@ -28,16 +28,13 @@ const CommunityTimeline = () => {
   };
 
   const handleRefresh = () => {
-    return dispatch(expandCommunityTimeline({ onlyMedia } as any));
+    return dispatch(expandCommunityTimeline({ onlyMedia }));
   };
 
-  useEffect(() => {
-    dispatch(expandCommunityTimeline({ onlyMedia } as any));
-    const disconnect = dispatch(connectCommunityStream({ onlyMedia } as any));
+  useCommunityStream({ onlyMedia });
 
-    return () => {
-      disconnect();
-    };
+  useEffect(() => {
+    dispatch(expandCommunityTimeline({ onlyMedia }));
   }, [onlyMedia]);
 
   return (