Add usePublicStream hook

app/soapbox/actions/streaming.ts

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

app/soapbox/api/hooks/index.ts

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

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

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

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

@@ -3,8 +3,8 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { changeSetting } from 'soapbox/actions/settings';
-import { connectPublicStream } from 'soapbox/actions/streaming';
 import { expandPublicTimeline } from 'soapbox/actions/timelines';
+import { usePublicStream } from 'soapbox/api/hooks';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Accordion, Column } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useInstance, useSettings } from 'soapbox/hooks';
@@ -23,7 +23,7 @@ const CommunityTimeline = () => {
 
   const instance = useInstance();
   const settings = useSettings();
-  const onlyMedia = settings.getIn(['public', 'other', 'onlyMedia']);
+  const onlyMedia = !!settings.getIn(['public', 'other', 'onlyMedia'], false);
   const next = useAppSelector(state => state.timelines.get('public')?.next);
 
   const timelineId = 'public';
@@ -44,16 +44,13 @@ const CommunityTimeline = () => {
   };
 
   const handleRefresh = () => {
-    return dispatch(expandPublicTimeline({ onlyMedia } as any));
+    return dispatch(expandPublicTimeline({ onlyMedia }));
   };
 
-  useEffect(() => {
+  usePublicStream({ onlyMedia });
-    dispatch(expandPublicTimeline({ onlyMedia } as any));
-    const disconnect = dispatch(connectPublicStream({ onlyMedia }));
 
-    return () => {
+  useEffect(() => {
-      disconnect();
+    dispatch(expandPublicTimeline({ onlyMedia }));
-    };
   }, [onlyMedia]);
 
   return (