From 3cef200a44c9cadeff6a4573f0b49edb25932789 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 22 Jul 2023 13:05:41 -0500
Subject: [PATCH] Add useCommunityStream hook, refresh socket when timelineId
 or path changes

---
 app/soapbox/actions/streaming.ts                  |  4 ----
 app/soapbox/api/hooks/index.ts                    |  1 +
 .../api/hooks/streaming/useCommunityStream.ts     | 14 ++++++++++++++
 .../api/hooks/streaming/useTimelineStream.ts      |  3 ++-
 app/soapbox/features/community-timeline/index.tsx | 15 ++++++---------
 5 files changed, 23 insertions(+), 14 deletions(-)
 create mode 100644 app/soapbox/api/hooks/streaming/useCommunityStream.ts

diff --git a/app/soapbox/actions/streaming.ts b/app/soapbox/actions/streaming.ts
index 1e5e65060..90b73569e 100644
--- a/app/soapbox/actions/streaming.ts
+++ b/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,
diff --git a/app/soapbox/api/hooks/index.ts b/app/soapbox/api/hooks/index.ts
index 47a9101a6..6cd1802ba 100644
--- a/app/soapbox/api/hooks/index.ts
+++ b/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';
\ No newline at end of file
diff --git a/app/soapbox/api/hooks/streaming/useCommunityStream.ts b/app/soapbox/api/hooks/streaming/useCommunityStream.ts
new file mode 100644
index 000000000..f0ccca5d6
--- /dev/null
+++ b/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 };
\ No newline at end of file
diff --git a/app/soapbox/api/hooks/streaming/useTimelineStream.ts b/app/soapbox/api/hooks/streaming/useTimelineStream.ts
index 0e7a2a267..a0dfb2ded 100644
--- a/app/soapbox/api/hooks/streaming/useTimelineStream.ts
+++ b/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,
diff --git a/app/soapbox/features/community-timeline/index.tsx b/app/soapbox/features/community-timeline/index.tsx
index 387297a80..37f4e8dd2 100644
--- a/app/soapbox/features/community-timeline/index.tsx
+++ b/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 (