feat: Prepare for connection status badge.

2 files changed, 51 insertions, 11 deletions

diff --git a/FrontEnd/src/app/services/timeline.ts b/FrontEnd/src/app/services/timeline.ts
index b19dcbe9..d8c0ae00 100644
--- a/FrontEnd/src/app/services/timeline.ts
+++ b/FrontEnd/src/app/services/timeline.ts
@@ -22,8 +22,13 @@ export const timelineVisibilityTooltipTranslationMap: Record<
 
 export function getTimelinePostUpdate$(
   timelineName: string
-): Observable<string> {
+): Observable<{ update: boolean; state: HubConnectionState }> {
   return new Observable((subscriber) => {
+    subscriber.next({
+      update: false,
+      state: HubConnectionState.Connecting,
+    });
+
     const token = getHttpToken();
     const connection = new HubConnectionBuilder()
       .withUrl("/api/hub/timeline", {
@@ -34,17 +39,38 @@ export function getTimelinePostUpdate$(
 
     const handler = (tn: string): void => {
       if (timelineName === tn) {
-        subscriber.next(tn);
+        subscriber.next({ update: true, state: connection.state });
       }
     };
 
+    connection.onclose(() => {
+      subscriber.next({
+        update: false,
+        state: HubConnectionState.Disconnected,
+      });
+    });
+
+    connection.onreconnecting(() => {
+      subscriber.next({
+        update: false,
+        state: HubConnectionState.Reconnecting,
+      });
+    });
+
+    connection.onreconnected(() => {
+      subscriber.next({
+        update: false,
+        state: HubConnectionState.Connected,
+      });
+    });
+
     connection.on("OnTimelinePostChanged", handler);
 
-    void connection
-      .start()
-      .then(() =>
-        connection.invoke("SubscribeTimelinePostChange", timelineName)
-      );
+    void connection.start().then(() => {
+      subscriber.next({ update: false, state: HubConnectionState.Connected });
+
+      return connection.invoke("SubscribeTimelinePostChange", timelineName);
+    });
 
     return () => {
       connection.off("OnTimelinePostChanged", handler);
diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
index 8bdf4d3b..65378563 100644
--- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx
+++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { HubConnectionState } from "@microsoft/signalr";
 
 import {
   HttpForbiddenError,
@@ -19,6 +20,7 @@ export interface TimelineProps {
   timelineName?: string;
   reloadKey: number;
   onReload: () => void;
+  onConnectionStateChanged?: (state: HubConnectionState) => void;
 }
 
 const Timeline: React.FC<TimelineProps> = (props) => {
@@ -35,17 +37,29 @@ const Timeline: React.FC<TimelineProps> = (props) => {
     setPosts([]);
   }, [timelineName]);
 
+  const onConnectionStateChanged =
+    React.useRef<((state: HubConnectionState) => void) | null>(null);
+
+  React.useEffect(() => {
+    onConnectionStateChanged.current = props.onConnectionStateChanged ?? null;
+  }, [props.onConnectionStateChanged]);
+
   React.useEffect(() => {
     if (timelineName != null && state === "loaded") {
       const timelinePostUpdate$ = getTimelinePostUpdate$(timelineName);
-      const subscription = timelinePostUpdate$.subscribe(() => {
-        onReload();
-      });
+      const subscription = timelinePostUpdate$.subscribe(
+        ({ update, state }) => {
+          if (update) {
+            onReload();
+          }
+          onConnectionStateChanged.current?.(state);
+        }
+      );
       return () => {
         subscription.unsubscribe();
       };
     }
-  }, [timelineName, state, onReload]);
+  }, [timelineName, state, onReload, onConnectionStateChanged]);
 
   React.useEffect(() => {
     if (timelineName != null) {