front update

client/app/composables/use-clients.ts

@@ -0,0 +1,58 @@
+import type { ChadClient, UpdatedClient } from '#shared/types'
+import { createGlobalState } from '@vueuse/core'
+
+export const useClients = createGlobalState(() => {
+  const signaling = useSignaling()
+  const toast = useToast()
+
+  const clients = shallowRef<ChadClient[]>([])
+
+  watch(signaling.socket, (socket) => {
+    if (!socket)
+      return
+
+    socket.on('clientChanged', (clientId: ChadClient['id'], updatedClient: UpdatedClient) => {
+      const client = getClient(clientId)
+      updateClient(clientId, updatedClient)
+
+      if (updatedClient.username)
+        toast.add({ severity: 'info', summary: `${client?.username} is now ${updatedClient.username}`, closable: false, life: 1000 })
+    })
+  })
+
+  function getClient(clientId: ChadClient['id']) {
+    return clients.value.find(client => client.id === clientId)
+  }
+
+  function addClient(...client: ChadClient[]) {
+    clients.value.push(...client)
+
+    triggerRef(clients)
+  }
+
+  function removeClient(clientId: ChadClient['id']) {
+    clients.value = clients.value.filter(client => client.id !== clientId)
+  }
+
+  function updateClient(clientId: ChadClient['id'], updatedClient: UpdatedClient) {
+    const clientIdx = clients.value.findIndex(client => client.id === clientId)
+
+    if (clientIdx === -1)
+      return
+
+    clients.value[clientIdx] = {
+      ...clients.value[clientIdx],
+      ...updatedClient,
+    } as ChadClient
+
+    triggerRef(clients)
+  }
+
+  return {
+    clients,
+    getClient,
+    addClient,
+    removeClient,
+    updateClient,
+  }
+})