add button to leave channel

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",