Update reconnection UI components

Author: MarkH817

src/app/types/modules/irc-framework/irc-framework.d.ts

@@ -5,7 +5,7 @@ declare module 'irc-framework' {
   import MiddlewareHandler from 'middleware-handler';
 
   export class Client extends EventEmitter {
-    constructor(options: ClientConstructorParameters);
+    constructor(options?: ClientConstructorParameters);
 
     static setDefaultTransport<Transport extends typeof BaseTransport>(transport: Transport): void;
 
@@ -33,7 +33,7 @@ declare module 'irc-framework' {
       ) => void,
     ): this;
 
-    connect(connect_options?: unknown): void;
+    connect(connect_options?: ClientConstructorParameters): void;
 
     /**
      * Proxy the command handler events onto the client object, with some added sugar
@@ -137,10 +137,16 @@ declare module 'irc-framework' {
     on(eventType: 'userlist', cb: (event: UserListEventArgs) => void): this;
 
     on(eventType: 'monitorList', cb: (event: MonitorListEventArgs) => void): this;
-    on(eventType: 'whowas', cb: (event: WhoIsEventArgs) => void): this;
+    on(eventType: 'whois', cb: (event: WhoIsEventArgs) => void): this;
     on(eventType: 'whowas', cb: (event: WhoWasEventArgs) => void): this;
 
     on(eventType: 'registered', cb: (event: RegisteredEventArgs) => void): this;
+    on(eventType: 'connected', cb: (event: RegisteredEventArgs) => void): this;
+    on(eventType: 'connecting', cb: () => void): this;
+    on(
+      eventType: 'reconnecting',
+      cb: (event: { attempt: number; max_retries: number; wait: number }) => void,
+    ): this;
 
     on(eventType: 'quit', cb: (event: QuitEventArgs) => void): this;
     on(eventType: 'part', cb: (event: QuitEventArgs) => void): this;
@@ -451,7 +457,7 @@ declare module 'irc-framework' {
     enable_echomessage?: boolean;
     message_max_length?: number;
     auto_reconnect?: boolean;
-    auto_reconnect_wait?: number;
+    auto_reconnect_max_wait?: number;
     auto_reconnect_max_retries?: number;
     ping_interval?: number;
     ping_timeout?: number;

src/components/connection/ConnectButton.vue

@@ -1,21 +1,22 @@
 <template>
-  <button
+  <BButton
+    class="w-100"
     type="button"
-    :class="{ active: tryingToConnect }"
-    class="connect-button btn btn-primary w-100 font-weight-bolder"
-    style="font-size:13px;"
-    @click="connect"
+    variant="primary"
+    @click="reconnect"
+    :loading="tryingToConnect"
+    loading-text="Connecting..."
+    >Reconnect</BButton
   >
-    Reconnect
-  </button>
 </template>
-<script lang="ts" setup>
-import { vxm } from '#store/vxm';
-import { computed } from 'vue';
+<script setup lang="ts">
+  import { useIrcStore } from '#stores';
+  import { BButton } from 'bootstrap-vue-next';
+  import { computed } from 'vue';
 
-const tryingToConnect = computed(() => vxm.chat.connectionData.tryingToConnect);
-
-function connect() {
-  vxm.chat.connect();
-}
+  const irc = useIrcStore();
+  const tryingToConnect = computed(() => irc.connectionStatus === 'connecting');
+  function reconnect() {
+    irc.reconnect();
+  }
 </script>

src/components/connection/ConnectingMessage.vue

@@ -1,40 +1,50 @@
 <template>
-  <li
-    v-if="!connectionData.connected && !connectionData.firstConnection && !disconnected"
-    id="chat-loading"
-    style="list-style-type: none"
-  >
-    <img
-      src="https://s3.amazonaws.com/eterna/icon_img/loading.gif"
-      class="loading-icon mr-auto ml-auto align-middle mb-1"
-      alt=""
+  <div v-if="isAttemptingConnection">
+    <BAlert v-if="irc.connectionStatus === 'connecting'" :model-value="true">
+      <img
+        src="https://s3.amazonaws.com/eterna/icon_img/loading.gif"
+        class="loading-icon mr-auto ml-auto align-middle mb-1"
+        alt=""
+      />
+      Connecting...
+    </BAlert>
+    <BAlert v-else-if="irc.reconnectionStatus.isReconnecting" :model-value="true" variant="warning">
+      <p>Connection failed. Retrying in {{ irc.reconnectionCountdown }} seconds...</p>
+      <BProgress
+        variant="warning"
+        :value="irc.reconnectionCountdown"
+        :max="irc.reconnectionStatus.retryDelay / 1_000"
+        height="4px"
+      ></BProgress>
+    </BAlert>
+    <BAlert
+      v-else-if="irc.connectionStatus === 'reconnect failed'"
+      :model-value="true"
+      variant="danger"
     >
-    <span
-      v-show="connectionData.tryingToConnect"
-      id="connecting"
-    >Connecting...</span>
-    <span
-      v-show="!connectionData.tryingToConnect"
-      id="failed"
-    >
-      Connection failed. retrying in
-      <span id="timer">{{ connectionData.currentTimer }}</span> seconds.
-    </span>
-  </li>
+      Failed to reconnect.
+    </BAlert>
+  </div>
 </template>
 
-<script lang="ts" setup>
-import { vxm } from '#store/vxm';
-import { computed } from 'vue';
+<script setup lang="ts">
+  import { useIrcStore } from '#stores';
+  import { BAlert, BProgress } from 'bootstrap-vue-next';
+  import { computed } from 'vue';
+
+  const irc = useIrcStore();
 
-const connectionData = computed(() => vxm.chat.connectionData);
-const disconnected = computed(() => vxm.chat.disconnected);
+  const isAttemptingConnection = computed(
+    () =>
+      irc.connectionStatus === 'connecting' ||
+      irc.connectionStatus === 'reconnect failed' ||
+      irc.reconnectionStatus.isReconnecting,
+  );
 </script>
 
-<style lang="scss">
-.loading-icon {
-  background-repeat: no-repeat;
-  width: 20px;
-  height: 20px;
-}
+<style scoped>
+  .loading-icon {
+    width: 20px;
+    height: 20px;
+  }
 </style>

src/components/connection/ConnectingPopup.vue

@@ -2,5 +2,6 @@ export type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 're
 export interface ReconnectionStatus {
   isReconnecting: boolean;
   retryCount: number;
+  retryDelay: number;
   maxRetryCount: number;
 }

src/models/connection-status.ts

@@ -37,13 +37,17 @@ const useIrcStore = defineStore('irc', () => {
   const currentNick = ref('');
   const isRegistered = ref(false);
   const connectionStatus = ref<ConnectionStatus>('disconnected');
-  const reconnectCountdown = useCountdown(0);
-  const reconnectStatus = reactive<ReconnectionStatus>({
+  const reconnectionCountdown = useCountdown(0);
+  const reconnectionStatus = reactive<ReconnectionStatus>({
     isReconnecting: false,
     retryCount: 0,
+    retryDelay: 0,
     maxRetryCount: 0,
   });
 
+  /**
+   * Creates new IRC client with a unique nick
+   */
   function initClient(username: string, uid: string) {
     if (client.value) {
       return;
@@ -62,6 +66,8 @@ const useIrcStore = defineStore('irc', () => {
       username: uid,
       gecos: username,
       transport: CustomConnection,
+      auto_reconnect_max_retries: 10,
+      auto_reconnect_max_wait: 300_000,
     })
       .on('nick in use', (event) => {
         // Remove used nick
@@ -80,18 +86,19 @@ const useIrcStore = defineStore('irc', () => {
       })
       .on('connected', () => {
         connectionStatus.value = 'connected';
-        reconnectStatus.isReconnecting = false;
-        reconnectCountdown.stop();
+        reconnectionStatus.isReconnecting = false;
+        reconnectionCountdown.stop();
       })
       .on('reconnecting', (event) => {
-        reconnectStatus.isReconnecting = true;
-        reconnectStatus.retryCount = event.attempt;
-        reconnectStatus.maxRetryCount = event.max_retries;
-        reconnectCountdown.start(event.wait / 1_000);
+        reconnectionStatus.isReconnecting = true;
+        reconnectionStatus.retryCount = event.attempt;
+        reconnectionStatus.retryDelay = event.wait;
+        reconnectionStatus.maxRetryCount = event.max_retries;
+        reconnectionCountdown.start(event.wait / 1_000);
       })
       .on('close', () => {
         connectionStatus.value = 'reconnect failed';
-        reconnectStatus.isReconnecting = false;
+        reconnectionStatus.isReconnecting = false;
       })
       .on('debug', (message) => {
         log.debug(message);
@@ -120,6 +127,22 @@ const useIrcStore = defineStore('irc', () => {
     initClient(login.username, login.uid);
   }
 
+  /**
+   * Manually reconnect IRC client on unexpected disconnect.
+   * Client must first be initialized by {@link autoSignIn} or {@link signIn}
+   */
+  function reconnect() {
+    if (
+      !isInitialized.value ||
+      !client.value ||
+      connectionStatus.value === 'connecting' ||
+      connectionStatus.value === 'connected'
+    ) {
+      return;
+    }
+    client.value.connect();
+  }
+
   function quit() {
     isRegistered.value = false;
     connectionStatus.value = 'disconnected';
@@ -140,12 +163,13 @@ const useIrcStore = defineStore('irc', () => {
       () => isRegistered.value && client.value !== null && connectionStatus.value === 'connected',
     ),
     connectionStatus: readonly(connectionStatus),
-    reconnectStatus: readonly(reconnectStatus),
-    reconnectCountdown: readonly(reconnectCountdown.remaining),
+    reconnectionStatus: readonly(reconnectionStatus),
+    reconnectionCountdown: readonly(reconnectionCountdown.remaining),
     currentUser: readonly(currentUser),
     quit,
-    autoSignIn,
     signIn,
+    autoSignIn,
+    reconnect,
     signOut,
   };
 });

src/stores/irc.ts

@@ -21,7 +21,7 @@ const useNotificationsStore = defineStore('notifications', () => {
 
     if (!isSupported) {
       notificationsEnabled.value = false;
-      toast.show({
+      toast.create({
         title: 'Notifications Unsupported',
         body: 'Your browser does not support notifications.',
         variant: 'warning',
@@ -40,7 +40,7 @@ const useNotificationsStore = defineStore('notifications', () => {
       notificationsEnabled.value = true;
     } else {
       notificationsEnabled.value = false;
-      toast.show({
+      toast.create({
         title: 'Permission Denied',
         body: 'Browser notifications are blocked.',
         variant: 'warning',