Use IRC client's reconnect feature and emitted events

- Switch User model nicks from `string[]` to `Set<string>`
- Share connection status and reconnection info from IRC client

Author: MarkH817

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <BApp>
-    <h1>You are {{ irc.isConnected ? 'connected' : 'not connected' }}</h1>
+    <h1>Connection status: {{ irc.connectionStatus }}</h1>
 
     <ChatApp v-if="irc.isConnected" />
     <LoginForm v-else @login="irc.signIn" />

src/models/connection-status.ts

@@ -0,0 +1,6 @@
+export type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'reconnect failed';
+export interface ReconnectionStatus {
+  isReconnecting: boolean;
+  retryCount: number;
+  maxRetryCount: number;
+}

src/models/index.ts

@@ -1,5 +1,6 @@
 export * from './ban';
 export * from './ban-status';
 export * from './channel';
+export * from './connection-status';
 export * from './message';
 export * from './user';

src/models/user.ts

@@ -2,7 +2,8 @@ export interface User {
   username: string;
   /** User ID */
   uid: string;
-  nicks: string[];
+  /** Tracks multiple opened clients for the same user */
+  nicks: Set<string>;
   away: boolean;
   awayReason: string;
 }

src/stores/irc.ts

@@ -1,11 +1,11 @@
-import type { User } from '#models';
+import type { ConnectionStatus, ReconnectionStatus, User } from '#models';
 import { createNick } from '#utils';
-import { useLocalStorage } from '@vueuse/core';
+import { useCountdown, useLocalStorage } from '@vueuse/core';
 import { Client } from 'irc-framework';
 import Connection from 'irc-framework/src/transports/websocket';
 import log from 'loglevel';
 import { defineStore } from 'pinia';
-import { computed, markRaw, ref, shallowRef } from 'vue';
+import { computed, markRaw, reactive, readonly, ref, shallowRef } from 'vue';
 
 export interface InitClientConfig {
   username: string;
@@ -22,15 +22,22 @@ const useIrcStore = defineStore('irc', () => {
   const client = shallowRef<Client | null>(null);
   const savedUser = useLocalStorage<Record<'username' | 'uid', string> | null>('chat_user', null);
 
-  const currentUser = ref<User>({
+  const currentUser = reactive<User>({
     username: '',
     uid: '',
     away: false,
     awayReason: '',
-    nicks: [],
+    nicks: new Set<string>(),
   });
   const currentNick = ref('');
   const isRegistered = ref(false);
+  const connectionStatus = ref<ConnectionStatus>('disconnected');
+  const reconnectCountdown = useCountdown(0);
+  const reconnectStatus = reactive<ReconnectionStatus>({
+    isReconnecting: false,
+    retryCount: 0,
+    maxRetryCount: 0,
+  });
 
   function initClient(username: string, uid: string) {
     if (client.value) {
@@ -39,9 +46,9 @@ const useIrcStore = defineStore('irc', () => {
 
     const nick = createNick(username);
     currentNick.value = nick;
-    currentUser.value.nicks.push(nick);
-    currentUser.value.username = username;
-    currentUser.value.uid = uid;
+    currentUser.nicks.add(nick);
+    currentUser.username = username;
+    currentUser.uid = uid;
 
     const ircClient = new Client({
       host: import.meta.env.VITE_APP_SERVER_URL!,
@@ -53,16 +60,33 @@ const useIrcStore = defineStore('irc', () => {
     })
       .on('nick in use', (event) => {
         // Remove used nick
-        currentUser.value.nicks.splice(currentUser.value.nicks.indexOf(event.nick));
+        currentUser.nicks.delete(event.nick);
         currentNick.value = '';
 
         // Retry connection with new nickname
         quit();
         initClient(username, uid);
       })
+      .on('connecting', () => {
+        connectionStatus.value = 'connecting';
+      })
       .on('registered', () => {
         isRegistered.value = true;
-        console.log(ircClient);
+      })
+      .on('connected', () => {
+        connectionStatus.value = 'connected';
+        reconnectStatus.isReconnecting = false;
+        reconnectCountdown.stop();
+      })
+      .on('reconnecting', (event) => {
+        reconnectStatus.isReconnecting = true;
+        reconnectStatus.retryCount = event.attempt;
+        reconnectStatus.maxRetryCount = event.max_retries;
+        reconnectCountdown.start(event.wait / 1_000);
+      })
+      .on('close', () => {
+        connectionStatus.value = 'reconnect failed';
+        reconnectStatus.isReconnecting = false;
       })
       .on('debug', (message) => {
         log.debug(message);
@@ -73,6 +97,7 @@ const useIrcStore = defineStore('irc', () => {
 
     ircClient.connect();
     client.value = markRaw(ircClient);
+    console.log('IRC Client:', ircClient);
   }
 
   /** Sign in with saved login (if remembered) */
@@ -89,22 +114,27 @@ const useIrcStore = defineStore('irc', () => {
     initClient(login.username, login.uid);
   }
 
-  function signOut() {
-    savedUser.value = null;
-    quit();
-  }
-
   function quit() {
     isRegistered.value = false;
+    connectionStatus.value = 'disconnected';
     client.value?.quit();
     client.value = null;
   }
 
+  function signOut() {
+    savedUser.value = null;
+    quit();
+  }
+
   return {
     client: computed(() => (isRegistered.value ? client.value : null)),
-    isConnected: computed(() => isRegistered.value && client.value !== null),
-    currentUser: computed(() => currentUser.value),
-    initClient,
+    isConnected: computed(
+      () => isRegistered.value && client.value !== null && connectionStatus.value === 'connected',
+    ),
+    connectionStatus: readonly(connectionStatus),
+    reconnectStatus: readonly(reconnectStatus),
+    reconnectCountdown: readonly(reconnectCountdown.remaining),
+    currentUser: readonly(currentUser),
     quit,
     autoSignIn,
     signIn,

src/stores/user-list.ts

@@ -14,13 +14,14 @@ const useUserListStore = defineStore('userList', () => {
   function addUser(nick: string, uid: string) {
     const username = parseNick(nick);
     if (connectedUsers.has(username)) {
+      connectedUsers.get(username)?.nicks.add(nick);
       return;
     }
 
     connectedUsers.set(username, {
       username,
       uid,
-      nicks: [nick],
+      nicks: new Set([nick]),
       away: false,
       awayReason: '',
     });
@@ -34,8 +35,8 @@ const useUserListStore = defineStore('userList', () => {
       return;
     }
 
-    user.nicks = user.nicks.filter((n) => n !== nick);
-    if (user.nicks.length === 0) {
+    user.nicks.delete(nick);
+    if (user.nicks.size === 0) {
       connectedUsers.delete(username);
     }
   }