feat: add heartbeats to line view

src/api/api.ts

@@ -57,6 +57,10 @@ type TDeleteAudioSessionOptions = {
   sessionId: string;
 };
 
+type THeartbeatOptions = {
+  sessionId: string;
+};
+
 export const API = {
   createProduction: async ({ name, lines }: TCreateProductionOptions) =>
     handleFetchRequest<TBasicProductionResponse>(
@@ -131,7 +135,7 @@ export const API = {
         { method: "DELETE" }
       )
     ),
-  heartbeat: ({ sessionId }: TDeleteAudioSessionOptions): Promise<string> =>
+  heartbeat: ({ sessionId }: THeartbeatOptions): Promise<string> =>
     handleFetchRequest<string>(
       fetch(`${API_URL}heartbeat/${sessionId}`, { method: "GET" })
     ),

src/components/production-line/production-line.tsx

@@ -14,6 +14,7 @@ import { Spinner } from "../loader/loader.tsx";
 import { TLine, TProduction } from "./types.ts";
 import { DisplayContainerHeader } from "../landing-page/display-container-header.tsx";
 import { DisplayContainer, FlexContainer } from "../generic-components.ts";
+import { useHeartbeat } from "./use-heartbeat.ts";
 
 const TempDiv = styled.div`
   padding: 1rem 0;
@@ -106,6 +107,8 @@ export const ProductionLine: FC = () => {
     // TODO add handling for `connectionState === "failed"`
   }, [connectionState]);
 
+  useHeartbeat({ sessionId });
+
   // TODO if (!input !output !username) return <JoinProductionForm />
 
   const exit = () => {

src/components/production-line/use-heartbeat.ts

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { API } from "../../api/api.ts";
+import { noop } from "../../helpers.ts";
+
+type TProps = { sessionId: string | null };
+
+export const useHeartbeat = ({ sessionId }: TProps) => {
+  useEffect(() => {
+    if (!sessionId) return noop;
+
+    const interval = window.setInterval(() => {
+      API.heartbeat({ sessionId }).catch(console.error);
+    }, 10_000);
+
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [sessionId]);
+};