From a177f3f690f83af60d4ebfea963c9cca55a58a7d Mon Sep 17 00:00:00 2001
From: Sven Kirschbaum <sven@kirschbaum.me>
Date: Sun, 23 Jun 2024 08:33:55 +0200
Subject: [PATCH] feat: Add global option to toggle connection

Implements: #32
---
 example/src/App.jsx                         | 16 ++++++++++++++++
 example/src/index.css                       |  6 ++++++
 src/components/StompSessionProvider.tsx     |  8 +++++---
 src/interfaces/StompSessionProviderProps.ts |  1 +
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/example/src/App.jsx b/example/src/App.jsx
index 7f4305c..e7269b1 100644
--- a/example/src/App.jsx
+++ b/example/src/App.jsx
@@ -17,7 +17,9 @@ import {
   Button,
   Card,
   CardContent,
+  Checkbox,
   Container,
+  FormControlLabel,
   Grid,
   TextField,
   Typography,
@@ -25,6 +27,8 @@ import {
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 export function App() {
+  const [enabled, setEnabled] = useState(true);
+
   return (
     //Initialize Stomp connection, will use sockjs, as the protocol specified is https
     //The Connection can be used by all child components via the hooks or hocs.
@@ -34,8 +38,20 @@ export function App() {
       debug={(str) => {
         console.log(str);
       }}
+      //The enabled prop can be used to enable/disable the connection. Defaults to true
+      enabled={enabled}
     >
       <CssBaseline />
+      <FormControlLabel
+        className="enable-checkbox"
+        control={
+          <Checkbox
+            checked={enabled}
+            onChange={(event) => setEnabled(event.target.checked)}
+          />
+        }
+        label="Enabled"
+      />
       <Container>
         <Card style={{ margin: "3em" }}>
           <CardContent>
diff --git a/example/src/index.css b/example/src/index.css
index cee5f34..5443e47 100644
--- a/example/src/index.css
+++ b/example/src/index.css
@@ -12,3 +12,9 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+.enable-checkbox {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
diff --git a/src/components/StompSessionProvider.tsx b/src/components/StompSessionProvider.tsx
index f844a40..815a185 100644
--- a/src/components/StompSessionProvider.tsx
+++ b/src/components/StompSessionProvider.tsx
@@ -20,7 +20,7 @@ import { StompSessionSubscription } from "../interfaces/StompSessionSubscription
  * Please consult the @stomp/stompjs documentation for more information.
  */
 function StompSessionProvider(props: StompSessionProviderProps) {
-  const { url, children, ...stompOptions } = props;
+  const { url, children, enabled, ...stompOptions } = props;
 
   const [client, setClient] = useState<Client | undefined>(undefined);
   const subscriptionRequests = useRef(new Map());
@@ -68,12 +68,14 @@ function StompSessionProvider(props: StompSessionProviderProps) {
       };
     }
 
-    _client.activate();
+    if (enabled !== false) {
+      _client.activate();
+    }
 
     return () => {
       _client.deactivate();
     };
-  }, [url, ...Object.values(stompOptions)]);
+  }, [url, enabled, ...Object.values(stompOptions)]);
 
   const subscribe = (
     destination: string,
diff --git a/src/interfaces/StompSessionProviderProps.ts b/src/interfaces/StompSessionProviderProps.ts
index a1415a9..77ac94d 100644
--- a/src/interfaces/StompSessionProviderProps.ts
+++ b/src/interfaces/StompSessionProviderProps.ts
@@ -4,4 +4,5 @@ import { ReactNode } from "react";
 export interface StompSessionProviderProps extends StompConfig {
   url: string;
   children: ReactNode;
+  enabled?: boolean;
 }