add button to leave channel

dist/index.js

@@ -362,9 +362,10 @@
     communication: "Communication",
     encryption: "Encryption",
     serverAddress: "Server Address",
-    serverAddressPlaceholder: "ws://192.168.0.69:3000",
+    serverAddressPlaceholder: "wss://192.168.0.69:3000",
     connectToServer: "Connect",
     primaryChannel: "Primary channel",
+    leaveChannel: "Leave",
     channelPlaceholder: "my-channel",
     addSecondaryChannel: "Add secondary channel",
     removeSecondaryChannel: "Remove secondary channel",
@@ -426,7 +427,11 @@
   var messageBody = restoreState("message", "");
   var cannotSetChannel = createProxyState(
     [primaryChannel, currentPrimaryChannel, isConnected],
-    () => primaryChannel.value == "" || primaryChannel.value == currentPrimaryChannel.value || isConnected.value == false
+    () => primaryChannel.value == "" || isConnected.value == false
+  );
+  var cannotLeaveChannel = createProxyState(
+    [currentPrimaryChannel, isConnected],
+    () => currentPrimaryChannel.value == "" || isConnected.value == false
   );
   var cannotAddSecondaryChannel = createProxyState(
     [newSecondaryChannelName],
@@ -475,6 +480,10 @@
     }
     UDN.subscribe(primaryChannel.value);
   }
+  function leaveChannel() {
+    if (cannotLeaveChannel.value == true) return;
+    UDN.unsubscribe(currentPrimaryChannel.value);
+  }
   function addSecondaryChannel() {
     if (cannotAddSecondaryChannel.value == true) return;
     const channelObject = new Channel(newSecondaryChannelName.value);
@@ -501,6 +510,8 @@
   function handleSubscriptionConfirmation(channel, isSubscribed) {
     if (isSubscribed == true) {
       currentPrimaryChannel.value = channel;
+    } else {
+      currentPrimaryChannel.value = "";
     }
   }
   async function handleMessage(body) {
@@ -615,6 +626,14 @@
         placeholder: translation.channelPlaceholder
       }
     ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "danger width-50",
+        "on:click": leaveChannel,
+        "toggle:disabled": cannotLeaveChannel
+      },
+      translation.leaveChannel
+    ), /* @__PURE__ */ createElement(
       "button",
       {
         class: "primary width-50",

src/Views/communicationSection.tsx

@@ -4,7 +4,9 @@ import {
   Channel,
   addSecondaryChannel,
   cannotAddSecondaryChannel,
+  cannotLeaveChannel,
   cannotSetChannel,
+  leaveChannel,
   newSecondaryChannelName,
   primaryChannel,
   removeSecondaryChannel,
@@ -69,6 +71,13 @@ export function CommunicationSection() {
         </div>
       </label>
       <div class="flex-row width-input justify-end">
+        <button
+          class="danger width-50"
+          on:click={leaveChannel}
+          toggle:disabled={cannotLeaveChannel}
+        >
+          {translation.leaveChannel}
+        </button>
         <button
           class="primary width-50"
           on:click={setChannel}

src/model.ts

@@ -63,18 +63,23 @@ export const isEncryptionUnavailable = window.crypto.subtle == undefined;
 // sending
 export const currentPrimaryChannel = new React.State("");
 export const primaryChannel = React.restoreState("primary-channel", "");
+
 export const newSecondaryChannelName = new React.State("");
 export const secondaryChannels =
   React.restoreListState<Channel>("secondary-channels");
+
 export const senderName = React.restoreState("sender-name", "");
+
 export const messageBody = React.restoreState("message", "");
 
 export const cannotSetChannel = React.createProxyState(
   [primaryChannel, currentPrimaryChannel, isConnected],
-  () =>
-    primaryChannel.value == "" ||
-    primaryChannel.value == currentPrimaryChannel.value ||
-    isConnected.value == false
+  () => primaryChannel.value == "" || isConnected.value == false
+);
+
+export const cannotLeaveChannel = React.createProxyState(
+  [currentPrimaryChannel, isConnected],
+  () => currentPrimaryChannel.value == "" || isConnected.value == false
 );
 
 export const cannotAddSecondaryChannel = React.createProxyState(
@@ -147,6 +152,12 @@ export function setChannel(): void {
   UDN.subscribe(primaryChannel.value);
 }
 
+export function leaveChannel(): void {
+  if (cannotLeaveChannel.value == true) return;
+
+  UDN.unsubscribe(currentPrimaryChannel.value);
+}
+
 export function addSecondaryChannel(): void {
   if (cannotAddSecondaryChannel.value == true) return;
 
@@ -184,6 +195,8 @@ function handleSubscriptionConfirmation(
 ): void {
   if (isSubscribed == true) {
     currentPrimaryChannel.value = channel;
+  } else {
+    currentPrimaryChannel.value = "";
   }
 }
 

src/translations.ts

@@ -18,6 +18,7 @@ const englishTranslations = {
   serverAddressPlaceholder: "wss://192.168.0.69:3000",
   connectToServer: "Connect",
   primaryChannel: "Primary channel",
+  leaveChannel: "Leave",
   channelPlaceholder: "my-channel",
   addSecondaryChannel: "Add secondary channel",
   removeSecondaryChannel: "Remove secondary channel",