Merge branch 'main' into wip/path-routing-for-channels

6 files changed, 89 insertions, 35 deletions

diff --git a/hi-ui/src/lib/apiServer.js b/hi-ui/src/lib/apiServer.js
index 9a51715..f6d6148 100644
--- a/hi-ui/src/lib/apiServer.js
+++ b/hi-ui/src/lib/apiServer.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { activeChannel, channelsList, messages } from '$lib/store';
+import { activeChannel, channelsList, logins, messages } from '$lib/store';
 
 export const apiServer = axios.create({
   baseURL: '/api/',
@@ -25,8 +25,8 @@ export async function createChannel(name) {
   return apiServer.post('/channels', { name });
 }
 
-export async function postToChannel(channelId, message) {
-  return apiServer.post(`/channels/${channelId}`, { message });
+export async function postToChannel(channelId, body) {
+  return apiServer.post(`/channels/${channelId}`, { body });
 }
 
 export async function deleteMessage(messageId) {
@@ -55,22 +55,47 @@ export function subscribeToEvents(resume_point) {
     const data = JSON.parse(evt.data);
 
     switch (data.type) {
-      case 'created':
-        channelsList.update((value) => value.addChannel(data.channel))
+      case 'login':
+        onLoginEvent(data);
         break;
-      case 'message':
-        messages.update((value) => value.addMessage(data));
-        break;
-      case 'message_deleted':
-        messages.update((value) => value.deleteMessage(data.channel.id, data.message));
+      case 'channel':
+        onChannelEvent(data);
         break;
-      case 'deleted':
-        activeChannel.update((value) => value.deleteChannel(data.channel));
-        channelsList.update((value) => value.deleteChannel(data.channel));
-        messages.update((value) => value.deleteChannel(data.channel));
-        break;
-      default:
+      case 'message':
+        onMessageEvent(data);
         break;
     }
   }
 }
+
+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':
+      channelsList.update((value) => value.addChannel(data.id, data.name))
+      break;
+    case 'deleted':
+      activeChannel.update((value) => value.deleteChannel(data.id));
+      channelsList.update((value) => value.deleteChannel(data.id));
+      messages.update((value) => value.deleteChannel(data.id));
+      break;
+  }
+}
+
+function onMessageEvent(data) {
+  switch (data.event) {
+    case 'sent':
+      messages.update((value) => value.addMessage(data.channel, data.id, data.at, data.sender, data.body));
+      break;
+    case 'deleted':
+      messages.update((value) => value.deleteMessage(data.id));
+      break;
+  }
+}
diff --git a/hi-ui/src/lib/components/Message.svelte b/hi-ui/src/lib/components/Message.svelte
index 5b51492..d040433 100644
--- a/hi-ui/src/lib/components/Message.svelte
+++ b/hi-ui/src/lib/components/Message.svelte
@@ -1,23 +1,25 @@
 <script>
     import SvelteMarkdown from 'svelte-markdown';
-    import { currentUser } from '$lib/store';
+    import { currentUser, logins } from '$lib/store';
     import { deleteMessage } from '$lib/apiServer';
 
     export let at;  // XXX: Omitted for now.
     export let sender;
-    export let message;
+    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">
-        <SvelteMarkdown source={message.body} />
+        <SvelteMarkdown source={body} />
     </section>
 </div>
 
diff --git a/hi-ui/src/lib/store.js b/hi-ui/src/lib/store.js
index 5e28195..b964b4b 100644
--- a/hi-ui/src/lib/store.js
+++ b/hi-ui/src/lib/store.js
@@ -1,8 +1,10 @@
 import { writable } from 'svelte/store';
 import { ActiveChannel, Channels } from '$lib/store/channels';
 import { Messages } from '$lib/store/messages';
+import { Logins } from '$lib/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/lib/store/channels.js b/hi-ui/src/lib/store/channels.js
index 20702cc..bb6c86c 100644
--- a/hi-ui/src/lib/store/channels.js
+++ b/hi-ui/src/lib/store/channels.js
@@ -9,8 +9,8 @@ export class Channels {
 		return this;
 	}
 
-	addChannel(channel) {
-		this.channels = [...this.channels, channel];
+	addChannel(id, name) {
+		this.channels = [...this.channels, { id, name }];
 		this.sort();
 		return this;
 	}
diff --git a/hi-ui/src/lib/store/logins.js b/hi-ui/src/lib/store/logins.js
new file mode 100644
index 0000000..5b45206
--- /dev/null
+++ b/hi-ui/src/lib/store/logins.js
@@ -0,0 +1,22 @@
+export class Logins {
+	constructor() {
+		this.logins = {};
+	}
+
+	addLogin(id, name) {
+		this.logins[id] = name;
+		return this;
+	}
+
+	setLogins(logins) {
+		this.logins = {};
+		for (let { id, name } of logins) {
+			this.addLogin(id, name);
+		}
+		return this;
+	}
+
+	get(id) {
+		return this.logins[id];
+	}
+}
diff --git a/hi-ui/src/lib/store/messages.js b/hi-ui/src/lib/store/messages.js
index 560b9e1..931b8fb 100644
--- a/hi-ui/src/lib/store/messages.js
+++ b/hi-ui/src/lib/store/messages.js
@@ -4,28 +4,31 @@ export class Messages {
 	}
 
 	inChannel(channel) {
-		return this.channels[channel] || [];
+		return this.channels[channel] = (this.channels[channel] || []);
 	}
 
-	addMessage(message) {
-		let {
-			channel,
-			...payload
-		} = message;
-		let channel_id = channel.id;
-		this.updateChannel(channel_id, (messages) => [...messages, payload]);
+	addMessage(channel, id, at, sender, body) {
+		this.updateChannel(channel, (messages) => [...messages, { id, at, sender, body }]);
 		return this;
 	}
 
-	addMessages(channel, payloads) {
-		this.updateChannel(channel, (messages) => [...messages, ...payloads]);
+	setMessages(messages) {
+		this.channels = {};
+		for (let { channel, id, at, sender, body } of messages) {
+			this.inChannel(channel).push({ id, at, sender, body, });
+		}
+		for (let channel in this.channels) {
+			this.channels[channel].sort((a, b) => a.at - b.at);
+		}
 		return this;
 	}
 
 
-	deleteMessage(channel, message) {
-		let messages = this.messages(channel).filter((msg) => msg.message.id != message);
-		this.channels[channel] = messages;
+	deleteMessage(message) {
+		for (let channel in this.channels) {
+			this.updateChannel(channel, (messages) => messages.filter((msg) => msg.id != message));
+		}
+		return this;
 	}
 
 	deleteChannel(id) {