3 files changed, 64 insertions, 70 deletions
diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js
index e541d43..bb0a587 100644
--- a/ui/lib/apiServer.js
+++ b/ui/lib/apiServer.js
@@ -61,73 +61,5 @@ export function subscribeToEvents(resumePoint) {
       resume_point: resumePoint
     }
   });
-  const evtSource = new EventSource(eventsUrl);
-  // 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;
-    }
-  };
-
-  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/store.js b/ui/lib/store.js
index 47ebbc2..c179dac 100644
--- a/ui/lib/store.js
+++ b/ui/lib/store.js
@@ -7,3 +7,64 @@ export const currentUser = writable(null);
 export const logins = writable(new Logins());
 export const channelsList = writable(new Channels());
 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;
+  }
+}
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 5ec84d9..dff9245 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -6,7 +6,7 @@
   import TinyGesture from 'tinygesture';
 
   import { boot, subscribeToEvents } from '$lib/apiServer';
-  import { currentUser, logins, channelsList, messages } from '$lib/store';
+  import { currentUser, logins, channelsList, messages, onEvent } from '$lib/store';
 
   import ChannelList from '$lib/components/ChannelList.svelte';
   import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
@@ -72,6 +72,7 @@
       case 200:
         onBooted(response.data);
         events = subscribeToEvents(response.data.resume_point);
+        events.onmessage = onEvent.fromMessage;
         break;
       case 401:
         currentUser.set(null);