Add useRemoteStream hook

app/soapbox/actions/streaming.ts

@@ -190,9 +190,6 @@ const connectTimelineStream = (
   };
 });
 
-const connectRemoteStream    = (instance: string, { onlyMedia }: Record<string, any> = {}) =>
-  connectTimelineStream(`remote${onlyMedia ? ':media' : ''}:${instance}`, `public:remote${onlyMedia ? ':media' : ''}&instance=${instance}`);
-
 const connectHashtagStream   = (id: string, tag: string, accept: (status: APIEntity) => boolean) =>
   connectTimelineStream(`hashtag:${id}`, `hashtag&tag=${tag}`, null, accept);
 
@@ -209,7 +206,6 @@ export {
   STREAMING_CHAT_UPDATE,
   STREAMING_FOLLOW_RELATIONSHIPS_UPDATE,
   connectTimelineStream,
-  connectRemoteStream,
   connectHashtagStream,
   connectDirectStream,
   connectListStream,

app/soapbox/api/hooks/index.ts

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

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

@@ -0,0 +1,15 @@
+import { useTimelineStream } from './useTimelineStream';
+
+interface UseRemoteStreamOpts {
+  instance: string
+  onlyMedia?: boolean
+}
+
+function useRemoteStream({ instance, onlyMedia }: UseRemoteStreamOpts) {
+  return useTimelineStream(
+    `remote${onlyMedia ? ':media' : ''}:${instance}`,
+    `public:remote${onlyMedia ? ':media' : ''}&instance=${instance}`,
+  );
+}
+
+export { useRemoteStream };

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

@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import { connectRemoteStream } from 'soapbox/actions/streaming';
 import { expandRemoteTimeline } from 'soapbox/actions/timelines';
+import { useRemoteStream } from 'soapbox/api/hooks';
 import IconButton from 'soapbox/components/icon-button';
 import { Column, HStack, Text } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
@@ -26,20 +26,12 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   const instance = params?.instance as string;
   const settings = useSettings();
 
-  const stream = useRef<any>(null);
-
   const timelineId = 'remote';
   const onlyMedia = !!settings.getIn(['remote', 'other', 'onlyMedia']);
   const next = useAppSelector(state => state.timelines.get('remote')?.next);
 
   const pinned: boolean = (settings.getIn(['remote_timeline', 'pinnedHosts']) as any).includes(instance);
 
-  const disconnect = () => {
-    if (stream.current) {
-      stream.current();
-    }
-  };
-
   const handleCloseClick: React.MouseEventHandler = () => {
     history.push('/timeline/fediverse');
   };
@@ -48,15 +40,10 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
     dispatch(expandRemoteTimeline(instance, { url: next, maxId, onlyMedia }));
   };
 
-  useEffect(() => {
+  useRemoteStream({ instance, onlyMedia });
-    disconnect();
-    dispatch(expandRemoteTimeline(instance, { onlyMedia, maxId: undefined }));
-    stream.current = dispatch(connectRemoteStream(instance, { onlyMedia }));
 
-    return () => {
+  useEffect(() => {
-      disconnect();
+    dispatch(expandRemoteTimeline(instance, { onlyMedia, maxId: undefined }));
-      stream.current = null;
-    };
   }, [onlyMedia]);
 
   return (