Provide a view of logins to clients.

5 files changed, 41 insertions, 4 deletions

diff --git a/hi-ui/src/apiServer.js b/hi-ui/src/apiServer.js
index e87e2d6..4421ef5 100644
--- a/hi-ui/src/apiServer.js
+++ b/hi-ui/src/apiServer.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { activeChannel, channelsList, messages } from './store';
+import { activeChannel, channelsList, loginsList, messages } from './store';
 
 export const apiServer = axios.create({
   baseURL: '/api/',
@@ -55,6 +55,9 @@ export function subscribeToEvents(resume_point) {
     const data = JSON.parse(evt.data);
 
     switch (data.type) {
+      case 'login':
+        onLoginEvent(data);
+        break;
       case 'channel':
         onChannelEvent(data);
         break;
@@ -65,6 +68,14 @@ export function subscribeToEvents(resume_point) {
   }
 }
 
+function onLoginEvent(data) {
+  switch (data.event) {
+    case 'created':
+      logins.update((value) => value.addLogin(data.id, data.name))
+      break;
+  }
+}
+
 function onChannelEvent(data) {
   switch (data.event) {
     case 'created':
diff --git a/hi-ui/src/lib/Message.svelte b/hi-ui/src/lib/Message.svelte
index 7c60ac0..d10bee3 100644
--- a/hi-ui/src/lib/Message.svelte
+++ b/hi-ui/src/lib/Message.svelte
@@ -1,6 +1,6 @@
 <script>
     import SvelteMarkdown from 'svelte-markdown';
-    import { currentUser } from '../store';
+    import { currentUser, logins } from '../store';
     import { deleteMessage } from '../apiServer';
 
     export let at;  // XXX: Omitted for now.
@@ -8,12 +8,14 @@
     export let body;
 
     let timestamp = new Date(at).toTimeString();
+    let name;
+    $: name = $logins.get(sender);
 </script>
 
 <div class="card card-hover m-4 relative">
     <span class="chip variant-soft sticky top-o left-0">
         <!-- TODO: should this show up for only the first of a run? -->
-        @{sender.name}:
+        @{name}:
     </span>
     <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
     <section class="p-4">
diff --git a/hi-ui/src/routes/+page.svelte b/hi-ui/src/routes/+page.svelte
index 932582d..39f8b62 100644
--- a/hi-ui/src/routes/+page.svelte
+++ b/hi-ui/src/routes/+page.svelte
@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 
 	import { boot, subscribeToEvents } from '../apiServer';
-	import { currentUser, channelsList, messages } from '../store';
+	import { currentUser, logins, channelsList, messages } from '../store';
 
     import ActiveChannel from '../lib/ActiveChannel.svelte';
     import ChannelList from '../lib/ChannelList.svelte';
@@ -18,6 +18,7 @@
     });
 
     function onBooted(boot) {
+        logins.update((value) => value.addLogins(boot.logins));
         currentUser.update(() => ({
             id: boot.login.id,
             username: boot.login.name,
diff --git a/hi-ui/src/store.js b/hi-ui/src/store.js
index 4e6b4f1..1b3dfca 100644
--- a/hi-ui/src/store.js
+++ b/hi-ui/src/store.js
@@ -1,8 +1,10 @@
 import { writable } from 'svelte/store';
 import { ActiveChannel, Channels } from './store/channels';
 import { Messages } from './store/messages';
+import { Logins } from './store/logins';
 
 export const currentUser = writable(null);
 export const activeChannel = writable(new ActiveChannel());
+export const logins = writable(new Logins());
 export const channelsList = writable(new Channels());
 export const messages = writable(new Messages());
diff --git a/hi-ui/src/store/logins.js b/hi-ui/src/store/logins.js
new file mode 100644
index 0000000..207b757
--- /dev/null
+++ b/hi-ui/src/store/logins.js
@@ -0,0 +1,21 @@
+export class Logins {
+	constructor() {
+		this.logins = {};
+	}
+
+	addLogin(id, name) {
+		this.logins[id] = name;
+		return this;
+	}
+
+	addLogins(logins) {
+		for (let { id, name } of logins) {
+			this.addLogin(id, name);
+		}
+		return this;
+	}
+
+	get(id) {
+		return this.logins[id];
+	}
+}