5 files changed, 73 insertions, 78 deletions

diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js
index e52daff..c65b743 100644
--- a/ui/lib/apiServer.js
+++ b/ui/lib/apiServer.js
@@ -1,5 +1,4 @@
 import axios from 'axios';
-import { channelsList, logins, messages } from '$lib/store';
 
 export const apiServer = axios.create({
   baseURL: '/api/',
@@ -55,75 +54,11 @@ export async function acceptInvite(inviteId, username, password) {
 }
 
 export function subscribeToEvents(resumePoint) {
-  const eventsUrl = new URL('/api/events', window.location);
-  eventsUrl.searchParams.append('resume_point', resumePoint);
-  const evtSource = new EventSource(eventsUrl.toString());
-  // TODO: this should process all incoming events and store them.
-  // TODO: eventually we'll need to handle expiring old info, so as not to use
-  //       infinite browser memory.
-  /*
-   * Known message types as of now:
-   * - created: a channel is created.
-   *   - action: ignore.
-   * - message: a message is created.
-   *   - action: display message in channel.
-   * - message_deleted: a message is deleted.
-   *   - action: replace message with <...>.
-   * - deleted: a channel is deleted.
-   *   - action: remove channel from sidebar.
-   */
-  evtSource.onmessage = (evt) => {
-    const data = JSON.parse(evt.data);
-
-    switch (data.type) {
-      case 'login':
-        onLoginEvent(data);
-        break;
-      case 'channel':
-        onChannelEvent(data);
-        break;
-      case 'message':
-        onMessageEvent(data);
-        break;
+  const eventsUrl = apiServer.getUri({
+    url: '/events',
+    params: {
+      resume_point: resumePoint
     }
-  };
-
-  return evtSource;
-}
-
-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':
-      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, {
-          at: data.at,
-          sender: data.sender,
-          body: data.body
-        })
-      );
-      break;
-    case 'deleted':
-      messages.update((value) => value.deleteMessage(data.id));
-      break;
-  }
+  });
+  return new EventSource(eventsUrl);
 }
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index c73340f..4f908d2 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -2,13 +2,13 @@
   let { id, name, active, hasUnreads } = $props();
 </script>
 
-<a href="/ch/{id}">
-  <li class:active>
+<li class:active>
+  <a href="/ch/{id}">
     {#if hasUnreads}
       <span class="badge has-unreads">❦</span>
     {:else}
       <span class="badge has-no-unreads">¶</span>
     {/if}
     <span>{name}</span>
-  </li>
-</a>
+  </a>
+</li>
diff --git a/ui/lib/components/LogOut.svelte b/ui/lib/components/LogOut.svelte
index b699cfd..1cb8fb5 100644
--- a/ui/lib/components/LogOut.svelte
+++ b/ui/lib/components/LogOut.svelte
@@ -8,7 +8,7 @@
     const response = await logOut();
     if (200 <= response.status && response.status < 300) {
       currentUser.set(null);
-      goto('/login');
+      await goto('/login');
     }
   }
 </script>
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 5869654..1eb1d7b 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -24,7 +24,6 @@
 </script>
 
 <form bind:this={form} onsubmit={onSubmit}>
-  <textarea onkeydown={onKeyDown} bind:value {disabled} type="search" placeholder="Say something..."
-  ></textarea>
+  <textarea onkeydown={onKeyDown} bind:value {disabled} placeholder="Say something..."></textarea>
   <button type="submit">&raquo;</button>
 </form>
diff --git a/ui/lib/store.js b/ui/lib/store.js
index 508320f..afced4c 100644
--- a/ui/lib/store.js
+++ b/ui/lib/store.js
@@ -15,3 +15,64 @@ export const logins = writable(new Logins());
 export const channelsMetaList = writable(new ChannelsMeta({ channelsMetaData }));
 export const channelsList = writable(new Channels({ channelsMetaList }));
 export const messages = writable(new Messages());
+
+export function onEvent(event) {
+  switch (event.type) {
+    case 'login':
+      onLoginEvent(event);
+      break;
+    case 'channel':
+      onChannelEvent(event);
+      break;
+    case 'message':
+      onMessageEvent(event);
+      break;
+  }
+}
+
+onEvent.fromJson = (event) => {
+  const parsed = JSON.parse(event);
+  return onEvent(parsed);
+};
+
+onEvent.fromMessage = (message) => {
+  const data = message.data;
+  return onEvent.fromJson(data);
+};
+
+function onLoginEvent(event) {
+  switch (event.event) {
+    case 'created':
+      logins.update((value) => value.addLogin(event.id, event.name));
+      break;
+  }
+}
+
+function onChannelEvent(event) {
+  switch (event.event) {
+    case 'created':
+      channelsList.update((value) => value.addChannel(event.id, event.name));
+      break;
+    case 'deleted':
+      channelsList.update((value) => value.deleteChannel(event.id));
+      messages.update((value) => value.deleteChannel(event.id));
+      break;
+  }
+}
+
+function onMessageEvent(event) {
+  switch (event.event) {
+    case 'sent':
+      messages.update((value) =>
+        value.addMessage(event.channel, event.id, {
+          at: event.at,
+          sender: event.sender,
+          body: event.body
+        })
+      );
+      break;
+    case 'deleted':
+      messages.update((value) => value.deleteMessage(event.id));
+      break;
+  }
+}