feat: add option to toggle event stream functionality

Author: OliverDudgeon

src/components/EventStream.tsx

@@ -6,21 +6,20 @@ import {
   useGetEventStream,
 } from "@squonk/account-server-client/event-stream";
 
+import { useAtom } from "jotai";
 import { useSnackbar } from "notistack";
 
 import { useASAuthorizationStatus } from "../hooks/useIsAuthorized";
 import { getMessageFromEvent, protoBlobToText } from "../protobuf/protobuf";
+import { eventStreamEnabledAtom } from "../state/eventStream";
 import { EventMessage } from "./eventMessages/EventMessage";
 
 export const EventStream = () => {
   const [location, setLocation] = useState<string | null>(null);
   const { enqueueSnackbar } = useSnackbar();
   const asRole = useASAuthorizationStatus();
   const { data, error: streamError } = useGetEventStream({
-    query: {
-      select: (data) => data.location,
-      enabled: !!asRole,
-    },
+    query: { select: (data) => data.location, enabled: !!asRole },
   });
   const { mutate: createEventStream } = useCreateEventStream({
     mutation: {
@@ -29,6 +28,7 @@ export const EventStream = () => {
       },
     },
   });
+  const [eventStreamEnabled] = useAtom(eventStreamEnabledAtom);
 
   // Define callbacks *before* useWebSocket hook
   const handleWebSocketOpen = useCallback(() => {
@@ -40,15 +40,14 @@ export const EventStream = () => {
 
   const handleWebSocketClose = useCallback(
     (event: CloseEvent) => {
+      console.log(event);
       if (event.wasClean) {
         enqueueSnackbar("Disconnected from event stream", {
           variant: "info",
           anchorOrigin: { horizontal: "right", vertical: "bottom" },
         });
       } else {
-        console.warn(
-          "EventStream: WebSocket closed unexpectedly. Reconnection attempts are handled by react-use-websocket.",
-        );
+        console.warn("EventStream: WebSocket closed unexpectedly.");
         enqueueSnackbar("Event stream disconnected unexpectedly. Attempting to reconnect...", {
           variant: "warning",
           anchorOrigin: { horizontal: "right", vertical: "bottom" },
@@ -98,7 +97,9 @@ export const EventStream = () => {
     [enqueueSnackbar],
   );
 
-  useWebSocket(asRole ? location : null, {
+  const wsUrl = eventStreamEnabled && asRole ? (location?.replace("ws", "wss") ?? null) : null;
+
+  useWebSocket(wsUrl, {
     onOpen: handleWebSocketOpen,
     onClose: handleWebSocketClose,
     onError: handleWebSocketError,

src/layouts/navigation/UserMenuContent.tsx

@@ -1,19 +1,31 @@
 import { Person as PersonIcon } from "@mui/icons-material";
-import { Alert, Box, Chip, Typography, useMediaQuery, useTheme } from "@mui/material";
+import {
+  Alert,
+  Box,
+  Chip,
+  FormControlLabel,
+  Switch,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import { useAtom } from "jotai";
 
 import { AuthButton } from "../../components/auth/AuthButton";
 import { CenterLoader } from "../../components/CenterLoader";
 import { Chips } from "../../components/Chips";
 import { ColourSchemeSelection } from "../../components/ColourSchemeSelection";
 import { useASAuthorizationStatus, useDMAuthorizationStatus } from "../../hooks/useIsAuthorized";
 import { useKeycloakUser } from "../../hooks/useKeycloakUser";
+import { eventStreamEnabledAtom } from "../../state/eventStream";
 
 /**
  * Content of the user menu
  */
 export const UserMenuContent = () => {
   const theme = useTheme();
   const biggerThanMd = useMediaQuery(theme.breakpoints.up("md"));
+  const [eventStreamEnabled, setEventStreamEnabled] = useAtom(eventStreamEnabledAtom);
 
   return (
     <Box sx={{ textAlign: biggerThanMd ? "center" : undefined }}>
@@ -22,6 +34,17 @@ export const UserMenuContent = () => {
       </Typography>
       <UserMenuContentInner />
       <ColourSchemeSelection />
+      <FormControlLabel
+        control={
+          <Switch
+            checked={eventStreamEnabled}
+            color="primary"
+            onChange={(_, checked) => setEventStreamEnabled(checked)}
+          />
+        }
+        label="Event stream (alpha)"
+        sx={{ mb: 2 }}
+      />
     </Box>
   );
 };

src/state/eventStream.ts

@@ -0,0 +1,6 @@
+import { atom } from "jotai";
+
+/**
+ * Atom to toggle the event stream functionality on or off.
+ */
+export const eventStreamEnabledAtom = atom(false);